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选择器⼆、基本选择器三、层次选择器四、属性选择器五、过滤选择器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><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><script src="jquery-3.3.1.js"></script><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是一种广泛应用于网页开发的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选择器

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的元素

JQuery选择器全集

选取含有选择器所匹配的元素的元素
集合元素
:parent
选取含有子元素或者文本的元素
集合元素
可见性过滤选择器
选择器
描述
返回
:hidden
选取所有不可见元素
集合元素
:visible
选取所有可见元素
集合元素
属性过滤选择器格式：[attribute +符号+ value]
符号
描述
符号
描述
[attribute]
集合元素
:header
选取所有的标题元素
集合元素
:animated
选取当前正在执行动画的所有元素
集合元素
:focus
选取当前获取焦点的元素
集合元素
内容过滤选择器
选择器
描述
返回
:contains(text)
选取含有文本内容为“text“的元素
集合元素
:empty
选取不包含子元素或文本的空元素
集合元素
:has(selector)
选取所有的不可见元素
集合元素
集合元素
:first-child
选取每个父元素的第一个子元素
集合元素
:last-child
选取每个父元素的最后一个子元素
集合元素
:only-child
选取每个父元素中，唯一情况下的子元素
集合元素
表单对象属性过滤选择器
选择器
描述
返回
:enabled
选取所有可用元素
集合元素
:disabled
选取所有不可用元素
层次选择器
选择器
描述
返回
$(“ancestor descendant”)

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是一种高效、简洁又方便的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的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，<div class="one">  <p>two_1</p>  <p>two_2</p>  <p>two_2</p></div>我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从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(){    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实现时间选择器的具体代码，供⼤家参考，具体内容如下效果图：代码：<!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>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery CSS和xpath选择器

jQuery具有一个相当强大的选择器引擎，提供了完整的选择器语法，允许我们选择几乎所有的元素组合。

jQuery 的选择器语法主要是基于 CSS3 和 XPath 的，对 CSS3 和 XPath 了解越多，使用 jQuery 时就越显得心应手。

有关 CSS 和XPath，请参阅以下链接：∙CSS 1∙CSS 2∙CSS 3∙xPath值得注意的是， CSS3 并没有得到现今所有浏览器的支持，因此我们很少使用它。

然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎，并且实现了对 CSS3 的支持。

想了解 jQuery 选择器更多信息，可以访问 jQuery 的官方文档有关 Selector 的部分。

下面，在原官方文档的基础上作一些简单的翻译和说明。

1. CSS 选择器（CSS Selectors）jQuery 完整地支持 CSS 1-3，并且可以在（选择器）表达式里加入自定义的CSS-like （和xPath）。

1.1 jQuery 支持的 CSS 选择器语法∙*任何 element∙E类型为 E 的所有element（其实 E 可以是任何 element）∙E:nth-child(n)一个类型为 E 的 element，它是其父 element 的第 n 个子 element∙E:first-child一个类型为 E 的 element，它是其父 element 的第一个子 element（相当于E:nth-child(0)）∙E:last-child一个类型为 E 的 element，它是其父 element 的最后一个子 element∙E:only-child一个类型为 E 的 element，它是其父 element 的唯一子element∙E:empty一个类型为 E 的用户界面（UI） element，它没有子 element （包括文本 element）∙E:enabled一个类型为 E 的用户界面（UI） element，它被设置为禁止（disabled）∙E:disabled一个类型为 E 的用户界面（UI） element，它被设置为允许（enabled）∙E:checked一个类型为 E 的用户界面（UI） element，它处于选中（checked）状态（适用于单选按钮和复选框）∙E:selected一个类型为 E 的用户界面（UI） element，它处于被选择（selected）状态（在选择范围内，有一个或多个可供选择的 element ）。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

jQuery 参考手册- 选择器
jQuery 选择器
选择器实例选取
*$("*") 所有元素
#id$("#lastname") id="lastname" 的元素
.class$(".intro") 所有 class="intro" 的元素
element$("p") 所有 <p> 元素
.class.class$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first$("p:first") 第一个 <p> 元素
:last$("p:last") 最后一个 <p> 元素
:even$("tr:even") 所有偶数 <tr> 元素
:odd$("tr:odd") 所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no)$("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)") 列出 index 小于 3 的元素
所有不为空的 input 元素
:not(selector) $("input:not(:em
pty)")
:header$(":header") 所有标题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3
包含指定字符串的所有元素
School')")
:empty$(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible$("table:visible所有可见的表格
")
s1,s2,s3 $("th,td,.intro"
所有带有匹配选择的元素
)
[attribute]$("[href]") 所有带有 href 属性的元素
[attribute=value]$("[href='#']") 所有 href 属性的值等于 "#" 的元素[attribute!=value]$("[href!='#']") 所有 href 属性的值不等于 "#" 的元素[attribute$=value]$("[href$='.jpg'
所有 href 属性的值包含以 ".jpg" 结尾的元素
]")
:input$(":input") 所有 <input> 元素
:text$(":text") 所有 type="text" 的 <input> 元素
:password$(":password") 所有 type="password" 的 <input> 元素
:radio$(":radio") 所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit$(":submit") 所有 type="submit" 的 <input> 元素
:reset$(":reset") 所有 type="reset" 的 <input> 元素
:button$(":button") 所有 type="button" 的 <input> 元素
:image$(":image") 所有 type="image" 的 <input> 元素
:file$(":file") 所有 type="file" 的 <input> 元素
:enabled$(":enabled") 所有激活的 input 元素
:disabled$(":disabled") 所有禁用的 input 元素
:selected$(":selected") 所有被选取的 input 元素
:checked$(":checked") 所有被选中的 input 元素。