jquery 选择器

1.id选择器
通过给定的id匹配元素

html代码

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:
$("#myDiv");

2.查找含有特殊字符的元素

HTML代码

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

jQuery 代码:

#foo\\[bar\\]

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

element

一个用于搜索的元素。指向 DOM 节点的标签名。
jQuery 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div")
结果   [ <div>DIV1</div>, <div>DIV2</div> ]

类选择器

根据给定的css类名匹配元素。

HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* 匹配所有元素多用于结合上下文来搜索。

HTML 代码:
<div>DIV</div
<span>SPAN</span>
<p>P</p>

jQuery 代码:
$("*")

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

selector1,selector2,selectorN

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

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

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

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

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

用以匹配元素的选择器，并且它是第一个选择器的后代元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
获取具体元素 console.log($("form input")[1]);

parent > child

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

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]

节点父、子和同胞

1.在节点树中，顶端节点被称为根（root）。
2.每个节点都有父节点、除了根（它没有父节点）。
3.一个节点可拥有任意数量的子节点。
4.同胞是拥有相同父节点的节点。

prev + next

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

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]

:first 获取第一个元素

HTML 代码:
<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:first');
结果:
[ <li>list item 1</li> ]

:not(selector) 去除所有与给定选择器匹配的元素

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

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]

:even

匹配所有索引值为偶数的元素，从 0 开始计数
查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:even")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

:odd

匹配所有索引值为奇数的元素，从 0 开始计数
查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:odd")
结果:
[ <tr><td>Value 1</td></tr> ]

:eq(index)

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

查找第二行

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]

:gt(index)

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

从 0 开始计数

>查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:gt(0)")
结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:last()

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

HTML 代码:
<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')
结果:
[ <li>list item 5</li> ]

:lt(index)

匹配所有小于给定索引值的元素
查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

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

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

HTML 代码:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
jQuery 代码:
$("div:contains('John')")
结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

:has(selector)匹配含有选择器所匹配的元素的元素

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]

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

查找所有含有子元素或者文本的 td 元素

HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:parent")
结果:
[ <td>Value 1</td>, <td>Value 2</td> ]

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

查找隐藏的 tr

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]

匹配type为hidden的元素

HTML 代码:
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]

:visible 匹配所有的可见元素

查找所有可见的 tr 元素

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ]

[attribute]

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

查找所有含有 id 属性的 div 元素

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]

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

查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

[attribute!=value]

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

此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

描述:
查找所有 name 属性不是 newsletter 的 input 元素

HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

[selector1][selector2][selectorN]

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

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

HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery 代码:
$("input[id][name$='man']")
结果:
[ <input id="letterman" name="new-letterman" /> ]

:first-child

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

类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

在每个 ul 中查找第一个 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:first-child")
结果:
[ <li>John</li>, <li>Glen</li> ]

:last-child

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

在每个 ul 中查找最后一个 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:last-child")
结果:
[ <li>Brandon</li>, <li>Ralph</li> ]

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：<p><img/>图片</p>，用$('p img:only-child')是可以匹配，感谢：nwujiajie 指正）

在 ul 中查找是唯一子元素的 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
jQuery 代码:
$("ul li:only-child")
结果:
[ <li>Glen</li> ]

** 一些比较常用的小，仅供参考，详细文档请查看（http://jquery.cuishifeng.cn/id.html）**