选择文档元素
jQuery支持大多数CSS3选择器,以及一些非标准选择器。完整的选择器参考
通过ID
$( "#myId" ); // ID在每个页面是唯一的
通过Class Name
$( ".myClass" );
通过Attribute
$( "input[name='first_name']" );
通过混合使用CSS选择器
$( "#contents ul.people li" );
同以逗号分隔的选择器列表
$( "div.myClass, ul.people" );
伪类选择器
$( "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" );
/*
无意义的判断
$( "div.foo" ) 总会返回对象,条件判断会一直为 true
*/
if ( $( "div.foo" ) ) {
......
}
/*
改为判断返回的对象,是否包含被选取的元素
*/
if ( $( "div.foo" ).length ) {
......
}
保存选择者:jQuery不会保存任何选择者,若要再次使用此选择者,需将它存入变量中。当DOM改变,储存的选择者不会更新。
var divs = $( "div" );
提纯和过滤选择者
// 提纯选择者
$( "div.foo" ).has( "p" ); // 包含<p>标签的div.foo元素
$( "h1" ).not( ".bar" ); // 不含bar类的h1元素
$( "ul li" ).filter( ".current" ); // 包含current类的无需列表元素
$( "ul li" ).first(); // 仅无序列表的第一个元素
$( "ul li" ).eq( 5 ); // 无序列表的第6各元素,索引从0开始
选择表单元素:jQuery提供许多伪类选择器来帮助选取表单中的元素。
:checked 不要同checkbox混淆,:checked选择目标为被选中的checkbox,同时也作用于:radio buttong、<select>元素。(:selected伪类选择器,只作用于:<select>元素)。
:checked 伪类选择器作用于:checkbox、radio button、select
$( "form :checked" );
:disabled 此伪类选择器,选择目标为任何含disabled属性的<input>元素。
$( "form :disabled" );
// 更好的使用方式
$("form #inputID").filter(":disabled");
:enabled 基本上同:disabled伪类选择器作用相反;:enabled选择目标为任何不含disabled属性的元素。
$( "form :enabled" );
// 更好的使用方式
$("form input").filter(":enabled");
:input 此伪类选择器,选择所有的:<input> <textarea> <select> <button>元素。
$( "form :input" );
:selected 此伪类选择器,选择目标为处于<option>元素中的,被选中的元素。
$( "form :selected" );
// 更佳的使用方式
$("form option").filter(":selected");