分类解析jQuery选择器
基本选择器：
#id根据Id匹配一个元素
.class 根据给定的类名匹配一个元素
element 根据元素名匹配一个元素
*匹配所有元素
selecttor1,selector2 并集，返回两个选择器匹配到的元素
层次选择器：
ancestordescendant根据祖先匹配所有的后代元素
parent>child根据父元素匹配所有的子元素，直接后代
prev+next匹配下一个兄弟元素相当于next()方法
prev~siblings 匹配后面的兄弟元素相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
简单过滤选择器：
:first或first()匹配第一个元素
:last或last() 匹配最后一个元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值为偶数的元素，索引号从0开始
:odd匹配索引值为奇数的元素，索引号从0开始
:eq(index)匹配指定索引号的元素，索引号从0开始
:gt(index) 匹配索引号大于给定索引值的元素，索引号从0开始
:lt(index) 匹配索引号小于给定索引值的元素，索引号从0开始
:header匹配所有的标题元素 h1h2h3h4h5h6
:animated 匹配所有正在执行动画的元素
内容过滤选择器：
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent匹配含有子元素或者文本的元素
可见性过滤选择器：
:hidden匹配不可见元素，或者type="hidden"的元素含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式
:visible获取所有的可见元素
属性过滤选择器：
[attribute]匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value]匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素，部分前后，中间有也算
[selector][selector]匹配属性选择器的交集
子元素过滤选择器：
:nth-child(eq|even|odd|index)获取所有父元素特定位置的子元素
:first获取所有父元素下的第一个子元素
:last获取所有父元素下最后一个子元素
:only-child获取所有父元素下唯一的一个元素
表单对象属性过滤选择器：
:enabled 获取表单中所有可用的元素
:disabled获取表单中所有不可用的元素
:checked获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器：
:input获取所有的表单元素<input开头的，还有textareaselect
:text 获取所有的单行文本框<inputtype="text"/>
:password获取所有的密码框元素 <inputtype="password"/>
:radio获取所有的单选按钮<inputtype="radio"/>
:checkbox获取所有的复选框<inputtype="checkbox">
:submit获取所有的提交按钮<inputtype="submit"/>
:image获取所有的图像按钮<inputtype="image"/>
:reset获取所有的重置按钮<inputtype="reset"/>
:button 获取所有的按钮<inputtype="button">
:file获取所有的文件上传框<inputtype="file"/>
1、基本选择器
(1)、#id 根据Id匹配一个元素
$("#div1").css("background-color","red");//匹配id为"div1"的元素
<divid="div1">我是一个DIV</div>//会选中该div元素
(2)、element 根据给定的元素名匹配元素
$("p").css("background-color","red");//匹配页面所有的p元素
<p>我是一个P</p>
(3)、class 根据class属性匹配元素
$(".important").removeClass();//匹配所有class="important"元素
<pclass="important">我是一个p元素</p>
(4)、* 匹配所有的元素
$("*").css("background-color","red");
(5)、selector1,selector2选择器之间用逗号分隔返回每一个选择器匹配到的元素
$(".div1,#span1").css("background-color","red");
2、层次选择器
(1)、ancestordescendant 根据祖先元素匹配所有的后代元素，返回的是匹配到的后代元素，用空格分开。
$("#div1span").css("color","red");
<divid="div1">
<span>我是span1</span>***会被选中，是#div1的后代span
<div>
<span>我是span3</span>***会被选中，也是#div1的后代span
</div>
</div>
<span>我是span2</span>***不会被选中，不是#div1的后代
(2)、parent>child根据父元素匹配所有的子元素返回所有的子元素用大于号">"分隔
$("#div1>span").css("color","red");
<divid="div1">
<span>我是span1</span>***会被选中，是#div1的子元素span
<div>
<span>我是span3</span>***不会被选中，是#div1的后代元素，但不是直接子元素
</div>
</div>
<span>我是span2</span>***不会被选中，不是#div1的子元素
(3)、prev+next匹配紧接在prev元素后的相邻的下一个元素 用加号"+"分隔。
相当于.next()方法
$(".p1+p").css("color","red");//此行代码相当于$(".p1").next().css("color","red");
<div>
<p>我是第一个P</p>***不会被选中，是class为p1的上一个了
<pclass="p1">我是第二个P</p>***prev本身并不会被选中
<p>我是第三个P</p>***会被选中，是class为p1的下一个相邻元素
<p>我是第四个P</p>***不会被选中，不是class为p1的下一个，是下二个了
</div>
(4)、prev~sibings匹配prev后面的的所有兄弟元素用波浪线"~"分隔开
相当于nextAll()方法
$(".p1+p").css("color","red");//此行代码相当于$(".p1").nextAll("p").css("color","red");
<div>
<p>我是第一个P</p>***不会被选中，是class为p1前面的元素
<pclass="p1">我是第二个P</p>***prev本身并不会被选中
<p>我是第三个P</p>***会被选中，是class为p1后面的P兄弟元素
<p>我是第四个P</p>***会被选中，也是class为p1后面的P兄弟元素
</div>
(5)、选中所有的兄弟元素siblings()方法
$(".p1").sibings("p").css("color","red");
<div>
<p>我是第一个P</p>***会被选中，是class为p1的P兄弟元素
<pclass="p1">我是第二个P</p>***prev本身并不会被选中
<p>我是第三个P</p>***会被选中，是class为p1的P兄弟元素
<p>我是第四个P</p>***会被选中，也是class为p1的P兄弟元素
</div>
3、简单过滤选择器
(1)、first()或:first选中符合条件的第一个元素
$("#div1>p:first").css("color","red")//此行代码相当于$("#div1>p").first().css("color","red");
<divid="div1">
<p>我是第一个P</p>***会被选中，是id为#div1下的第一个P元素
<p>我是第二个P</p>***不会被选中，是第二个P元素了
<p>我是第三个P</p>***不会被选中，是第三个P元素了
</div>
(2)、last()或:last符合条件的最后一个元素
$("#div1>p:last").css("color","red");//此行代码相当于$("#div1>p").last().css("color","red");
<divid="div1">
<p>我是第一个P</p>***不会被选中，是第一个
<p>我是第二个P</p>***不会被选中，是第二个
<p>我是第三个P</p>***会被选中，id为#div1下的最后一个P元素
</div>
(3)、:not(selector)符合条件但不能被selector选中的元素
$("#div1>p:not('.p1')").css("color","red");
<divid="div1">
<p>我是第一个P</p>***会被选中
<pclass="p1">我是第二个P</p>***不会被选中，因为符合了:not里的条件class="p1"
<p>我是第三个P</p>***会被选中
</div>
(4)、:even获取指定索引值为偶数的元素(0、2、4、6、8……)，注意索引号是从0开始的
$("#div1>p:even").css("color","red");
<divid="div1">
<p>我是第一个P</p>***会被选中，索引号0
<p>我是第二个P</p>***不会被选中，索引号1
<p>我是第三个P</p>***会被选中，索引号2
<p>我是第四个P</p>***不会被选中，索引号3
<p>我是第五个P</p>***会被选中，索引号4
</div>
(5)、odd获取指定索引值为奇数的元素(1、3、5、7、9......)，注意索引号是从1开始的
$("#div1>p:odd").css("color","red");
<divid="div1">
<p>我是第一个P</p>***不会被选中，索引号0
<p>我是第二个P</p>***会被选中，索引号1
<p>我是第三个P</p>***不会被选中，索引号2
<p>我是第四个P</p>***会被选中，索引号3
<p>我是第五个P</p>***不会被选中，索引号4
</div>
(6)、eq(index)选取指定索引值的元素，索引值从0开始
$("#div1>p:eq(1)").css("color","red");
<divid="div1">
<p>我是第一个P</p>***不会被选中，索引号为0
<p>我是第二个P</p>***不会被选中，索引号为1
<p>我是第三个P</p>***不会被选中，索引号为2
<p>我是第四个P</p>***不会被选中，索引号为3
</div>
(7)、gt(index)获取所有索引值大于index的元素，索引号从0开始
$("#div1>p:gt(1)").css("color","red");
<divid="div1">
<p>我是第一个P</p>***不会被选中，索引号为0
<p>我是第二个P</p>***不会被选中，索引号为1
<p>我是第三个P</p>***会被选中，索引号为2大于1了
<p>我是第四个P</p>***会被选中，索引号为3大于1了
</div>
(8)、lt(index)获取所有索引值小于index的元素，索引号从0开始
$("#div1>p:lt(1)").css("color","red");
<divid="div1">
<p>我是第一个P</p>***会被选中，索引号为0，小于1
<p>我是第二个P</p>***不会被选中，索引号为1，不小于1
<p>我是第三个P</p>***不会被选中，索引号为2大于1了
<p>我是第四个P</p>***不会被选中，索引号为3大于1了
</div>
(9)、:header索取所有标题类型元素h1、h2、h3、h4、h5、h6
$("#div1>:header").css("color","red");
<divid="div1">
<p>我是一个P</p>***不会被选中，不是标题类型元素
<span>我是一个span</span>***不会被选中，不是标题类型元素
<h1>我是一个h1</h1>***会被选中，h1是标题类型元素
<h6>我是一个h6</h6>***会被选中，h6是标题类型元素
</div>
(10)、animated正在执行动画效果的元素
4、内容过滤选择器
(1)、:contains(text) 获取包含给定文本的元素
$("p:contains('三')").css("background-color","red");
<div>
<p>我是第一个P</p>***不会被选中
<p>我是第二个P</p>***不会被选中
<p>我是第三个P</p>***会被选中，文本里包含了"三"
</div>
(2)、:empty获取不包含子元素或文本的空元素
$(:empty).text("我是空元素");
<div>
<div><span></span></div>***div不会被选中，因为有<span></span>子元素。<span></span>会被选中，因为没有子元素也没有文本元素
<p></p>***会被选中，没有子元素，也没有文本元素
<span>我是一个span</span>***不会被选中,有文本元素
</div>
(3)、:has(selector)选中含有selector所匹配元素的元素,(注意不限于直接子元素，只要是后代含有都算)
$("div:has('span')").css("background-color","red");
<div>***此div会被选中，因为他的有孙子span
我是最外层div
<div><p>我是一个P</p></div>***此div不会被选中，因为不含有后代span
<div><span>我是一个span</span></div>***此div会被选中，含有后代span
</div>
(4)、:parent含有子元素或者文本元素的元素
$(":parent").text("不含子元素或文本元素");
<div>我是一个div</div>***不会被选中，因为含有文本元素
<div><span>我是一个span</span></div>***不会被选中，含有子元素。
<div></div>***会被选中，不含子元素也不含有文本元素
5、可见性过滤选择器
(1)、:hidden选中所有不可见元素
$("span:hidden").css("display","block");
$("input:hidden").val("我是jQuery");
<spanstyle="display:none">我是一个span</span>***会被第一条规则选中
<inputtype="hidden"value="我是一个隐藏的input"/>***会被第二条jQuery选中
<spanclass="span1">我是span1</span>***会被第一条jQuery选中
(2)、:visible选中所有可见元素
6、属性过滤选择器
(1)、[attribute]获取包含给定属性的元素
$("div[class]").css("font-size","30px");
<div>
<divclass="div1">我是第一个div</div>***会被选中，含有class属性
<div>我是第二个div</div>***不会被选中，没含有class属性。
</div>
(2)、[attribute=value]获取属性值等于value的元素
$("div[class=div1]").css("font-size","30px");
<div>
<divclass="div1">我是div1</div>***会被选中，class属性等于div1。
<divclass="div2">我是div2</div>***不会被选中,class属性不等于div1。
</div>
(3)、[attribute!=value]获取属性值不等于value的元素
$("div[class!=div1]").css("color","red");
<div>我是一个没有class属性的div</div>***会被选中，没有class属性自然class属性不等于div1
<divclass="div2">我是一个class属性等于div2的div</div>***会被选中，class属性不等于div1
<divclass="div1">我是一个class属性等于div1的元素</div>***不会被选中，class属性等于div1
(4)、[attribute^=value]获取属性值以value开始的元素
$("div[class^=div]").css("color","red');
<divclass="div1">我是div1</div>***会被选中，class属性以div开始
<divclass="div2">我是div2</div>***会被选中，class属性以div开始
<divclass="abc">我是div3</div>***不会被选中，class属性不以div开始
(5)、[attribute$=value]获取属性值以value结束的元素
$("div[class$=div]").css("color","red");
<divclass="1div">我是第一个div</div>***会被选中，class属性以div结束
<divclass="2div">我是第二个div</div>***会被选中，class属性以div结束
<divclass="abc">我是第三个div</div>***不会被选中，class属性不以div结束
(6)、[attribute*=value]获取属性值包含value值元素
$("div[class*=div]").css("font-size","30px");
<divclass="div1">我是div1</div>***会被选中，属性值包含div
<divclass="1div">我是1div</div>***会被选中，属性值包含div
<divclass="1div1">我是1div1</div>***会被选中，属性值包含div
<divclass="abc">我是abc</div>***会被选中，属性值包含div
(7)、[selector][selector][selector]获取属性交集元素
$("div:[class][title=title1]").css("background-color","red");
<divclass="div1"title="title1">我是div1,title1</div>***会被选中，有class属性且title属性等于title1
<divclass="div1"title=title2>我是div1,title2</div>***不会被选中，虽然有class属性，但是title属性不等于title2
<divclass="div3">我是div3</div>***不会被选中，没有title属性
7、子元素过滤选择器
(1):nth-child(eq|even|odd|index)获取每个父元素下的特定位置元素，索引号从1开始
$("div>p:nth-child(1)").css("background-color","red");//选中每一个父元素下的div下的第一个直接P元素
<div>
<p>我是第一个P</p>***会被选中，是div下的第一个子P元素
<p>我是第二个P</p>***不会被选中，是第二个了
</div>
<div>
<P>我是第三个P</P>***会被选中，是div下的第一个子P元素
<P>我是第四个P</P>***不会被选中，是第二个了
</div>
(2):first-child选中每个父元素下的第一个
$("p:first-child").css("background-color","red");//选中每一个父元素下的第一个P元素
<div>
<p>我是第一个P</p>***会被选中，是div下的第一个子P元素
<p>我是第二个P</p>***不会被选中，是第二个了
</div>
<ul>
<li>
<P>我是第三个P</P>***会被选中，是div下的第一个子P元素
<P>我是第四个P</P>***不会被选中，是第二个了
</li>
</ul>
(3)、:last-child选中每一个父元素下的最后一个元素
$("p:last-child").css("background-color","red");//选中每一个父元素下的第一个P元素
<div>
<p>我是第一个P</p>***不会被选中，不是某父元素的最后一个子P元素
<p>我是第二个P</p>***会被选中，是div元素下的最后一个子P元素
</div>
<ul>
<li>
<P>我是第三个P</P>***不会被选中，不是某父元素下的最后一个子P元素
<P>我是第四个P</P>***会被选中，是div元素下的最后一个P元素
</li>
</ul>
(4)、:only-child获取每个父元素下唯一仅有的一个子元素
$("p:only-child").css("background-color","red");
<div>
<p>我是第一个P</p>***不会被选中，不是某父元素下的唯一一个P元素
<p>我是第二个P</p>***不会被选中，不是某父元素下的唯一一个P元素
</div>
<div>
<span>我是一个span</span>***不会被选中，不是某父元素下的唯一一个P元素
<p>我是第三个P</p>***不会被选中，不是某父元素下的唯一一个span元素
</div>
<div>
<p>我是一个P</p>***会被选中，是div下的唯一一个P元素
</div>
8、表单对象属性过滤选择器
(1)、:enabled获取表单中所有属性为可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
<inputtype="text"value="我是一个可用的input"/>***会被选中，是一个可用的表单元素
<inputtype="text"value="我是一个不可用的input"disabled="disabled"/>***不会被选中，是不可用的表单元素
</div>
(2)、:disabled获取表单中属性不可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
<inputtype="text"value="我是一个可用的input"/>***不会被选中，是一个可用的表单元素
<inputtype="text"value="我是一个不可用的input"disabled="disabled"/>***会被选中，是不可用的表单元素//注意，jQuery能够操作不可用的表单元素
</div>
(3)、:checked获取表单中被选中的元素从属性能够知道用户选中了哪个
$("input:checked").val("jQuery");
<div>
<inputtype="checkbox"checked="checked"value="1">选中
<inputtype="checkbox"value="0">未选中
</div>
(4)、:selected获取表单中被选中的元素此属性能够知道用户选择了哪个
alert($("input:selected").text(""));//获取所有被选中的option元素
<div>
<selected>
<optionvalue="0"selected="selected">option1</option>***会被选中
<optionvalue="1">option2</option>***不会被选中，因为本option不是选中的。
</selected>
</div>
9、表单选择器
(1)、:input获取所有的input、textarea、select
$(":input").val("jQuery");
<div>
<textarea>我是一个兵</textarea>***会被选中
<inputtext="button"value=""/>***会被选中
<p>我是一个P</p>***不会被选中
</div>
(2)、:text获取所有的单行文本框，也就是<inputtype="text"/>元素
$(":text").val("jQuery");
<div>
<inputtype="text"value="我是一个input"/>***会被选中，是单行文本框
<inputtype="button"value="确定"/>***不会被选中，不是单行文本框
<textarea>我是一个textarea</textarea>***不会被选中，不是单行文本框
</div>
(3)、:password获取所有的密码框也就是<inputtype="password"/>元素
$(":password").hide(3000);
<div>
<inputtype="password"/>***会被选中，是密码框
<inputtype="text"value="我是一个文本框"/>***不会被选中，是文本框
</div>
(4)、:radio获取所有的单选按钮
$(":radio").hide(3000);
<div>
<inputtype="radio"/>我是一个radio***单选按钮会被选中，但是后面的文字不会
<inputtype="text"/>我是一个文本框***不会被选中
</div>
(5)、：checkbox获取所有的复选框
$(":checkbox").hide(3000);
<div>
<inputtype="checkbox"/>我是一个checkbox***复选框会被选中，文本不会
<inputtype="text"/>我是一个文本框***不会被选中，不是复选框
</div>
(6)、:submit获取所有的提交按钮
$(":submit").hide(3000);
<div>
<inputtype="submit"value="提交">***会被选中，是提交按钮
<inputtype="text"value="我是一个文本框">***不会被选中，不是提交按钮
</div>
(7)、:image获取所有的图像域
$(":image").attr("title","我是一个图片按钮");
<div>
<inputtype="image"src="http://www.baidu.com/img/baidu_sylogo1.gif"/>***会被选中
<inputtype="text"value="我是一个文本框"/>***不会被选中，不是图片按钮
</div>
(8)、:reset获取所有重置按钮
$(":reset").hide(3000);
<div>
<inputtype="reset"value="重置">***会被选中，是重置按钮
<inputtype="text"value="我是一个文本框">***不会被选中，不是重置按钮
</div>
(9)、:button获取所有的按钮
$(":button").hide(3000);
<div>
<inputtype="button"value="确认"/>***会被选中，是按钮元素
<inputtype="text"value="我是一个文本框"/>***不会被选中，不是按钮元素
</div>
(10)、:file获取所有的文件域
$(":file").hide(3000);
<div>
<inputtype="file"title="file"/>
<inputtype="text"value="我是一个文本框"/>
</div>
以上就是本文的全部内容，希望对大家有所帮助，谢谢对毛票票的支持！