jQuery - 使用要点 - 使用中的高频问题

如何使用 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 元素数组。