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" );