jQuery Extensions

jQuery Extensions

:animated

Select all elements that are in the progress of an animation at the time the selector is run.
选择selector上动画涉及到的所有elements

$( "div:animated" ).toggleClass( "colored" );
# 由于上面的是jQuery的扩展，不是标准CSS，无法获得DOM的性能优化，可使用下面的替代
.filter(":animated")

[name!=”value”]

$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
.not([attr='value'])

:checkbox :image :password :button :hidden :visible :text :radio :reset :submit :file

var input = $( "form input:checkbox" )
.filter(":checkbox")
[type="checkbox"]

var input = $( ":button" ).addClass( "marked" );
.filter(":button")
# 下面两种类型会被选择：
<input type="button" value="Input Button">
<button>Button</button>

$( "div:hidden" ).show( 3000 );
.filter(":hidden")
$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false

⇒ radio:

⇒ reset, submit:

Button Attribute Values
Value Description
button The button is a clickable button
submit The button is a submit button (submits form-data)
reset The button is a reset button (resets the form-data to its initial values)

⇒ file

var input = $( "input:file" )
$( ":file" ) = $("*:file" ) 
$( "input:file" )
[type="file"]

:eq()

Select the element at index n within the matched set.

$( "td:eq( 2 )" ).css( "color", "red" );
:nth-child(n)

:even :odd

Selects even elements, zero-indexed. See also odd.

$( "tr:even" ).css( "background-color", "#bbf" );
.filter(":even")

:first :last

$( "tr:first" ).css( "font-style", "italic" );

:gt :lt

Select all elements at an index greater than index within the matched set.
Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $( “.myclass:gt(1)” ) selects elements after the second element in the document with the class myclass, rather than after the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.
Prior to jQuery 1.8, the :gt(index) selector did not accept a negative value for index
:nth-child(1) 使用的是1-based indexing，也就是从1开始
:gt(index) 使用的是0-based indexing，也就是从0开始

$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );

:has()

Selects elements which contain at least one element that matches the specified selector.

$( "div:has(p)" ).addClass( "test" );

:header

Selects all elements that are headers, like h1, h2, h3 and so on.

$( ":header" ).css({ background: "#ccc", color: "blue" });
.filter(":header")

:parent :empty

Select all elements that have at least one child node (either an element or text).

$( "td:parent" ).fadeTo( 1500, 0.3 );
.filter(":parent")

:selected

Selects all elements that are selected.
The :selected selector works for elements. It does not work for checkboxes or radio inputs; use :checked for them.

<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

:input

Selects all input, textarea, select and button elements.

<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>
<div id="messages"></div>

<script>
var allInputs = $( ":input" );