jQuery选择器下

jQuery选择器上：http://blog.csdn.net/tianyafeng123xin/article/details/50562269

4、jQuery选择器之内容

4.1、:contains

匹配包含给定文本的元素。返回值：Array<Element(s)>

参数：

text：一个用以查找的字符串。--String

示例：查找所有包含"John"的div元素。

HTML代码：

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>

jQuery代码：

$("div:contains('John')");

结果：

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

4.2、:empty

匹配所有不包含子元素或者文本的空元素。返回值：Array<Element(s)>
示例：匹配所有不包含子元素或者文本的空元素。

HTML代码：

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

jQuery代码：

$("td:empty");

结果：

[ <td></td>, <td></td> ]

4.3、:has

匹配含有选择器所匹配的元素的元素。返回值：Array<Element(s)>
参数：

selector：一个用于筛选的选择器。--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> ]

4.4、:parent

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

示例：查找所有包含子元素或者文本的td元素。

<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> ]

5、jQuery选择器之可见性

5.1、: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> ]

5.2、:visible

匹配所有的可见元素。

示例参见上。

6、jQuery选择器之属性

6.1、[attribute]

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

attribute：属性名。--String

示例：查找所有含有id属性的div元素。

HTML代码：

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

jQuery代码：

$("div[id]");

结果：

<divid="test2"></div>

6.2、[attribute=value]

匹配给定的属性是某个特定值得元素。

参数：

attribute：属性名。--String

value：(可选)属性值。引号大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。

示例：查找所有name属性是newsletter的input元素。

HTML代码：

<pre name="code" class="html"><input type="checkbox" name="newsletter" value="Hot Fuzz"/>

<input type="checkbox" name="newsletter" value="Code 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" /> ]

6.3、[attribute!=value]

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

此选择器等价于:not([attr=value])

要匹配含有特定属性但不等于特定值得元素，请使用[attr]:not([attr=value])
参数：

attribute：属性名。--String

value：(可选)属性值。引号在在多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。--String
示例：查找所有name属性不是newsletter的input元素。

HTML代码：

示例参见上。

6.4、[attribute^=value]

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

6.5、[attribute$=value]

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

6.6、[attribute*=value]

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

6.7、[selector1][selector2][selectorN]

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

参数：

selector1：属性选择器。--Selector

selector2：另一个属性选择器，用于进一步缩小范围。--Selector

selectorN：任意多个属性选择器。--Selector
示例：找到所有含有id属性，并且它的name属性是以man结尾的。

HTML代码：

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

jQuery代码：

$("inut[id][name$='man']");

结果：

[ <input id="letterman" name="new-letterman" /> ]

7、jQuery选择器之子元素

7.1、:nth-child(even)

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

':eq(index)'只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用：

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth-child(3n+2)

参数：

index：要匹配元素的序号，从1开始。

示例：在每个ul查找第2个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:nth-child(2)');

结果：

[ <li>Karl</li>,   <li>Tane</li> ]

7.2、:first-child

匹配第一个子元素。返回值：Array<Element(s)>

':first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

示例：在每个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> ]

7.3、:last-child

匹配最后一个子元素。

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

示例参见上。

7.4、:only-child

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

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

示例：在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> ]

8、jQuery选择器之表单

8.1、:input

匹配所有input，textarea，select和button元素。

示例：查找所有的input元素，下面这些元素都会被匹配到。
HTML代码：

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

jQuery代码：

$(":input");

结果：

[ 
    <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>,
 ]

8.2、:text

匹配所有的单行文本框。返回值：Array<Element(s)>
示例：查询所有文本框。
HTML代码：

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery代码：

$(":text");

结果：

[ <input type="text" /> ]

8.3、:password

匹配所有密码框。

示例参见8.2示例。

8.4、:radio

匹配所有单选按钮。

示例参见8.2示例。

8.5、:checkbox

匹配所有复选框。

示例参见8.2示例。

8.6、:submit

匹配所有提示按钮。

示例参见8.2示例。

8.7、:image

匹配所有图像域。

示例参见8.2示例。

8.8、:reset

匹配所有重置按钮。
示例参见8.2示例。

8.9、:button

匹配所有按钮。

示例参见8.2示例。

8.10、:file

匹配所有文本域。

示例参见8.2示例。

8.11、:hidden

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

示例：匹配type为hidden的元素。

HTML代码：

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery代码：

$("input:hidden");

结果：

[ <input type="hidden" name="id"/> ]

9、jQuery选择器之表单对象属性

9.1、:enabled

匹配所有可用元素。返回值：Array<Element(s)>

示例：查找所有可用元素。

HTML代码：

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

jQuery代码：

$("input:enabled");

结果：

[ <input name="id"/> ]

9.2、:disabled

匹配所有不可用元素。

示例：查找所有不可用的input元素。

HTML代码：

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

jQuery代码：

$("input:disabled");

结果：

<input name="email" disabled="disabled" />

9.3、:checked

匹配所有选中的被选中元素(复选框、单选框等，不包括select中option)。
示例：查找所有选中的复选框元素。

HTML代码：

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

jQuery代码：

$("input:checked");

结果：

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

9.4、:selected

匹配所有选中的option元素。

示例：查找所有选中的选项元素。

HTML代码：

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

jQuery代码：

$("select option:selected");

结果：

[ <option value="2" selected="selected">Gardens</option> ]