通过JQuery的$()引用元素,返回的对象为JQuery对象(集合对象),不能直接调用DOM定义的方法。
1、基本
(1)#id 根据ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义。
(2)element 根据元素名匹配所有元素。
(3).class 根据类匹配元素。
(4)* 匹配所有元素。
(5)selector1,selector2,selectN 将每一个选择器匹配到的元素合并后一起返回。
2、层级
(1)ancestor descendant 祖先元素下匹配所有的后代元素
(2)parent > child 父元素下匹配所有的子元素
(3)prev + next 匹配所有紧接在prev元素后的next元素
(4)prev + siblings 匹配prev元素后所有的siblings元素
3、基本过滤
(1):first 获取第一个元素
(2):last 获取最后个元素
(3):not 去除所有与给定选择器匹配的元素
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]
(4):even 匹配所有索引值为偶数的元素,从 0 开始计数
(5):odd 匹配所有索引值为奇数的元素,从 0 开始计数
(6):eq 匹配一个给定索引值的元素
(7):gt 匹配所有大于给定索引值的元素
(8):lt 匹配所有小于给定索引值的元素
(9):header 匹配如 h1, h2, h3之类的标题元素
(10):animated 匹配所有正在执行动画效果的元素
4、内容
(1):contains 匹配包含给定文本的元素。
查找所有包含 "John" 的 div 元素 $("div:contains('John')")
(2):empty 匹配所有不包含子元素或者文本的空元素
$("td:empty")
(3):has 匹配含有选择器所匹配的元素的元素
给所有包含 p 元素的 div 元素添加一个text 类 $("div:has(p)").addClass("test");
(4):parent
5、可见性
(1):hidden 匹配所有不可见元素,或者type为hidden的元素
查找隐藏的 tr
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
匹配type为hidden的元素
HTML 代码:
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]
(2):visible 匹配所有的可见元素
6、属性
(1)[attribute] 匹配包含给定属性的元素
查找所有含有 id 属性的div元素 $("div[id]")
(2)[attribute=value] 匹配给定的属性是某个特定值的元素,属性值的引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
查找所有 name 属性是 newsletter 的 input 元素 $("input[name='newsletter']").attr("checked", true);
(3)[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
(4)[attribute^=value] 匹配给定的属性是以某些值开始的元素
(5)[attribute$=value] 匹配给定的属性是以某些值结尾的元素
(6)[attribute*=value] 匹配给定的属性是以包含某些值的元素
(7)[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。
找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 $("input[id][name$='man']")
7、子元素
8、表单
(1):input 匹配所有 input, textarea, select 和 button 元素
(2):text 匹配所有的单行文本框
(3):password
(4):radio
(5):checkbox
(6):submit
(7):image
(8):reset
(9):button
(10):file
(11):hidden
9、表单对象属性
(1):enabled 匹配所有可用元素
(2):disabled
(3):checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$("input:checked")
(4):selected 匹配所有选中的option元素
$("select option:selected")