jquery选择器（照着jq手册写的）

时间：2016-09-23 01:23:56 阅读：304 评论：0 收藏：0 [点我收藏+]

基本

1、id

概述

根据给定的ID匹配一个元素。

使用任何的元字符（如 !"#$%&‘()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分，它必须被两个反斜杠转义：\\。参见示例。

用于搜索的，通过元素的id属性中给定的值

//查找ID的为"myDiv"的元素。并给他个css样式
<div id="myDiv">I am div</div>
<div id="notdiv">notDiv</div>
<script>

 $(function(){ $("#div").css({
    width:100,
    height:100,
    border:"1px solid #000"
    })
 })

 </script>
//jQuery 代码： 
$("#myDiv");

//查找含有特殊字符的元素。
　　<span id="foo:bar"></span>
　　<span id="foo[bar]"></span>
　　<span id="foo.bar"></span>

//jQuery 代码：
　　#foo\\[bar\\]

//结果：
[<span id="foo[bar]"></span>]

2、element

//查找某个元素,比如查找DIV元素
    <div>DIV1</div>
    <div>DIV2</div>
    <span>notDiv</span>

//jQuery代码
    $("div");

3、.class

jQuery 类选择器可以通过指定的 class 查找元素。

//查找所有类是 "myClass" 的元素.
    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

//jQuery 代码:
    $(".myClass");

4、 *

匹配所有元素

多用于结合上下文来搜索。

//找到每一个元素    
    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>

//jQuery 代码:
    $("*")

//结果:
    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5、selector1,selector2,selectorN

概述

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

//找到匹配任意一个类的元素。
    <div>me</div>
    <p class="myClass">me</p>
    <span>me</span>
    <p class="notMyClass">p class="notMyClass"</p>

//jQuery 代码:
    $("div,span,p.myClass");


//结果：
[ <div>me</div>, <p class="myClass">me</p>, <span>me</span> ]

层级：　　

6、ancestor descendant

概述

在给定的祖先元素下匹配所有的后代元素

//找到form表单中所有的 input 元素
    <form>
          <label>Name:</label>
          <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" /> 

//jQuery 代码:
    $("form input")

7、parent>child

在给定的父元素下匹配所有的子元素

//匹配表单中所有的子级input元素。
        <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
      <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

//jQuery 代码：
    $("form > input");

8、prev + next

匹配所有紧接在 prev 元素后的 next 元素

//匹配所有跟在 label 后面的 input 元素
    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />

//jQuery 代码:
    $("label + input");

9、prev + siblings

匹配 prev 元素之后的所有 siblings同辈元素

//找到所有与表单同辈的 input 元素
    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />  //他与表单form同辈  

//jQuery 代码:
    $("form ~ input")

基本筛选器：

10、:first

获取第一个元素

// 获取匹配的第一个元素
   <ul>
        <li>list item 1</li>    //first         
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>


//jQuery 代码:
    $(‘li:first‘);

11、:not(selector)

去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

//查找所有未选中的 input 元素
    <input name="apple" />　　//选中的 input 元素

　　<input name="flower" checked="checked" />
// jQuery 代码:
 $("input:not(:checked)")

12、:even

匹配所有索引值为偶数的元素，从 0 开始计数

//查找表格的1、3、5...行（即索引值0、2、4...）
<table>
  <tr><td>Header 1</td></tr>   //  索引值0   
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr> //  索引值2
</table>

//jQuery 代码:
    $("tr:even")

13、:odd

匹配所有索引值为奇数的元素，从 0 开始计数

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

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>   //索引值1 
  <tr><td>Value 2</td></tr>
</table>

//jQuery 代码:
    $("tr:odd")

14、:eq(index)

匹配一个给定索引值的元素

//查找第二行
<table>
  <tr><td>Header 1</td></tr>   //索引值0 
  <tr><td>Value 1</td></tr>  //索引值1
  <tr><td>Value 2</td></tr>  //索引值2
</table>


//jQuery 代码:
    $("tr:eq(1)")

15、:gt(index)

匹配所有大于给定索引值的元素

//查找第二第三行，即索引值是1和2，也就是比0大
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>  //第二行
  <tr><td>Value 2</td></tr>   //第三行
</table>

//jQuery 代码:
$("tr:gt(0)")

16、:lang(language)

选择指定语言的所有元素。

:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。

这种用法的进一步讨论可以在 W3C CSS规范中找到。

//选择所有<P> 的语言属性:
$("p:lang(it)")

17、:last

获取最后个元素

//获取匹配的最后个元素
<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>

//jQuery 代码:
$(‘li:last‘)

18、:it(index)

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

//查找第一第二行，即索引值是0和1，也就是比2小
<table>
  <tr><td>Header 1</td></tr> //索引值0，比2小
  <tr><td>Value 1</td></tr>    //索引值1，比2小
  <tr><td>Value 2</td></tr>   //索引值2
</table>


//jQuery 代码:
$("tr:lt(2)")

19、:header

匹配如 h1, h2, h3之类的标题元素

//给页面内所有标题加上背景色
<h1>Header 1</h1>  //h1
<p>Contents 1</p>
<h2>Header 2</h2>  //h2
<p>Contents 2</p>

$(":header").css("background", "#ccc");

20、:animated

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

//只有对不在执行动画效果的元素执行一个动画特效

<button id="run">Run</button><div></div>

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

21、:focus

匹配当前获取焦点的元素。

如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(‘:focus‘)等同为$(‘*:focus‘)。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。

//添加一个"focused"的类名给那些有focus方法的元素

//css代码：
.focused {
    background: #abcdef;
}

//html代码：
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

//jq代码：
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

22、:root

选择该文档的根元素。

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

//设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");

23、:target

选择由文档URI的格式化识别码表示的目标元素。

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

这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.

内容：

24、:contains(text)

匹配包含给定文本的元素

//查找所有包含 "John" 的 div 元素

<div>John Resig</div>      //查找包含 "John" 的 div 元素
<div>George Martin</div>
<div>Malcom John Sinclair</div>   //查找包含 "John" 的 div 元素
<div>J. Ohn

$("div:contains(‘John‘)")

25、:empty

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

//查找所有不包含子元素或者文本的空元素

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

$("td:empty")

26、:has(selector)

匹配含有选择器所匹配的元素的元素

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

//给所有包含 p 元素的 div 元素添加一个 text 类
$("div:has(p)").addClass("test");

27、:parent

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

<table>
  <tr>
        <td>Value 1       //td 元素 的文本   Value 1 
            < p>p 1</p>  //td子元素
            </td><td>
        </td>
    </tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

//查找所有含有子元素或者文本的 td 元素
$("td:parent")

可见性：

28、:hidden

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

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

//查找隐藏的 tr
$("tr:hidden")

29、:visible

匹配所有的可见元素

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

//查找所有可见的 tr 元素
$("tr:visible")

属性：

30、[attrbute]

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

//查找所有含有 id 属性的 div 元素
$("div[id]")

31、[attrbute=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" />

//查找所有 name 属性是 newsletter 的 input 元素，并给一个选中的checked
$("input[name=‘newsletter‘]").attr("checked", true);

32、[attrbute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=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" />


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

33、[attrbute^=value]

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

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

//查找所有 name 以 ‘news‘ 开始的 input 元素
$("input[name^=‘news‘]")

34、[attrbute$=value]

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

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

//

查找所有 name 以 ‘letter‘ 结尾的 input 元素
$("input[name$=‘letter‘]")

35、[attrbute*=value]

匹配给定的属性是以包含某些值的元素

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

//查找所有 name 包含 ‘man‘ 的 input 元素
$("input[name*=‘man‘]")

36、[attrSel1][attrSel2][attrSelN]

复合属性选择器，需要同时满足多个条件时使用

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />


//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
$("input[id][name$=‘man‘]")

子元素：

37、:first-child

匹配第一个子元素

类似的 :first 匹配第一个元素，而此选择符将为每个父元素匹配一个子元素

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>


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

38、:first-of-type

结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1) 选择器。

解释的很模糊，网上搜了很多都是扯淡的解释，作者也只能自己一个个试，试了几十次才弄的稍微有点清楚，如果错了，慢点拍砖，怕怕。直接看示例。

<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类型子元素中的"长子"的span标签
$("span:first-of-type");

39、:last-chid

匹配最后一个子元素

:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>



//在每个 ul 中查找最后一个 li
$("ul li:last-child")

40、:last-of-child

结构化伪类，匹配E的父元素的最后一个E类型的孩子

大体的意思跟 :first-of-type 差不多，只是一个是第一个元素，一个是最后一个元素，这里就不赘述了

<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类型子元素中的最后一个的span标签
$("span:last-of-type");

41、:nth-child()

匹配其父元素下的第N个子或奇偶元素

:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>


//在每个 ul 查找第 2 个li
$("ul li:nth-child(2)")

42、:nth-last-child()

选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含两个<li>， $(‘li:nth-child(1)‘)选择第一个<li>，而$(‘li:eq(1)‘)选择第二个。

这个不寻常的用法，可进一步讨论中找到W3C CSS specification.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

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

43、:nth-last-of-type()

选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含3个<li>，$(‘li:nth-last-of-type(1)‘)选择第3个，也就是最后一个<li>。

这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>


//在每个匹配的ul中查找倒数第二个li

$("ul li:nth-last-of-type(2)");

44、:nth-of-type()

选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。

这个不寻常的用法，可进一步讨论中找到W3C CSS specification

<div>
  <span>John</span>
  <b>Kim</b>
  <span>Adam</span>
  <b>Rafael</b>
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>
  <span>Richard</span>
  <span>Ralph</span>
  <span>Jason</span>
</div>


//查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。
$("span:nth-of-type(2)");

45、:only-child

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

如果父元素中含有其他元素，那将不会被匹配。

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>


//在 ul 中查找是唯一子元素的 li
$("ul li:only-child")

46、:onli-of-type

选择所有没有兄弟元素，且具有相同的元素名称的元素。

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

表单：

47、:input

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

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>



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

48、:text

匹配所有的单行文本框

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
</form>


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

49、:password

查找所有密码框

50、:radio

查找所有单选按钮

51、:checkbox

查找所有复选框

52、:submit

查找所有提交按钮

53、:image

匹配所有图像域

<input type="image" />

//匹配所有图像域
$(":image")

54、:reset

查找所有重置按钮

55、:button

查找所有按钮.

56、:file

查找所有文件域

表单属性：

57、:enabled

匹配所有可用元素

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />   //可用
</form>


//查找所有可用的input元素
$("input:enabled")

58、:disabled

匹配所有不可用元素

<form>
  <input name="email" disabled="disabled" />  //不可用
  <input name="id" />
</form>


//查找所有不可用的input元素
$("input:disabled")

59、: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")

60、:selected

匹配所有选中的option元素

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>   //selected
  <option value="3">Trees</option>
</select>


//查找所有选中的选项元素
$("select option:selected")

混淆选择器：

61、$.escapeSelector(selector)

jquery选择器（照着jq手册写的）

原文：http://www.cnblogs.com/dadayang/p/5898488.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)