jQuery选择器

2019-06-03

1.基本选择器

选择器	示例	说明
*	$("*")	通配符选择器，所有元素
#	$("#first")	id选择器，id="first"的元素
.	$(".cls1")	class选择器，所有class="cls1"的元素
标签名	$("div")	元素选择器，所有<div>元素 如$("body")表示选择body元素
选择器1选择器2	$("div.cls1")	复合选择器，所有class为cls1的div元素
选择器1,选择器2	$("td,th")	联合选择器，所有<td>和<th>元素

2.层次选择器

选择器	示例	说明
选择器1 选择器2	$("#first div")	派生选择器，id="first"元素下的所有div后代元素
选择器1>选择器2	$("#first>div")	子元素选择器，id="first"元素下的所有div子元素
选择器1+选择器2	$("#first+div")	兄弟选择器，紧接在id="first"元素之后的div元素
选择器1~选择器2	$("#first~div")	在id="first"元素之后的所有div元素

3.简单过滤选择器

过滤选择器根据过滤规则进行元素匹配，书写时以冒号（:）开头。

选择器	功能	返回值
:first	获取第一个元素	单个元素
:last	获取最后一个元素	单个元素
:not(select)	获取除select之外的元素	元素集合
:even	获取所有索引值为偶数的元素	元素集合
:odd	获取所有索引值为奇数的元素	元素集合
:eq(i)	获取所有索引值为i的元素	单个元素
:gt(i)	获取所有索引值大于i的元素	元素集合
:lt(i)	获取所有索引值小于i的元素	元素集合
:beader	获取所有标题类型的元素	元素集合

4.内容过滤选择器

根据元素中的文字内容或所包含的子元素特征获取元素。

选择器	功能	返回值
:contains	获取包含给定文本的元素	元素集合
:empty	获取不包含子元素或文本为空的元素	元素集合
:has(select)	获取含有选择器所匹配元素的元素	元素集合
:parent	获取含有子元素或文本的元素	元素集合

5.可见性过滤选择器

根据是否可见的特征获取元素

选择器	功能	返回值
:hidden	获取所有隐藏元素	元素集合
: visible	获取所有可见元素	元素集合

6.属性过滤选择器

根据某个属性的特征获取元素，以"["号开始、"] "号结束。

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取属性值等于给定值的元素	元素集合
[attribute!=value]	获取属性值不等于给定值的元素	元素集合
[attribute^=value]	获取给定属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定属性是以某些值结束的元素	元素集合
[attribute*=value]	获取给定属性是包含某些值的元素	元素集合
[selector1] [selector2] [selector3]	获取满足多个条件的复合属性的元素	元素集合

7.子元素过滤选择器

获取父元素中指定的子元素。

选择器	功能	返回值
:nth-child(eq|even|odd|index)	获取父元素下特定位置的元素，索引从1开始	元素集合
:first-child	获取第一个子元素	元素集合
:last-child	获取最后一个元素	元素集合
:only-child	获取仅有一个的子元素	元素集合

8.表单对象属性过滤选择器

选择器	示例	说明
:enabled	$(":enabled")	所有可用的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$("option元素集合:selected")	匹配所有选中的option元素
:checked	$("复选框或单选框集合:checked")	匹配所有选中的复选框、单选按钮元素

<p>请选择你的血型</p>
<input type="radio" name="bloods" value="A"/>A型
<input type="radio" name="bloods" value="B"/>B型
<input type="radio" name="bloods" value="AB"/>AB型
<input type="radio" name="bloods" value="O"/>O型
<input type="button" value="确定" id="btn1"/>

$(function(){
    $("#btn1").click(function(){
       if(!($("input[name=bloods]").is(":checked"))){
        alert("请至少选择一项!");
       }
    });
})
//is函数用于判断当前匹配的元素集合中的元素，是否为一个指定的选择器，DOM元素，或者jQuery对象，
//如果这些元素至少一个匹配给定的参数，则返回true。

9.表单选择器

选择器	示例	说明
: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> 元素
:hidden	$(“:hidden”)	所有type=“hidden”和所有不可见元素

总结

• 多用ID选择器
• 配合使用class选择器
• 尽量使用复合选择器，如$("div.style1")
• 多用父子关系，少用嵌套关系，如使用parent>child代替parent child
• 缓存jQuery对象