jQuery选择器大全

jQuery选择器大全

本内容由本人在网上搜索，并整理，如有侵权，请联系本人删除。本内容仅供学习和收藏

选择器----->>>基本

1:查找ID元素。

// An highlighted block
var foo = 'bar';

<div id="div1"> Hello </div>
$("#div1").text();

2:查找一个DIV元素

< div id="div2">jqery< /div>
$("div").text();

3:查找所有类是的元素

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
$(".myClass")

4:找到每一个元素

$("*")

5:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass")

选择器----->>>层级

1:找到表单中所有的 input 元素

<form> 
<input type="text" name="" id="" value="" />
<input type="text" />
</form>
$("form input").css("background","darkred");

2:匹配表单中所有的子级input元素 >代表子级

<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
</form>
<input name="none" />
$("form > input")//作用结果[<input name="name" />]

3:匹配所有跟在label后面的input元素 *注:只找到后面一个input

<label>Newsletter:</label>
  <input name="newsletter" />
  $("label + input")

4:找到所有与表单同辈的 input 元素

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
    <label>Newsletter:</label>
    <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

$(“fieldset ~ input”)

选择器----->>>基本筛选器

1:获取匹配的第一个元素

<ul>
  <li>list item 1</li>
 <li>list item 2</li>
</ul>
$('li:first');  //  <li>list item 1</li>

2:查找所有未选中的 input 元素 *********

 < input name="apple" />
 < input name="flower" checked="checked" />
$("input:not(:checked)")

3:查找表格的1、3、5…行(即索引值0、2、4…)

	<table>
	  <tr><td>Header 1</td></tr>
  	  <tr><td>Value 1</td></tr>
  	  <tr><td>Value 2</td></tr>
	</table>
 $("tr:even")  	//查找单行

4:查找表格的2、4、6行（即索引值1、3、5…）

$(“tr:even”) //查找双行

5:从 0 开始计数,查找第几行>>以下标查找

< table>
  <tr>< td>Header 1< /td></tr>
  <tr>< td>Value 1< /td></tr>
  <tr>< td>Value 2< /td></tr>
< /table>
$("tr:eq(1)")

6:查找索引值比0大的

$(“tr:gt(0)”)

7：匹配所有小于给定索引值的元素

$(“tr:lt(2)”)

8:选择所有

的语言属性: 找到lang属性为it的

具体内容：https://www.cnblogs.com/susansjy/p/4698612.html
$(“p:lang(it)”)

9:获取匹配的最后个元素

< ul>
< li>list item 1 < /li>
< li>list item 2< /li>
< li>list item 3< /li>
< li>list item 4< /li>
< li>list item 5< /li>
< /ul>
$(‘li:last’)

10：给页面内所有标题加上背景色 header匹配如 h1, h2, h3之类的标题元素

< h1>Header 1< /h1>
< p>Contents 1< /p>
< h2>Header 2< /h2>
< p>Contents 2< /p>
$(":header").css(“background”, “#EEE”);

11:匹配所有正在执行动画效果的元素

< button id=“run”>Run< /button>< div>< /div>
$("#run").click(function(){
$(“div:not(:animated)”).animate({ left: “+=20” }, 1000);
});

12:焦点元素:focus 点击改变背景颜色

<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu< /option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var a = $(this);
    setTimeout(function() {
       a.toggleClass( "focused", a.is( ":focus" ) );
    }, 0);
});

13:在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是元素。

$(":root").css(“background-color”,“yellow”);

14::target

如果文档的URI包含一个格式化的标识符或 hash（哈希），
那么 :target 选择器将匹配ID和标识符相匹配的元素。
例如，给定的URI http://example.com/#foo，则$( “p:target” )，将选择

元素。

选择器----->>>内容

1:一个用以查找的字符串 :查找所有包含 “John” 的 div 元素

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
$("div:contains('John')")

2:查找所有不包含子元素或者文本的空元素 ：找到无内容的标签

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

$(“td:empty”) -->< td>< /td>

3:一个用于筛选的选择器:筛选出含有p标签的div

<div><p>Hello</p></div>
<div>Hello again!</div>

$(“div:has§”).addClass(“test”); —>给所有包含 p 元素的 div 元素添加一个 text 类

4：匹配含有子元素或者文本的元素:

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

$(“td:parent”)—>查找所有含有子元素或者文本的 td 元素

选择器----->>>可见性

1：匹配所有不可见元素，或者type为hidden的元素

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
$("tr:hidden")

2:匹配所有的可见元素

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
$("tr:visible")

选择器----->>>属性

1:[attribute]查找所有含有 id 属性的 div 元素

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]")

2:[attribute=value] 匹配给定的属性是某个特定值的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
$("input[name='newsletter']").attr("checked", true);-->查找所有 name 属性是 newsletter 的 input 元素(多选按钮)

3:[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。

$("input[name!='newsletter']").attr("checked", true);-->查找所有 name 属性不是 newsletter 的 input 元素

4:匹配给定的属性是以某些值开始的元素

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
$("input[name^='news']")-->查找所有 name 以 'news' 开始的 input 元素

5:匹配给定的属性是以某些值结尾的元素

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
$("input[name$='letter']")

6:[attribute*=value]查找所有 name 包含 ‘zhang’ 的 input 元素

$(“input[name*=‘zhang’]”)

7:找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
$("input[id][name$='man']")

选择器----->>>子元素

1:匹配所给选择器( :之前的选择器)的第一个子元素

<ul>
  <li>John</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
$("ul li:first-child")-->在每个 ul 中查找第一个 li

2:first-of-type匹配E的父元素的第一个E类型的孩子

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>
$("span:first-of-type");-->查找作为父元素的span类型子元素中的"长子"的span标签

3:匹配最后一个子元素

<u
l>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
$("ul li:last-child")-->在每个 ul 中查找最后一个 li

4: :last-of-type

结构化伪类，匹配E的父元素的最后一个E类型的孩子
大体的意思跟 :first-of-type差不多

5: :nth-child要匹配元素的序号，从1开始

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
$("ul li:nth-child(2)")-->在每个 ul 查找第 2 个li

6::nth-last-child(匹配子元素序号开始是0(n)|匹配所有偶数元素(even)|匹配所有奇数元素(odd)|匹配每个3的倍数的元素(formula))

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
$("ul li:nth-last-child(2)");-->在每个匹配的ul中查找倒数第二个li

7::nth-last-of-type(n|even|odd|formula)

$("ul li:nth-last-of-type(2)");-->在每个匹配的ul中查找倒数第二个li

8::nth-of-type(n|even|odd|formula)

<div>
  <span>John</span>
  <b>Kim</b>
  <span>Adam</span>
  <b>Rafael</b>
  <span>Oleg</span>
</div>
$("span:nth-of-type(2)");-->查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。

9::only-child如果某个元素是父元素中唯一的子元素，那将会被匹配

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul
$("ul li:only-child")-->在 ul 中查找是唯一子元素的 li

10:only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素。

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

选择器----->>>表单

1：:input匹配所有 input, textarea, select 和 button 元素

$(":input")查找所有的input元素，下面这些元素都会被匹配到。

2：:text匹配所有的单行文本框

$(":text")查找所有文本框

3：:password匹配所有密码框

$(":password")

4：:radio匹配所有单选按钮

$(":radio")

5：:checkbox匹配所有复选框

$(":checkbox")

6：:submit匹配所有提交按钮

$(":submit")

7：:image匹配所有图像域

$(":image")

8：:reset匹配所有重置按钮

$(":reset")

9：匹配所有按钮

$(":button")

10：:file匹配所有文件域

$(":file")

选择器----->>>表单对象属性

1：:enabled匹配所有可用元素

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
$("input:enabled")-->查找所有可用的input元素

2：:disabled匹配所有不可用元素

$(“input:disabled”)

3：:checked匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
$("input:checked")-->查找所有选中的复选框元素

选择器----->>>混淆选择器

1：$.escapeSelector(selector)对含有#号的ID进行编码

<div class="notMe">div class="notMe"</div>
<div class=".box myClass">div class=".box myClass"</div>
<div class=".box">span class=".box"</div>
$( "div" ).find( "." + $.escapeSelector( ".box" ) );对含有#号的ID进行编码