如何使用 class 或者 ID 选择元素?
由于在文档中 ID 是唯一的,使用此种方式会选中0个或者1个元素。
$( "#myDivId" );
class 的方式会选中 class 名称为 "myCssClass" 的元素,因为多个元素可以有相同的 class 名称,所以这种方式会选中多个元素。
$( ".myCssClass" );
一个 jQuery 对象包含被选中的元素,并且该对象可以被分配给 JavaScript 变量:
var myDivElement = $( "#myDivId" );
通常 jQuery 对象中的元素,由其他 jQuery 函数来执行行为:
var myValue = $( "#myDivId" ).val(); // 取得表单中 input 元素中的值
$( "#myDivId" ).val( "hello world" ); // 设置表单中 input 元素中的值
当已经拥有 DOM 元素时,如何选择元素?
若有一个包含 DOM 元素的变量,若要选择同此 DOM 元素有关系的元素,简单的方式是,将该 DOM 元素封装入一个 jQuery 对象中就行。
var myDomElement = document.getElementById( "foo" ); // 一个基本的 DOM 元素
$( myDomElement ).find( "a" ); // 寻找此基本的 DOM 元素中的 <a>
可以建立 DOM 元素,或者 jQuery 对象,同 CSS 选择器之间的关系:
$( myDomElement + ".bar" ); // 等同于 $( "[object HTMLElement].bar" );
不过,不能在字符串和对象之间建立关系。
如何检测元素具有特定的 class?
使用 .hasClass() (jQuery 1.2和后续版本中加入)实现这种功能。
$( "div" ).click(function() {
if ( $( this ).hasClass( "protected" ) ) {
$( this )
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
}
});
也可以使用附加恰当选择器参数的 .is() 方法,来实现更高级的匹配。
if ( $( "#myDiv" ).is( ".pretty.awesome" ) ) {
$( "#myDiv" ).show();
}
同时 .is() 方法也可以实现其他方面的检测,例如检测元素是否隐藏(传入 :hidden 伪类选择器)
if ( $( "#myDiv" ).is( ":hidden" ) ) {
$( "#myDiv" ).show();
}
检测元素是否存在?
使用 .length 属性,来检测选择器返回的 jQuery 集合
if ( $( "#myDiv" ).length ) {
$( "#myDiv" ).show();
}
上方代码中示例的功能,也可先使用 .length 属性检测,.show() 方法会让存在的元素显示,不存在的元素无动作(不会报错)。
$( "#myDiv" ).show();
如何确定切换元素的状态?
var isVisible = $( "#myDiv" ).is( ":visible" );
var isHidden = $( "#myDiv" ).is( ":hidden" );
//
$( "#myDiv:visible" ).animate({
left: "+=200px"
}, "slow" );
如何通过具有CSS表示法中使用的字符的ID选择元素?
因为 jQuery 通过 CSS 语法来选择元素,一些字符会被解释为 CSS 表示法。若要 jQuery 把这些字符看做它们原始的文字意思,而不是 CSS 表示法,必须在这些字符前加入两个反斜线符号(\\),来转义这些字符。完整文档:Selector Documentation
// 不工作
$( "#some:id" )
// 工作
$( "#some\\:id" )
// 不工作
$( "#some.id" )
// 工作
$( "#some\\.id" )
function jq( myid ) {
return "#" + myid.replace( /(:|\.|\[|\]|,|=|@)/g, "\\$1" );
}
// 上方函数使用方式
$( jq( "some.id" ) )
如何禁用/启用表单元素?
使用 .prop() 方法
// 禁用 #x
$( "#x" ).prop( "disabled", true );
// 启用 #x
$( "#x" ).prop( "disabled", false );
如何选中/取消选中复选框或单选按钮?
使用 .prop() 方法
// 选中 #x
$( "#x" ).prop( "checked", true );
// 取消选中 #x
$( "#x" ).prop( "checked", false );
如何获取所选选项的文本值?
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Select 元素有两个会被访问的值(假定选中第一个选项),第一个是被发送给服务的值,取得方式为:
$( "#myselect" ).val();
// => 1
第二个是所选选项的文本值,取得方式为:
$( "#myselect option:selected" ).text();
// => "Mr"
如何替换10项目列表中第3个元素的文本?
:eq() 选择器,或者 .eq() 方法,可用以选择恰当的元素。然而,若要设置新的文本内容,那么就要在设置新值前,先取得原先的值。
// 此种方式不会工作; text() 的返回值是‘字符串’,不是 jQuery 对象
$( this ).find( "li a" ).eq( 2 ).text().replace( "foo", "bar" );
// 此种方式会工作
var thirdLink = $( this ).find( "li a" ).eq( 2 );
var linkText = thirdLink.text().replace( "foo", "bar" );
thirdLink.text( linkText );
记住,.text() 取值;.text("foo") 设定值。
如何从 jQuery 对象中提取 DOM 元素?
jQuery 对象是封装着一个或多个 DOM 元素的包装器。取得对实际 DOM 元素的参考(代替 jQuery 对象),有两个途径。
第一种方法(最快的方法)是数组标记法:
$( "#foo" )[ 0 ]; // 等同于 document.getElementById( "foo" )
第二种方法是使用 .get() 函数:
$( "#foo" ).get( 0 ); // 等同于上方的方式,不过效能会慢一些
同样也可以通过调用无参数的 .get() 函数,来检索真正的 DOM 元素数组。