JQuery筛选器全系列介绍

╰半橙微兮° 2022-01-08 01:01 335阅读 0赞

**基本选择器：**

**\#id　　　　　　　　　　　　根据Id匹配一个元素**

$("\#div1").css("background-color","red");　　//匹配id为"div1"的元素

<div id="div1">我是一个DIV</div>   //会选中该div元素

**.class　　　　　　　　　　  根据给定的类名匹配一个元素**

$(".important").removeClass();　　　　//匹配所有class="important"元素

p class="important">我是一个p元素</p>

element　　　　　　　　　  根据元素名匹配一个元素

$("p").css("background-color","red");　　　　//匹配页面所有的p元素

<p>我是一个P</p>

**\*　　　　　　　　　　　　　匹配所有元素**

$("\*").css("background-color","red");

selecttor1,selector2　　　  并集，返回两个选择器匹配到的元素

$(".div1,\#span1").css("background-color","red");

**层次选择器：**

ancestor descendant　　　根据祖先匹配所有的后代元素

$("\#div1 span").css("color","red");

<div id="div1">

<span>我是span1</span>　　　　　\*\*\*会被选中，是\#div1的后代span

<div>

<span>我是span3</span>　　　\*\*\*会被选中，也是\#div1的后代span

</div>

<span>我是span2</span>　　　　　　　\*\*\*不会被选中，不是\#div1的后代

parent>child　　　　　　　 根据父元素匹配所有的子元素，直接后代

$("\#div1 > span").css("color","red");

<div id="div1">

<span>我是span1</span>　　　　　\*\*\*会被选中，是\#div1的子元素span

<div>

<span>我是span3</span>　　　\*\*\*不会被选中，是\#div1的后代元素，但不是直接子元素

</div>

<span>我是span2</span>　　　　　　　\*\*\*不会被选中，不是\#div1的子元素

prev+next　　　　　　　　 匹配下一个兄弟元素 相当于next()方法

$(".p1 + p").css("color","red");　　　　//此行代码相当于$(".p1").next().css("color","red");

<div>

<p>我是第一个P</p>　　　　　　\*\*\*不会被选中，是class为p1的上一个了

<p class="p1">我是第二个P</p>　　\*\*\*prev本身并不会被选中

<p>我是第三个P</p>　　　　　　\*\*\*会被选中，是class为p1的下一个相邻元素

<p>我是第四个P</p>　　　　　　\*\*\*不会被选中，不是class为p1的下一个，是下二个了

</div>

prev~siblings　　　　　　   匹配后面的兄弟元素 相当于nextAll()方法     siblings()方法为匹配所有的兄弟元素

$(".p1 + p").css("color","red");　　　　//此行代码相当于$(".p1").nextAll("p").css("color","red");

<div>

<p>我是第一个P</p>　　　　　　\*\*\*不会被选中，是class为p1前面的元素

<p class="p1">我是第二个P</p>　　\*\*\*prev本身并不会被选中

<p>我是第三个P</p>　　　　　　\*\*\*会被选中，是class为p1后面的P兄弟元素

<p>我是第四个P</p>　　　　　　\*\*\*会被选中，也是class为p1后面的P兄弟元素

</div>

**选中所有的兄弟元素 siblings() 方法**

$(".p1").sibings("p").css("color","red");

<div>

<p>我是第一个P</p>　　　　　　\*\*\*会被选中，是class为p1的P兄弟元素

<p class="p1">我是第二个P</p>　　\*\*\*prev本身并不会被选中

<p>我是第三个P</p>　　　　　　\*\*\*会被选中，是class为p1的P兄弟元素

<p>我是第四个P</p>　　　　　　\*\*\*会被选中，也是class为p1的P兄弟元素

</div>

**简单过滤选择器：**

**:first或first()　　　　　　　 匹配第一个元素**

$("\#div1 > p:first").css("color","red")　　//此行代码相当于

$("\#div1 > p").first().css("color","red");

<div id="div1">

<p>我是第一个P</p>　　　\*\*\*会被选中，是id为\#div1下的第一个P元素

<p>我是第二个P</p>　　　\*\*\*不会被选中，是第二个P元素了

<p>我是第三个P</p>　　　\*\*\*不会被选中，是第三个P元素了

</div>

**:last或last()　　　　　　  　匹配最后一个元素**

$("\#div1 > p:last").css("color","red");　　　　//此行代码相当于

$("\#div1 > p").last().css("color","red");

<div id="div1">

<p>我是第一个P</p>　　　\*\*\*不会被选中，是第一个

<p>我是第二个P</p>　　　\*\*\*不会被选中，是第二个

<p>我是第三个P</p>　　　\*\*\*会被选中，id为\#div1下的最后一个P元素

</div>

**:not(selector)　　　　　　  匹配非selector能匹配到的元素**

$("\#div1 > p:not('.p1')").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　　　　　　　\*\*\*会被选中

<p class="p1">我是第二个P</p>　　\*\*\*不会被选中，因为符合了:not里的条件 class="p1"

<p>我是第三个P</p>　　　　　　　　\*\*\*会被选中

</div>

**:even　　　　　　　　　　  匹配索引值为偶数的元素，索引号从0开始**

$("\#div1 > p:even").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　\*\*\*会被选中，索引号0

<p>我是第二个P</p>　　\*\*\*不会被选中，索引号1

<p>我是第三个P</p>　　\*\*\*会被选中，索引号2

<p>我是第四个P</p>　　\*\*\*不会被选中，索引号3

<p>我是第五个P</p>　　\*\*\*会被选中，索引号4

</div>

**:odd　　　　　　　　 　　　匹配索引值为奇数的元素，索引号从0开始**

$("\#div1 > p:odd").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　\*\*\*不会被选中，索引号0

<p>我是第二个P</p>　　\*\*\*会被选中，索引号1

<p>我是第三个P</p>　　\*\*\*不会被选中，索引号2

<p>我是第四个P</p>　　\*\*\*会被选中，索引号3

<p>我是第五个P</p>　　\*\*\*不会被选中，索引号4

</div>

**:eq(index)　　　　　 　　　匹配指定索引号的元素，索引号从0开始**

$("\#div1 > p:eq(1)").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　\*\*\*不会被选中，索引号为0

<p>我是第二个P</p>　　\*\*\*会被选中，索引号为1

<p>我是第三个P</p>　　\*\*\*不会被选中，索引号为2

<p>我是第四个P</p>　　\*\*\*不会被选中，索引号为3

</div>

**:gt(index)　　　　　  　　　匹配索引号大于给定索引值的元素，索引号从0开始**

$("\#div1 > p:gt(1)").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　\*\*\*不会被选中，索引号为0

<p>我是第二个P</p>　　\*\*\*不会被选中，索引号为1

<p>我是第三个P</p>　　\*\*\*会被选中，索引号为2大于1了

<p>我是第四个P</p>　　\*\*\*会被选中，索引号为3大于1了

</div>

**:lt(index)　　　　　　  　　 匹配索引号小于给定索引值的元素，索引号从0开始**

$("\#div1 > p:lt(1)").css("color","red");

<div id="div1">

<p>我是第一个P</p>　　\*\*\*会被选中，索引号为0，小于1

<p>我是第二个P</p>　　\*\*\*不会被选中，索引号为1，不小于1

<p>我是第三个P</p>　　\*\*\*不会被选中，索引号为2大于1了

<p>我是第四个P</p>　　\*\*\*不会被选中，索引号为3大于1了

</div>

**:header　　　　　　　　　　匹配所有的标题元素  h1 h2 h3 h4 h5 h6**

$("\#div1 > :header").css("color","red");

<div id="div1">

<p>我是一个P</p>　　　　　　\*\*\*不会被选中，不是标题类型元素

<span>我是一个span</span> \*\*\*不会被选中，不是标题类型元素

<h1>我是一个h1</h1>　　　　\*\*\*会被选中，h1是标题类型元素

<h6>我是一个h6</h6>　　　　\*\*\*会被选中，h6是标题类型元素

</div>

**:animated　　　　　　　　  匹配所有正在执行动画的元素**

**内容过滤选择器：**

**:contains(text)　　　　　　匹配包含给定文本的元素**

$("p:contains('三')").css("background-color","red");

<div>

<p>我是第一个P</p>　　\*\*\*不会被选中

<p>我是第二个P</p>　　\*\*\*不会被选中

<p>我是第三个P</p>　　\*\*\*会被选中，文本里包含了"三"

</div>

**:empty　　　　　　　　　　匹配所有不包含子元素或者文本的空元素**

$(:empty).text("我是空元素");

<div>

<div><span></span></div>　　\*\*\*div不会被选中，因为有<span></span>子元素。

<span></span>会被选中，因为没有子元素也没有文本元素

<p></p>　　　　　　　　　　　　\*\*\*会被选中，没有子元素，也没有文本元素

<span>我是一个span</span>　　\*\*\*不会被选中,有文本元素

</div>

**: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>

**:parent　　　　　　　　　　匹配含有子元素或者文本的元素**

$(":parent").text("不含子元素或文本元素");

<div>我是一个div</div>　　\*\*\*不会被选中，因为含有文本元素

<div><span>我是一个span</span></div>　　\*\*\*不会被选中，含有子元素。

<div></div>　　　　　　　　\*\*\*会被选中，不含子元素也不含有文本元素

**可见性过滤选择器：**

**:hidden　　　　　　　　　　匹配不可见元素，或者type="hidden"的元素　含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式**

$("span:hidden").css("display","block");

$("input:hidden").val("我是jQuery");

<span style="display:none">我是一个span</span>　　\*\*\*会被第一条规则选中

<input type="hidden" value="我是一个隐藏的input" />　\*\*\*会被第二条jQuery选中

<span class="span1">我是span1</span>　　　　　　　\*\*\*会被第一条jQuery选中

**:visible　　　　　　　　　　 获取所有的可见元素**

**属性过滤选择器：**

**\[attribute\]　　　　　　　　 匹配含有给定属性的元素**

$("div\[class\]").css("font-size","30px");

<div>

<div class="div1">我是第一个div</div>　　\*\*\*会被选中，含有class属性

<div>我是第二个div</div>　　　　　　　　 \*\*\*不会被选中，没含有class属性。

</div>

**\[attribute=value\]　　　　   匹配含有属性=value的元素**

$("div\[class=div1\]").css("font-size","30px");

<div>

<div class="div1">我是div1</div>　　\*\*\*会被选中，class属性等于div1。

<div class="div2">我是div2</div>　　\*\*\*不会被选中,class属性不等于div1。

</div>

**\[attribute!=value\]　　　　  匹配含有属性但!=value的元素**

$("div\[class!=div1\]").css("color","red");

<div>我是一个没有class属性的div</div>　                        \*\*\*会被选中，没有class属性自然class属性不等于div1

<div class="div2">我是一个class属性等于div2的div</div>　　 \*\*\*会被选中，class属性不等于div1

<div class="div1">我是一个class属性等于div1的元素</div>　　\*\*\*不会被选中，class属性等于div1

**\[attribute^=value\]　　　　 匹配属性值是以value开始的元素**

$("div\[class^=div\]").css("color","red');

<div class="div1">我是div1</div>　　\*\*\*会被选中，class属性以div开始

<div class="div2">我是div2</div>　　\*\*\*会被选中，class属性以div开始

<div class="abc">我是div3</div>　　 \*\*\*不会被选中，class属性不以div开始

**\[attribute$=value\]　　　　  匹配属性值是以value结束的元素**

$("div\[class$=div\]").css("color","red");

<div class="1div">我是第一个div</div>　　\*\*\*会被选中，class属性以div结束

<div class="2div">我是第二个div</div>　　\*\*\*会被选中，class属性以div结束

<div class="abc">我是第三个div</div>　　 \*\*\*不会被选中，class属性不以div结束

**\[attribute\*=value\]　　　　  匹配属性值包含某些值的元素，不分前后，中间有也算**

$("div\[class\*=div\]").css("font-size","30px");

<div class="div1">我是div1</div>　　\*\*\*会被选中，属性值包含div

<div class="1div">我是1div</div>　　\*\*\*会被选中，属性值包含div

<div class="1div1">我是1div1</div>  \*\*\*会被选中，属性值包含div

<div class="abc">我是abc</div>　　　\*\*\*会被选中，属性值包含div

**\[selector\]\[selector\]　　　　 匹配属性选择器的交集**

$("div:\[class\]\[title=title1\]").css("background-color","red");

<div class="div1" title="title1">我是div1,title1</div>　　\*\*\*会被选中，有class属性且title属性等于title1

<div class="div1" title=title2>我是div1,title2</div>　　　\*\*\*不会被选中，虽然有class属性，但是title属性不等于title2

<div class="div3">我是div3</div>　　　　　　　　　　　\*\*\*不会被选中，没有title属性

**子元素过滤选择器：**

**:nth-child(eq|even|odd|index)　　获取所有父元素特定位置的子元素**

$("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>

**: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>

**: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>

**: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>

**表单对象属性过滤选择器：**

**:enabled　　　　　　　　    获取表单中所有可用的元素**

$("input:enabled").val("jQuery表单对象属性过滤选择器");

<div>

<input type="text" value="我是一个可用的input" />　　　　\*\*\*会被选中，是一个可用的表单元素

<input type="text" value="我是一个不可用的input" disabled="disabled" />　　\*\*\*不会被选中，是不可用的表单元素

</div>

**:disabled　　　　　　　　　 获取表单中所有不可用的元素**

$("input:enabled").val("jQuery表单对象属性过滤选择器");  
<div>

<input type="text" value="我是一个可用的input" />　　　　\*\*\*不会被选中，是一个可用的表单元素

<input type="text" value="我是一个不可用的input" disabled="disabled" />　　\*\*\*会被选中，是不可用的表单元素   //注意，jQuery能够操作不可用　　　的表单元素

</div>

**:checked　　　　　　　　　获取表单张所有被选中的元素**

$("input:checked").val("jQuery");

<div>

<input type="checkbox" checked="checked" value="1">选中

<input type="checkbox" value="0">未选中

</div>

**:selected　　　　　　　　   获取表单中所有被选中的option的元素**

alert($("input:selected").text(""));　　//获取所有被选中的option元素

<div>

<option value="0" selected="selected">option1</option>　　\*\*\*会被选中

<option value="1">option2</option>　　　　　　　　　　\*\*\*不会被选中，因为本option不是选中的。

</selected>

</div>

**表单选择器：**

**:input　　　　　　　　　　 获取所有的表单元素<input开头的，还有textarea select**

$(":input").val("jQuery");

<div>

<textarea>我是一个兵</textarea>　　\*\*\*会被选中

<input text="button" value="" />　　\*\*\*会被选中

<p>我是一个P</p>　　　　　　　　　　\*\*\*不会被选中

</div>

**:text　　　　　　　　　　   获取所有的单行文本框　　<input type="text" />**

$(":text").val("jQuery");

<div>

<input type="text" value="我是一个input" />　　\*\*\*会被选中，是单行文本框

<input type="button" value="确定" />　　　　　 \*\*\*不会被选中，不是单行文本框

<textarea>我是一个textarea</textarea>　　　　 \*\*\*不会被选中，不是单行文本框

</div>

**:password　　　　　　　　获取所有的密码框元素      <input type="password" />**

$(":password").hide(3000);

<div>

<input type="password" />　　　　\*\*\*会被选中，是密码框

<input type="text" value="我是一个文本框" />　　\*\*\*不会被选中，是文本框

</div>

**:radio　　　　　　　　　　 获取所有的单选按钮　　　<input type="radio" />**

$(":radio").hide(3000);

<div>

<input type="radio" />我是一个radio　　\*\*\*单选按钮会被选中，但是后面的文字不会

<input type="text" />我是一个文本框　　\*\*\*不会被选中

</div>

**:checkbox　　　　　　　　 获取所有的复选框　　　　<input type="checkbox">**

$(":checkbox").hide(3000);

<div>

<input type="checkbox" />我是一个checkbox　　\*\*\*复选框会被选中，文本不会

<input type="text" />我是一个文本框　　　　　　 \*\*\*不会被选中，不是复选框

</div>

**:submit　　　　　　　　　 获取所有的提交按钮　　　<input type="submit" />**

$(":submit").hide(3000);

<div>

<input type="submit" value="提交">　　　　　　\*\*\*会被选中，是提交按钮

<input type="text" value="我是一个文本框">　　 \*\*\*不会被选中，不是提交按钮

</div>

**:image　　　　　　　　　　获取所有的图像按钮　　 <input type="image" />**

$(":image").attr("title","我是一个图片按钮");

<div>

<input type="image" src="http://www.baidu.com/img/baidu\_sylogo1.gif" />　　\*\*\*会被选中

<input type="text" value="我是一个文本框" />　　　　　　\*\*\*不会被选中，不是图片按钮

</div>

**:reset　　　　　　　　　　获取所有的重置按钮　　　 <input type="reset" />**

$(":reset").hide(3000);

<div>

<input type="reset" value="重置">　　　　　　\*\*\*会被选中，是重置按钮

<input type="text" value="我是一个文本框">　 \*\*\*不会被选中，不是重置按钮

</div>

**:button　　　　　　　　    获取所有的按钮　　　　　<input type="button">**

$(":button").hide(3000);

<div>

<input type="button" value="确认" />　　　　　　\*\*\*会被选中，是按钮元素

<input type="text" value="我是一个文本框" />　　 \*\*\*不会被选中，不是按钮元素

</div>

**:file　　　　　　　　　　　 获取所有的文件上传框　　<input type="file" />**

$(":file").hide(3000);

<div>

<input type="file" title="file" />

<input type="text" value="我是一个文本框" />

</div>

**转至：https://www.cnblogs.com/zhouguowei/p/5194754.html**

转载于:https://www.cnblogs.com/Andy-Blog/p/10775290.html

JQuery筛选器全系列介绍

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jquery筛选器

相关 jquery生成一个li_jQuery组合选择器\筛选器

相关 jQuery基础 - 筛选器

相关 jQuery选择器介绍

相关 JQuery之基本筛选选择器简介（一部分）

相关 jQuery的选择器和筛选器

相关 jquery筛选器

相关 JQuery筛选器全系列介绍

相关 jQuery 筛选 slice() 区间(范围)选择器

相关 jQuery选择器之属性筛选选择器用法详解