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 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,
类型:
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file
穿越 Traversing
- API documentation on traversing
元素之间的关系有:parenst
, children
, siblings
// Demo
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" ) ) {}
无效