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> 类型：
穿越 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" ) ) {}无效
