html标签的jquery选择器

合集下载

jquery库 用法

jquery库 用法

jquery库用法
jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和AJAX操作等常见任务。

它的使用方法可以分为以
下几个方面:
1. 引入jQuery库,首先,在HTML文档中引入jQuery库文件,可以通过在<head>标签中添加<script>标签来引入外部的jQuery库
文件,也可以使用CDN链接来引入jQuery库。

2. 文档就绪函数,jQuery提供了一个文档就绪函数,即$(document).ready(),用于确保文档完全加载后再执行jQuery代码,以避免在文档加载未完成时执行操作。

3. 选择器,jQuery使用CSS选择器来选择HTML元素,可以通
过元素名称、类名、ID等方式来选择元素,然后对选中的元素进行
操作。

4. 事件处理,jQuery可以通过事件处理函数来响应用户的操作,如点击、鼠标移入移出等,可以使用.on()方法或直接使用事件
处理函数来绑定事件。

5. DOM操作,jQuery提供了丰富的DOM操作方法,如添加、删除、替换元素,修改元素的属性和内容等。

6. 动画效果,jQuery可以实现各种动画效果,如淡入淡出、滑动、动画等,通过.animate()方法或预定义的方法来实现动画效果。

7. AJAX操作,jQuery封装了AJAX操作的方法,可以通过$.ajax()方法来发送异步请求,获取服务器数据并更新页面内容。

总之,jQuery库的用法涵盖了文档操作、事件处理、动画效果和AJAX操作等多个方面,可以大大简化JavaScript代码的编写,并提高开发效率。

希望以上内容能够全面回答你对jQuery库用法的问题。

jQuery课堂笔记(选择器)

jQuery课堂笔记(选择器)

jQuery选择器总结jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素,返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")层叠选择器:$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器:$("tr:first") 选择所有tr元素的第一个$("tr:last") 选择所有tr元素的最后一个$("input:not(:checked) + span")过滤掉:checked的选择器的所有的input元素$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素$("td:gt(4)") 选择td元素中序号大于4的所有td元素$("td:ll(4)") 选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器:$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组可视化过滤选择器:$("div:hidden") 选择所有的被hidden的div元素$("div:visible") 选择所有的可视化的div元素属性过滤选择器:$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input 元素$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器:$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器:$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button$(":text") 选择所有的text input元素$(":password") 选择所有的password input元素$(":radio") 选择所有的radio input元素$(":checkbox") 选择所有的checkbox input元素$(":submit") 选择所有的submit input元素$(":image") 选择所有的image input元素$(":reset") 选择所有的reset input元素$(":button") 选择所有的button input元素$(":file") 选择所有的file input元素$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器:$(":enabled") 选择所有的可操作的表单元素$(":disabled") 选择所有的不可操作的表单元素$(":checked") 选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个 name 为”S_03_22″的input text框的上一个td的text值$(”input[@ name =S_03_22]“).parent().prev().text()名字以”S_”开始,并且不是以”_R”结尾的$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)一个名为 radio_01的radio所选的值$(”input[@ name =radio_01][@checked]“).val();$("A B") 查找A元素下面的所有子节点,包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点例子:找到表单中所有的 input 元素HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点例子:匹配表单中所有的子级input元素。

jQuery选择器用法介绍

jQuery选择器用法介绍

jQuery选择器⽤法介绍⽬录⼀、jQuery选择器⼆、基本选择器三、层次选择器四、属性选择器五、过滤选择器1、基本过滤选择器2、可见性过滤选择器3、内容过滤器六、表单选择器七、补充1、特殊符号的转义2、选择器中的空格jQuery选择器类似于CSS选择器,⽤来选取⽹页中的元素。

例如:$("h3").css("background-color","red");说明:获取并设置⽹页中所有<h3>元素的背景⾊。

“h3”为选择器语法,必须放在$()中。

$("h3")返回jQuery对象。

⼀、jQuery选择器jQuery选择器功能强⼤,种类也很多,分类如下:1、类CSS选择器基本选择器层次选择器属性选择器2、过滤选择器基本过滤选择器可见性过滤选择器3、表单选择器4、内容过滤器⼆、基本选择器基本选择器语法如下图所⽰:⽰例:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery基本选择器⽰例</title><style>#box{background-color: #ffffff;border: 2px solid #000000;padding: 5px;}</style><script src="jquery-3.3.1.js"></script><script>$(function(){// id选择器$("#btn").click(function(){// 标签选择器选择h3标签并将其添加背景颜⾊$("h3").css("background-color","red");// 类选择器选取并设置所有class为title的元素的背景颜⾊$(".title").css("background-color","#09F");// id选择器选取并设置id为box的元素的背景颜⾊$("#box").css("background-color","#09F");// 并集选择器相当于css中的群组选择器选取并设置所有的h2、dt、class为title//的元素的背景⾊$("h2,dt,.title").css("background-color","#09A");// 交集选择器等同于CSS中的指定标签选择器选取并设置class为title的h3标签的背景⾊$("h3.title").css("background-color","yellow");// 全局选择器改变所有元素的字体颜⾊$("*").css("color","blue");});});</script></head><body><input type="button" id="btn" value="显⽰效果" /><div id="box" style="margin-top:10px;">id为box的div<h2 class="title">class为title的h2标签</h2><h3 class="title">class为title的h3标签</h3><h3>热门排⾏</h3><dl><dt><img src="qq.jpg" width="391" height="220" alt="⽃地主" /></dt><dd class="title">⽃地主</dd><dd>休闲游戏</dd><dd>QQ⽃地主是国内同时在线⼈数最多的棋牌游戏......</dd></dl></div></body></html>效果:三、层次选择器层次选择器通过DOM元素之间的层次关系来获取元素,语法如下:请看下⾯的⽰例需求说明:点击标题,使⽤层次选择器选择不同的元素使得其背景⾊为蓝⾊,如下图所⽰:代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>层次选择器演⽰⽰例</title><!--css样式--><style>*{margin: 0px;padding: 0px;line-height: 30px;}body{margin: 10px;}#menu{border: 2px solid #0033cc;padding: 10px;}a{text-decoration: none;margin-right: 5px;}span{font-weight: bold;padding: 3px;}h2{margin: 10px;cursor: pointer;/*⿏标为⼿状*/}</style><!--引⼊jQuery--><script src="jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 点击h2标题时改变背景⾊$("h2").click(function(){// 后代选择器获取并设置#menu下的span元素的背景⾊$("#menu span").css("background-color","blue");// ⼦选择器获取并设置#travel下的a元素的背景⾊$("#travel>a").css("background-color","red");// 相邻选择器只会选择第⼀个相邻的元素//获取并设置#ticket下的第⼀个a元素的背景⾊$("#ticket+a").css("background-color","red");// 同辈选择器会选择所有的元素//获取并设置#rest下的所有a元素的背景⾊$("#rest~a").css("background-color","yellow");});});</script></head><body><div id="menu"><h2 title="点击查看效果">全部旅游产品分类</h2><dl><dt>北京周边旅游<span>特价</span></dt><dd id="travel"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" </dd></dl><dl><dt>景点门票</dt><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd></dl><span>更多分类</span></div></body></html>效果:四、属性选择器属性选择器通过HTML元素的属性来选择元素。

jquery用法

jquery用法

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库,它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素,如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器:•('#element'):选择具有特定ID的元素•('.class'):选择具有特定类的元素•('input[type=“text”]'):选择特定类型的表单元素•('div:first'):选择第一个div•('ul li').eq(2):选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数:•click():单击元素时触发•dblclick():双击元素时触发•mouseenter():鼠标移入元素时触发•mouseleave():鼠标移出元素时触发•keydown():按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作,可以改变和获取元素的属性,例如:•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值,与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果,可以使网页更加动态。

以下是一些常见的动画效果:•fadeIn():淡入元素,即从不可见到可见•fadeOut():淡出元素,即从可见到不可见•slideDown():向下展开元素•slideUp():向上收缩元素•animate():通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法,可以在不刷新网页的情况下从服务器获取数据。

第二章jQuery选择器

第二章jQuery选择器

2.5、 2.5、选择器中的一些注意事项 2.5.2、选择器中包含空格 5.2、 5.2 选择器中的空格是不容忽视的, 选择器中的空格是不容忽视的,多一个空格 或少一个空格会得到截然不同的结果. 或少一个空格会得到截然不同的结果. 如: $(“div:input”) 和 $(“div :input”) 具体区别请大家自己上机实践总结。 具体区别请大家自己上机实践总结。
:visible
选择所有可见元素
集合元素
2.3.4、 2.3.4、属性过滤选择器
选择器 [attribute] [attribute=val ue] [attribute!=va lue] [attribute^=va lue] [attribute$=va lue] [attribute*=va lue] [A1][A2]…A[N] 描述
:first-child
选择每个父元素的第1个 子元素
集合元素
:last-child :only-child
选取每个父元素的最后1 个子元素 如果某个元素是它父元 素中惟一的子元素,那么 将会被匹配.如果父元素 中含有其他元素,则不会 被匹配
集合元素
集合元素
2.3.5、 2.3.5、子元素过滤选择器 • :nth-child()选择器详细功能描述:
– 4、表单选择器
2.1、jQuery基本选择器 2.1、jQuery基本选择器
选择器 #id .class Element * E1,E2,E3 描述
根据指定的id匹配元素 根据类匹配元素
返回
单个元素 集合元素
示例 $(“#hel”)选择id=hel的元素 $(“#hel”) hel”) $(“.hel”)选择class=hel的 $(“.hel”) hel”) 元素 $(“div”)选择所有的div元素 $(“*”)选择所有元素 $(“div,span,.hotclass”)选 择所有div,span,和class为 hotcalss的元素

jq常用方法

jq常用方法

jq常用方法jq是一个快速、简洁、灵活的JavaScript库,它允许我们轻松地操纵HTML文档,解析和处理JSON数据、处理表单和事件等。

在使用jq时,我们经常用到一些常用方法,那么接下来,我们就来一一讲解。

1. 选择器在jq中,选择器是最为基本的部分,它可以让我们快速地筛选元素,比如:- $("#id"):根据id选择元素。

- $(".class"):根据class选择元素。

- $("tag"):根据标签名选择元素。

- $("element").find(selector):在指定元素中查找符合条件的元素。

2. 事件绑定在jq中,我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有:- $(selector).click(function(){}):点击元素触发事件。

- $(selector).mouseover(function(){}):鼠标移上元素触发事件。

- $(selector).submit(function(){}):表单提交触发事件。

- $(selector).focus(function(){}):元素获得焦点触发事件。

3. DOM操作在jq中,我们可以通过一些方法来快速地操作DOM元素,比如:- $(selector).html():获取或设置元素的HTML内容。

- $(selector).text():获取或设置元素的文本内容。

- $(selector).attr():获取或设置元素的属性。

- $(selector).addClass():为元素添加class。

- $(selector).remove():删除指定元素。

4. 动画效果在jq中,我们可以通过动态效果来增加网页的交互性,比如:- $(selector).show(speed,callback):显示元素,可以设置速度和回调函数。

菜鸟教程jquery语法

菜鸟教程jquery语法

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库,它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作,为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法,包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一,它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器:- 元素选择器$('p'):获取所有的p元素$('#header'):获取id为header的元素$('.nav'):获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似,但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法:- click():点击事件$('button').click(function(){//执行操作});- hover():鼠标悬停事件jQuery提供了一些强大的动画效果,比如淡入淡出、滑动等。

以下是一些常用的动画效果:- fadeIn():淡入效果$('div').fadeIn();- slideUp():上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互,比如发送请求、接收数据等。

以下是一些常用的AJAX方法:- $.ajax():发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍,包括选择器、事件、动画和AJAX交互等常用功能。

jQuery中选择器的基础使用教程

jQuery中选择器的基础使用教程

jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己只有用皮毛而已,所以希望藉着这一系列的笔记,让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道,他提供了一个模型,让JavaScript 能藉由此模型来改变或操作整个网页,&lt;div class="one"&gt;&nbsp; &lt;p&gt;two_1&lt;/p&gt;&nbsp; &lt;p&gt;two_2&lt;/p&gt;&nbsp; &lt;p&gt;two_2&lt;/p&gt;&lt;/div&gt;我这边就简单介绍一下DOM模型,有个元素class名为one的是父元素,底下有三个儿子元素&lt;p&gt;,每个元素都视为一个节点,也可以看成一个树形图,因为我认为有些东西是Google会讲得比我好,所以还想知道更多纠结的父子关系...,可以去这,那边有很好的说明,这边就不多加解释,而当Jquery利用选择器抓取到DOM元素以后,就会将他包装成一个Jquery object,并且回传$('#MyDiv')&lt;-- 他是一个物件这里有个观念十分重要,因为许多初学者,甚至是一些从Jquery开始学起Javascript的开发者(包括我),常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来,妳会发现console出来的结果,用JavaScript取出来的结果是DOM,可是一样的div用Jquery取出来的却是个包装过后的物件,换句话说,你不能直接对包装过后的Jquery物件增加DOM的事件,而是要用Jquery提供的事件,有人会说,那意思是不是说以后只能河水不犯井水,往后互不干涉,从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择,我们都会用相同的函式$(),就如之前所讲的,他能接受CSS选择器的语法做为参数,而最主要的三个参数分别为tag name、ID与class,当然,这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的,都有隐式迭代的特色,而为了做到跨览器的支援,Jquery的选择器包含了CSS1-3,所以不用担心一些比较特别的浏览器(对就是IE6)不能执行,除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是,为什么都是替index为1的tr加上class,却是不同的结果呢?,因为:eq()算是一个JavaScript阵列,index是0起始,所以才会选到第二个,而nth-child()是CSS选择器的一种,所以index是以1起始,选到的就是第一个,以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的,index起始不同(JavaScript起始为0,CSS为1),所以虽然都是取偶数,但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){&nbsp; &nbsp; alert('a');});这就代表说绑定所有的bitton一个click事件,其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时,例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...,这时候还可以用一个方法filter,这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS,这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用,像还有.next()、.parent()、.children()一般常用的这几个,其实就很够用了我认为,再多的选择器有时候好像只是展示不同的写法,但其实只要能抓取到你想要的元素,解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类,我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目,当用户进入一个页面时,默认显示前面5个分类的名称以及最后一个分类——其他分类,用户可以通过单击“显示全部分类”按钮来显示全部分类,同时一些推荐的分类会加下划线显示,按钮中的文字会改变为“显示部分分类”,再次单击“显示部分分类”后会回到之前的页面状态。

jQuery选择器和遍历的总结

jQuery选择器和遍历的总结

jQuery选择器和遍历的总结$('*'):全部元素$(this):选中这个元素,this永远指的都是调⽤函数的那个对象$('#intro'):id为intro的元素$('.intro'):class为intro的元素$('li:first'):所有li⾥的第⼀个$('li:last'):所有li⾥的最后⼀个$('li:first-child'):某个⽗元素⾥的第⼀个⼦元素,同时得是li元素$('ul li:first'):第⼀个ul⾥的第⼀个li$('ul li:first-child'):每个ul⾥的第⼀个⼦元素,同时得是li元素$('footer .item:last-of-type'):footer的后代元素,类名是item,是其兄弟元素中的最后⼀个(元素种类不⼀致时每种元素都会出⼀个)$('ul li:nth-child(n)'):每个ul⾥的第n个⼦元素并且同时得是li元素,n从1开始$('ul li:nth-child(n+4)'):每个ul⾥的第4个⼦元素后⾯的元素并且同时得是li元素,包括第4个⼦元素,n从0开始$('ul li:nth-child(-n+4)'):每个ul⾥的第1,2,3,4个⼦元素并且同时得是li元素,包括第4个⼦元素,n从0开始$('ul li:nth-child(3n+1)'):隔⼆取⼀$('ul li:nth-last-child(n)'):倒数第n个,n从1开始$('ul li:nth-of-type(2)'):每个ul⾥的li元素⾥的第⼆个,括号⾥的数字从1开始$('p.intro'):intro类中的p元素$('div>span'):div的直接⼦元素⾥的span$('div span'):div的后代⼦元素⾥的span$('.intro+'):每个类名为intro的元素的下⼀个兄弟元素$('div~p'): div后⾯的兄弟元素⾥的所有p元素$('li:even'):索引值是偶数的li,注意!索引值从0开始$('li:odd'):索引值是奇数的li$('li:lt(3)'):索引值⼩于3的li$('li:gt(3)'):索引值⼤于3的li$('li:eq(index)'):按索引值index选中元素,index从0开始$('ul:parent'):是⽗元素的ul$('div:has(span)'):⾥⾯有span元素的div$('div:has(p,span,li)'):⾥⾯同时有p,span和li的div$(':animated'):当前所有动画元素$(':button'):button元素和type='button'的input元素$('[id]'):有id属性的元素$('[id="jQuery"]'):有id属性且属性值等于jQuery的元素。

jquery实现时间选择器

jquery实现时间选择器

jquery实现时间选择器本⽂实例为⼤家分享了jquery实现时间选择器的具体代码,供⼤家参考,具体内容如下效果图:代码:<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="flexible" content="initial-dpr=2" /><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="author" content="bright2017" /><title>时间选择器</title><style type="text/css">ul,li{list-style: none;}div{box-sizing: border-box;}/* 遮罩层 */.hidden_view {width: 100%;background: #000000;z-index: 9;display: none;}.flex{display: flex;}.billing_cent_time {width: 100%;position: fixed;left: 0;top: 0;z-index: 99;display: none;}.billing_cent_data {width: 100%;height: 100%;justify-content: center;align-items: center;}.billing_select {width: 230px;height: 230px;background: #FFFFFF;position: relative;border-radius: 3px;}.billing_select_top>div {text-align: center;font-size: 15px;height: 55px;line-height: 55px;}.billing_time {width: 100%;justify-content: center;align-items: center;font-size: 15px;padding: 0 20px;}.billing_time>div {width: calc((100% - 30px)/3);text-align: center;font-weight: bold;}.billing_select_center_new>ul {width: calc((100% - 30px)/3);height: 100%;overflow: auto;padding: 47px 0;box-sizing: border-box;}.billing_select_center_new>ul>li {width: 100%;height: 47px;line-height: 47px;font-size: 15px;text-align: center;opacity: .5;}.billing_time>div:nth-child(2), .billing_select_center_new>ul:nth-child(2) { margin: 0 15px;}.billing_select_center {width: 100%;height: 141px;padding: 0 20px;overflow: hidden;position: relative;}.billing_select_center_new {width: 100%;}.billing_select_bot {width: 100%;text-align: center;height: 45px;line-height: 45px;background: #EEEEEE;text-align: center;position: absolute;left: 0;bottom: 0;z-index: 3;border-radius: 3px;}.billing_select_center>ul {width: 100%;height: 100%;overflow: auto;padding: 47px 0;position: absolute;left: 0;top: 0;z-index: 3;}.billing_select_center>ul>li {width: 100%;height: 47px;line-height: 47px;font-size: 0.4rem;text-align: center;opacity: .5;}.billing_select_border {width: calc(100% - 40px);left: 20px;height: 1px;position: absolute;top: 47px;background-color: #F2F2F2;}.billing_select_border2 {width: calc(100% - 40px);left: 20px;height: 1px;position: absolute;top: 94px;background-color: #F2F2F2;}.billing_opacity {opacity: 1 !important;}.end_time{width: 100px;height: 40px;line-height: 40px;border-radius: 5px; text-align: center;margin: 50px auto;font-size: 17px;}.time_val{text-align: center;font-size: 17px;}</style></head><body><div class="end_time">选择时间</div><div class="time_val"></div><!-- 遮罩层 --><div class="hidden_view"></div><!-- ⽇期 --><div class="billing_cent_time"><div class="billing_cent_data flex"><div class="flex billing_time"><div>年</div><div>⽉</div><div>⽇</div></div><div class="billing_select_center"><div class="billing_select_center_new flex"><ul class="billing_time_one"><li class="billing_opacity">2020</li><li>2021</li><li>2022</li><li>2023</li><li>2024</li><li>2025</li><li>2026</li><li>2027</li><li>2028</li><li>2029</li><li>2030</li><li>2031</li><li>2032</li><li>2033</li><li>2034</li><li>2035</li><li>2036</li><li>2037</li><li>2038</li><li>2039</li><li>2040</li><li>2041</li><li>2042</li><li>2043</li><li>2044</li><li>2045</li><li>2046</li><li>2047</li><li>2048</li><li>2049</li><li>2050</li></ul><ul class="billing_time_two"><li class="billing_opacity">01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul><ul class="billing_time_three"></ul></div><div class="billing_select_border"></div><div class="billing_select_border2"></div></div><div class="billing_select_bot">确定</div></div></div></div><script src="js/jq.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">$(function() {var heg = $(window).height();$(".hidden_view").height(heg);$(".billing_cent_time").height(heg);// 监听滚动事件// 年份const $ScrollWrap = $(".billing_time_one");// ⽉份const $ScrollWrap_month = $(".billing_time_two");// 天const $ScrollWrap_day = $(".billing_time_three");// 监听滚动停⽌let t1 = 0;let t2 = 0;let timer = null; // 定时器let t3 = 0;let t4 = 0;let timer2 = null; // 定时器let t5 = 0;let t6 = 0;let timer3 = null; // 定时器// 年份滚动$ScrollWrap.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap.on("scroll", function() {// 滚动clearTimeout(timer)timer = setTimeout(isScrollEnd, 100)t1 = $ScrollWrap.scrollTop()})function isScrollEnd() {t2 = $ScrollWrap.scrollTop();if (t2 == t1) {// 滚动停⽌clearTimeout(timer)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_one>li").length;for (var k = 0; k < leng; k++) {var top_leng = $(".billing_time_one").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim(); $(".billing_time_one").children("li").removeClass("billing_opacity");$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");// ⽉份滚动归0$(".billing_time_two").scrollTop(0);$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_one").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim(); $(".billing_time_one").children("li").removeClass("billing_opacity");$(".billing_time_one").children("li").eq(k).addClass("billing_opacity");// ⽉份滚动归0$(".billing_time_two").scrollTop(0);$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_one").scrollTop(scrool_heg);}}}}}// ⽉份滚动$ScrollWrap_month.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap_month.on("scroll", function() {// 滚动clearTimeout(timer2)timer2 = setTimeout(isScrollEnd2, 100)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_two>li").length;for (var k = 0; k < leng; k++) {var top_txt = $(".billing_time_two").children("li").eq(k).text().trim();var top_leng = $(".billing_time_two").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();$(".billing_time_two").children("li").removeClass("billing_opacity");$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");// 1 3 5 7 8 10 12 ⽉是31天// 2⽉是28天// 4 6 9 11 ⽉搜30天$(".billing_time_three").children("li").remove();if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt == 08 || top_txt == 10 || top_txt == 12) {day31();}if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {day30();}if (top_txt == 02) {day28();}$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_two").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();$(".billing_time_two").children("li").removeClass("billing_opacity");$(".billing_time_two").children("li").eq(k).addClass("billing_opacity");// 1 3 5 7 8 10 12 ⽉是31天// 2⽉是28天// 4 6 9 11 ⽉搜30天$(".billing_time_three").children("li").remove();if (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt ==08 ||top_txt == 10 || top_txt == 12) {day31();}if (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {day30();}if (top_txt == 02) {day28();}$(".billing_time_three").scrollTop(0);// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_two").scrollTop(scrool_heg);}}}}}// 天滚动$ScrollWrap_day.on("touchstart", function() {// 触摸开始≈滚动开始})$ScrollWrap_day.on("scroll", function() {// 滚动clearTimeout(timer3)timer3 = setTimeout(isScrollEnd3, 100)// 获取每个li距离顶部边框的距离var leng = $(".billing_time_three>li").length;for (var k = 0; k < leng; k++) {var top_leng = $(".billing_time_three").children("li").eq(k).position().top;// 区间在 30 ~ 60 之间则选中这个区间范围是根据⾼度来决定的if (top_leng >= 30 && top_leng <= 60) {scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim(); $(".billing_time_three").children("li").removeClass("billing_opacity");$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;console.log("0000000", scrool_heg)$(".billing_time_three").scrollTop(scrool_heg);} else {top_leng = top_leng + 15;if (top_leng >= 30 && top_leng <= 60) {scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim(); $(".billing_time_three").children("li").removeClass("billing_opacity");$(".billing_time_three").children("li").eq(k).addClass("billing_opacity");// 滚动到相应位置每个li⾼度 47pxvar scrool_heg = k * 47;$(".billing_time_three").scrollTop(scrool_heg);}}}}}// 显⽰$(".end_time").click(function() {$(".hidden_view").show();$(".billing_cent_time").show();});// 时间默认加载31天day31();function day28() {for (var k = 1; k <= 28; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 28) {$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");}}function day30() {for (var k = 1; k <= 30; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 30) {function day31() {for (var k = 1; k <= 31; k++) {var num = '0' + k;var txt = `<li>${num}</li>`;var txt2 = `<li>${k}</li>`;if (k >= 10) {$(".billing_time_three").append(txt2);} else {$(".billing_time_three").append(txt)}}if (k >= 31) {$(".billing_time_three").children("li").eq(0).addClass("billing_opacity");}}// 确定$(".billing_select_bot").click(function() {console.log(scroll_year_index, "年~", scroll_month_index, '⽉~', scroll_day_index)var tim_cent = scroll_year_index + "-" + scroll_month_index + '-' + scroll_day_index;$(".hidden_view").hide();$(".billing_cent_time").hide();$(".time_val").text(tim_cent);});});</script></body></html>以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

html的jquery使用方法

html的jquery使用方法

HTML的jQuery使用方法一、简介1.1 什么是jQuery?jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax等常见的操作。

通过jQuery,我们能够以更少的代码完成更多的功能,提高了JavaScript代码的可读性和可维护性。

1.2 为什么要使用jQuery?相比纯粹的JavaScript,jQuery提供了更丰富的API和更简洁的语法,能够大大提高开发效率。

另外,jQuery还兼容了各种浏览器,并且具有良好的扩展性,使得它成为前端开发中不可或缺的工具。

二、引入jQuery2.1 下载jQuery我们需要从官方全球信息湾下载jQuery库文件。

选择合适的版本,然后将文件保存到项目的相应目录下。

2.2 引入jQuery在HTML文件中,通过`<script>`标签将jQuery库文件引入到页面中。

通常情况下,我们会将jQuery的引入放在`<head>`标签的末尾或者`<body>`标签的开始位置。

```html<!DOCTYPE html><html><head><title>使用jQuery的HTML页面</title><script src="jquery.min.js"></script></head><body><!-- 页面内容 --></body></html>```三、基本用法3.1 文档就绪事件在使用jQuery时,为了确保DOM结构已经加载完毕,我们通常会将jQuery代码放在文档就绪事件中。

这可以通过`$(document).ready()`来实现。

```javascript$(document).ready(function(){// 在此处编写jQuery代码```3.2 选择器jQuery的选择器和CSS的选择器非常相似,我们可以使用各种选择器定位页面上的元素,然后对这些元素进行操作。

jq 获取当前元素和获取下个元素的方法-概述说明以及解释

jq 获取当前元素和获取下个元素的方法-概述说明以及解释

jq 获取当前元素和获取下个元素的方法-概述说明以及解释1.引言1.1 概述概述部分将引入本文的主题,即介绍jq获取当前元素和获取下个元素的方法。

jq是一款流行的JavaScript库,它简化了操作HTML元素和处理数据的过程,使得开发者能够更轻松地操作和处理DOM元素。

在网页开发中,我们经常需要根据用户的操作或者特定的需求获取当前元素或下一个元素,以便进行相应的处理或操作。

jq提供了一系列的方法,可以方便地获取当前元素和获取下一个元素,极大地简化了我们在开发过程中的工作量。

本文将介绍jq获取当前元素的方法和获取下一个元素的方法,并给出一些实际的示例和应用场景。

通过本文的学习,读者将对jq的这些方法有更深入的了解,能够更加灵活和高效地处理和操作HTML元素。

通过本文的学习,读者将了解到:- jq是什么,以及为什么使用jq来操作HTML元素和处理数据- jq获取当前元素的方法,包括基本的选择器方法和遍历方法- jq获取下一个元素的方法,包括基于兄弟关系和位置的方法- 实际应用场景和示例,帮助读者更好地理解和掌握这些方法- 总结和结论,对本文的内容进行回顾和总结在接下来的章节中,我们将详细介绍jq获取当前元素和获取下一个元素的方法。

首先,我们将从基本的选择器方法和遍历方法开始,了解如何获取当前元素。

然后,我们将介绍获取下一个元素的方法,包括基于兄弟关系和位置的方法。

最后,我们将给出一些实际的示例和应用场景,帮助读者更好地理解和应用这些方法。

让我们开始吧!1.2 文章结构文章主要分为三个部分:引言、正文和结论。

引言部分介绍了本文的概要、结构和目的。

主要是为读者提供一个全面的了解,使读者对本文的内容和目标有一个清晰的认知。

正文部分是本文的核心,主要讲述了两个方面的内容,分别是jq 获取当前元素的方法和jq 获取下一个元素的方法。

在这部分中,将详细介绍这两个方法的具体使用,包括语法、参数、示例等。

同时,会通过实际案例和解析来说明这些方法的实际应用场景和使用技巧,以便读者能够更好地理解和掌握这些方法。

第2章 jQuery基础选择器

第2章  jQuery基础选择器

练习题
一、单选题
1.下面有一段代码,其中只能获取第2个div元素的是(
<!Dቤተ መጻሕፍቲ ባይዱCTYPE html> <html> <head>
<meta charset="utf-8" /> <title></title> </head> <body> <div id="first"></div> <div></div> <div></div> </body> </html>
第二章 基础选择器
教学重点
➢ 掌握4种基础选择器
2.1 jQuery选择器简介
• jQuery选择器跟CSS选择器几乎完全一样,我们在接下来的学习中应该 多对比一下,这样学习速度可以快很多。
2.2 基本选择器
• 所谓的基本选择器,指的是在实际开发中使用频率最高的选择器。其中, 基本选择有以下4种。
二、编程题 1. 请写出下面对应的jQuery选择器,每一项对应一个。 (1)选取含有href属性的a元素。 (2)选取type取值为radio的input元素。 (3)选取type取值不是checkbox的input元素。 (4)选取class属性包含nav的div元素(class属性可以包含多个值)。 (5)选取class属性以article开头的div元素,例如<div class="article-title"></div>。 (6)选取class属性以content结尾的div元素,例如<div class="article-content"></div>。 (7)选取带有id属性并且class属性是以article开头的div元素,例如<div id="container" class="article-title"></div>。

使用jquery选择器如何获取父级元素、同级元素、子元素

使用jquery选择器如何获取父级元素、同级元素、子元素

使⽤jquery选择器如何获取⽗级元素、同级元素、⼦元素⼀、获取⽗级元素1、 parent([expr]):获取指定元素的所有⽗级元素复制代码代码如下:<div id="par_div"><a id="href_fir" href="#">href_fir</a><a id="href_sec" href="#">href_sec</a><a id="href_thr" href="#">href_thr</a></div><span id="par_span"><a id="href_fiv" href="#">href_fiv</a></span>$(document).ready(function(){$("a").parent().addClass('a_par');});firebug查看jquery parent效果⼆、获取同级元素:1、next([expr]):获取指定元素的下⼀个同级元素(注意是下⼀个同级元素哦)复制代码代码如下:<!DOCTYPE html><html><head><script type="text/javascript" src="/jquery/jquery.js"></script></head><body><ul><li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li.third-item').next().css('background-color', 'red');</script></body></html>这个例⼦的结果是,只有list item 4背景⾊变为红⾊2、nextAll([expr]):获取指定元素后边的所有同级元素复制代码代码如下:<div><span>And Again</span></div>var p_nex = $("p").nextAll();p_nex.addClass('p_next_all');注意看最后⼀个”<p>”标签哦,也被加上了'p_next_all'这个类名哦~~3、andSelf():获取指定元素后边的所有同级元素,之后加上指定的元素我感觉这个函数是最有意思的⼀个函数了,什么意思?直译过来就是”还有我“,”还有⾃⼰”,没错,还有⾃⼰。

jq 获取iframe元素

jq 获取iframe元素

jq获取iframe元素在前端开发中,经常会遇到需要操作嵌套在页面中的iframe元素的情况。

而使用jQuery库中的jq方法可以方便地获取和操作iframe元素。

本文将详细介绍如何使用jq获取iframe元素,并提供一些示例代码。

什么是iframe元素?iframe元素是HTML中的一个标签,用于在网页中嵌入另一个网页。

它可以在一个网页中显示其他网页的内容,并且可以在父页面和子页面之间进行通信。

iframe 元素通常用于嵌入广告、地图、视频等内容。

jq方法简介jQuery是一个功能强大且易于使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果等操作。

jq方法是jQuery库中的一个方法,用于选择HTML 元素。

通过使用jq方法,我们可以方便地选择和操作HTML元素。

使用jq获取iframe元素要使用jq获取iframe元素,我们首先需要引入jQuery库。

可以通过以下方式引入:<script src=""></script>接下来,我们可以使用jq方法来选择和获取iframe元素。

使用jq方法的语法如下:$('selector')其中,$符号是jQuery的别名,selector是元素的选择器。

要选择iframe元素,可以使用以下选择器:•iframe:选择所有的iframe元素。

•iframe[name="iframeName"]:选择指定name属性值的iframe元素。

•iframe#iframeId:选择指定id属性值的iframe元素。

例如,要选择页面中的第一个iframe元素,可以使用以下代码:var iframe = $('iframe').eq(0);这样,我们就可以通过变量iframe来操作选择的iframe元素了。

操作iframe元素一旦我们获取了iframe元素,就可以使用jq方法来操作它。

jquery的使用方法

jquery的使用方法

jquery的使用方法jQuery作为一种常用的JavaScript库,其强大的功能和简化代码的方便性让其成为前端开发者中的首选。

以下是在项目中常见的jQuery使用方法的分步骤阐述:1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库,通常我们是从官网下载一个jquery-x.x.x.js文件,在引用时需要写正确的路径。

2. jQuery对象的创建要使用jQuery对象,首先需要用jQuery构造函数来创建一个jQuery对象。

这可以使用两种方式创建:1)通过$或jQuery函数创建:例如:$("选择器")或者jQuery("选择器");2)通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。

3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器,也支持自定义选择器。

与CSS选择器类似,jQuery选择器是用于选择HTML元素的字符串。

例如:选择id为“content”的元素:$("#content");选择class为“box”的元素:$(".box");选择label元素中“for”属性值为“id”的元素:$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件,例如:$(selector).bind(event,function)绑定事件。

事件可以是click、dblclick、mouseenter等等,函数可以是已定义的函数名,也可以是匿名函数。

5. 样式的操作通过jQuery对象的css()方法设置样式。

例如:$(selector).css('color','#fff')设置字体颜色为白色,$(selector).addClass('className')增加类名为'className'的样式。

HTML选择器的四种使用方法

HTML选择器的四种使用方法

HTML选择器的四种使⽤⽅法选择器<style>为了让.html代码更加简洁,这⾥引⼊选择器style本⽂总共介绍选择器的四种使⽤⽅式⼀、选择器的四种形式1.ID选择器id表⽰⾝份,在页⾯元素中的id不允许重复,因此id选择器只能选择单个元素2.类别选择器选择拥有该类别的多个元素3.标签选择器根据标签名称,选择对应的所有标签4.通⽤选择器针对页⾯中的所以标签都⽣效⼆、选择器的使⽤这是⼀段没有使⽤选择器的html代码:<!--这是⼀段未使⽤选择器的代码--><!DOCTYPE html><html style="background-color: gainsboro"><head><meta charset="utf-8"><title></title></head><body style="margin: 0;"><div id="banner"><img src="img1/img2.png" style="width: 100%;" ></div><div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;"><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决⽅案</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a></div><div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">运⽤先进技术积极推动改变,让整个世界更美好。

bootstrap-select 初始化方法

bootstrap-select 初始化方法

Bootstrap-Select 初始化方法详解Bootstrap-Select 是一个用于增强和美化 HTML 选择框的 jQuery 插件。

它提供了许多有用的特性,如搜索、多选、标签等。

然而,要让 Bootstrap-Select 正常工作,我们首先需要正确地初始化它。

本文将详细介绍 Bootstrap-Select 的初始化方法。

首先,你需要在你的项目中引入 Bootstrap 和 jQuery。

然后,通过 CDN 或者本地下载的方式引入 Bootstrap-Select 的 CSS 和 JS 文件。

```html<!-- 引入 Bootstrap CSS --><link rel="stylesheet"href="maxcdn.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css"><!-- 引入 jQuery --><scriptsrc="ajax.googleapis/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!-- 引入 Bootstrap JavaScript --><scriptsrc="maxcdn.bootstrapcdn/bootstrap/3.4.1/js/bootstrap.min.js"></script><!-- 引入 Bootstrap-Select CSS --><link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css"><!-- 引入 Bootstrap-Select JavaScript --><script src="cdnjs.cloudflare/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>```接下来,我们需要对我们的选择框进行初始化。

JQ选择器

JQ选择器

一·通过一个简单的例子,简单区分下jQuery对象与DOM对象:我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:“您好!通过慕课网学习jQuery才是最佳的途径”,并且让文字颜色变成红色。

普通处理,通过标准JavaScript处理:通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色。

jQuery的处理:通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。

这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。

二·利用数组下标的方式读取到jQuery中的DOM对象HTML代码JavaScript代码用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色。

这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0通过jQuery自带的get()方法jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

三·通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了HTML代码JavaScript代码通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden") 选择所有的被hidden的div元素
结果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
层叠选择器:
$("form input") 选择所有的form元素中的input元素
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$("form ~ input")
结果:
[ <input name="none" /> ]
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input namห้องสมุดไป่ตู้="none" />
jQuery 代码:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
相关文档
最新文档