jquery选择器(照着jq手册写的)

Posted H5小菜鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery选择器(照着jq手册写的)相关的知识,希望对你有一定的参考价值。

基本

1、id

概述

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

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

 

用于搜索的,通过元素的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手册写的)的主要内容,如果未能解决你的问题,请参考以下文章

JQ001-认识jQuery 和 JQ002-jQuery选择器

jq选择器基础

jq=jQuery.noConflict();

jQuery学习手册

jq-选择器

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq