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... ...个元素

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的方法，可以在不刷新网页的情况下从服务器获取数据。以下是一些常见的AJAX方法：

By Cuiyong

层次选择器

选择器 描述 返回

$(“ancestor descendant”) 选取ancestor元素里所有descendant元素，包括descendant的子元素 集合元素

$(“parent > child”) 选取parent元素里的child元素，不包括child的子元素 集合元素

$(“prev + next”) 选取紧接在prev元素后的同辈next元素 集合元素

$(“prev~siblings”) 选取所有在prev元素后的同辈siblings元素 集合元素

过滤选择器

选择器 描述 返回

:first 选取集合中，第一个元素 单个元素

:last 选取集合中，最后一个元素 单个元素

:not(selector) 去除所有与给定选择器匹配的元素 集合元素

:even 选取索引是偶数的所有元素，从0开始 集合元素

:odd 选取索引是奇数的所有元素，从0开始 集合元素

:eq(index) 选取索引是index的元素，从0开始 单个元素

:gt(index) 选取集合中，索引大于index的元素，从0开始 集合元素

:lt(index) 选取集合中，索引小于index的元素，从0开始 集合元素

:header 选取所有的标题元素 集合元素

:animated 选取当前正在执行动画的所有元素 集合元素

:focus 选取当前获取焦点的元素 集合元素

内容过滤选择器

选择器 描述 返回

:contains(text) 选取含有文本内容为“text“的元素 集合元素

:empty 选取不包含子元素或文本的空元素 集合元素

:has(selector) 选取含有选择器所匹配的元素的元素 集合元素

:parent 选取含有子元素或者文本的元素 集合元素

可见性过滤选择器

选择器 描述 返回

:hidden 选取所有不可见元素 集合元素

:visible 选取所有可见元素 集合元素

jquery所有选择器，dom操作常⽤⽅法

⼀、基础选择器

1，id选择器 $("#my_id") 根据id获取jquery对象；

2，元素选择器 （element选择器、标签选择器） $("button") 根据元素名获取对象，可能为数组;

3，class选择器 $(“.class”) 根据class类选择对象，可能为数组;

4，*号选择器 $(“*”) 选择页⾯全部元素;

5，逗号选择器（多项选择器） $(“sele1,sele2,seleN”)，如$(".red,.green")、$(".red,div")选择不同类型的对象，⽤逗号隔开;

6，空格选择器（层次选择器，⽗⼦孙选择器） $("ance desc")，如$("div span")，选择div下的所有span，空格隔开;

7,>号选择器（⽗⼦选择器） $(“parent > child”) 如$(“parent > child”)，获取的是

临辈⼦元素;8,+号选择器（临近选择器），如$("p + label")选择器，获取

元素最近邻的下⼀个label元素;

9,~号选择器（同辈后边相邻所有选择器）如$("p~label")，选择p后所有同级label;

⼆、过滤性选择器

1，:first过滤选择器 如$(“li:first”)，选择第⼀个li

2，:eq(index)过滤选择器，如 $("li:eq(2)")，选择第3个li

3，:contains(text)过滤选择器，如$("li:contains('jQuery')")，选择内容包括jQuery的li

4，:has(selector)过滤选择器，如$("li:has('p')")，选择获取包含p标签的li

5，:hidden过滤选择器，如$("input:hidden")，选择所有隐藏的input元素

6，:visible过滤选择器，如$("li:visible")，选择所有可见的li，和:hidden相反