jQuery 支持多数 CSS3 选择器，本身有扩展；完整参考链接

• $() 将会返回一个 jQuery 对象

$( "#myId" ); 
$( ".myClass" );
$( "input[name='first_name']" );  <!-- 属性 -->
$( "#contents ul.people li" );
$( "div.myClass, ul.people" );   <!-- 选择多个 -->

---

pseudo-selectors

$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

过滤器

// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth 索引值从 0 开始

选择表单元素

$( "form :checked" ); /* 已被选择的 checkbox, radio button, <select> */
$( "form :disabled" );
$( "form :enabled" );
$( "form :input" );  /* <input> <textarea> <select> <button> */
$( "form :selected" ); /* 被选择的 <option> */

---

<input> 类型：

• :password
• :reset
• :radio
• :text
• :submit
• :checkbox
• :button
• :image
• :file

穿越 Traversing

• API documentation on traversing

元素之间的关系有：parenst, children, siblings

// Demo
<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

jQuery 的这些方法可以传递一个 CSS选择器 来进一步筛选元素：.parent(), .parent("div")

Parents

• .parent()
• .parents()
• .parentsUntil("CSS Selectors") 不包含条件本身
• .closest("CSS Selectors") 过滤出离它最近的一个父元素，如果本身就是符合条件的元素，则返回本身

// Selecting an element's direct parent:
 
// returns [ div.child ]
$( "span.subchild" ).parent();
 
// Selecting all the parents of an element that match a given selector:
 
// returns [ div.parent ]
$( "span.subchild" ).parents( "div.parent" );
 
// returns [ div.child, div.parent, div.grandparent ]
$( "span.subchild" ).parents();
 
// Selecting all the parents of an element up to, but *not including* the selector:
 
// returns [ div.child, div.parent ]
$( "span.subchild" ).parentsUntil( "div.grandparent" );
 
// Selecting the closest parent, note that only one parent will be selected
// and that the initial element itself is included in the search:
 
// returns [ div.child ]
$( "span.subchild" ).closest( "div" );
 
// returns [ div.child ] as the selector is also included in the search:
$( "div.child" ).closest( "div" ); 

Children

• .children()
• .find()

// Selecting an element's direct children:
 
// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
 
// Finding all elements within a selection that match the selector:
 
// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );

Sibings

• .prev()
• .prevAll()
• .prevUntil()
• .next()
• .nextAll()
• .nextUntil()
• .siblings() 不包括本身

// Selecting a next sibling of the selectors:
 
// returns [ div.surrogateParent1 ]
$( "div.parent" ).next();
 
// Selecting a prev sibling of the selectors:
 
// returns [] as No sibling exists before div.parent
$( "div.parent" ).prev();
 
// Selecting all the next siblings of the selector:
 
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).nextAll();
 
// returns [ div.surrogateParent1 ]
$( "div.parent" ).nextAll().first();
 
// returns [ div.surrogateParent2 ]
$( "div.parent" ).nextAll().last();
 
// Selecting all the previous siblings of the selector:
 
// returns [ div.surrogateParent1, div.parent ]
$( "div.surrogateParent2" ).prevAll();
 
// returns [ div.surrogateParent1 ]
$( "div.surrogateParent2" ).prevAll().first();
 
// returns [ div.parent ]
$( "div.surrogateParent2" ).prevAll().last();

---

// Selecting an element's siblings in both directions that matches the given selector:
 
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$( "div.parent" ).siblings();
 
// returns [ div.parent, div.surrogateParent2 ]
$( "div.surrogateParent1" ).siblings();

用 .length 测试 jQuery Selection 是否包含jQuery 对象

// Testing whether a selection contains elements.
var foo = $( "div.foo" );
if ( foo.length ) {
    ...
}

因为 $() 会返回一个 jQuery 对象，而用对象作为条件永远会等于真，即使对象里面没有数据。所以 if ( $( "div.foo" ) ) {} 无效