jQuery官方教程之频繁被问的问题汇总

全部翻译自jQuery官网，转载请注明出处。原文地址

1、我怎么样通过class和ID来选择一个条目？

下面的代码选择了ID为”myDivId”的元素，由于ID是唯一的，所以得到的结果要么为空要么是唯一的，这取决于是否有ID定义为”myDivId”的元素。

$( "#myDivId" );

下面的代码选择了class定义为”myCssClass”的元素，由于任意数量的元素都可以使用同一个class，所以该代码选择的元素数量也是任意的。

$( ".myCssClass" );

一个包含了被选择元素的jQuery对象可以像平常那样赋值给一个JS变量。

var myDivElement = $( "#myDivId" );

通常，一个jQuery对象中的元素，可以被别的jQuery方法调用。

var myValue = $( "#myDivId" ).val(); // 得到表单输入值

$( "#myDivId" ).val( "hello world" ); // 设置表单输入值

2、当我有一个DOM元素时，该怎么选择元素？

如果你有一个包含了很多内容的DOM元素，并且想从中选择一些其他元素，那么就简单的把它包裹进一个jQuery对象就行了。

var myDomElement = document.getElementById( "foo" ); // 一个普通DOM元素

$( myDomElement ).find( "a" ); // 得到所有该DOM元素中的"a"元素

许多人想把一个DOM元素或者jQuery对象和CSS选择器连结起来，例如：

$( myDomElement + ".bar" ); // 这相当于 $( "[object HTMLElement].bar" );

！很不幸，你不能把字符串和object对象连结。

3、我如何测试一个元素是否定义了特殊的class？

.hasClass()

方法解决了这个普遍的问题

$( "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();

}

注意，这个方法也可以用来测试其他事情，例如，你可以测试一个元素是否处于隐藏状态（通过使用自定义的

:hiddern

选择器）

if ( $( "#myDiv" ).is( ":hidden" ) ) {

$( "#myDiv" ).show();

}

4、如何判断一个元素是否存在？

对你的选择器返回的jQuery集合使用

.length

属性。

if ( $( "#myDiv" ).length ) {

$( "#myDiv" ).show();

}

注意，并不是必须要判断元素是否存在，下面这段代码，如果元素存在在显示，如果不存在则不执行任何操作，并且不会报错。

$( "#myDiv" ).show();

5、我如何判断一个开关元素的状态？

你可以通过

:visible

和

:hidden

选择器来判断一个元素的可见状态。

var isVisible = $( "#myDiv" ).is( ":visible" );

var isHidden = $( "#myDiv" ).is( ":hidden" );

如果你只是简单的根据元素的可见性来操作元素的话，那只要简单的使用

:visible

和

:hidden

在选择表达式中即可。例如：

$( "#myDiv:visible" ).animate({

left: "+=200px"

}, "slow" );

6、如何通过ID选择那些用到了CSS特性的元素？

由于jQuery使用CSS语法来选择元素，一些符号会被错认为CSS符号。例如，ID属性，在一个首字母之后，可能会使用冒号

:

和句号

.

，除了字母、数字、连字符、下划线以外，使用冒号”:”和句号”.”在一个jQuery选择器的上下文内是会产生问题的，因为他们分别代表了伪类(pseudo-class)和类（class）.

为了能让jQuery按照字符的字面意思而不是CSS符号，在它们前面必须被双反斜杠“//”隔开。

// 不起作用:
$( "#some:id" )

// 有用!
$( "#some\\:id" )

// 不起作用:
$( "#some.id" )

// 有用!
$( "#some\\.id" )

下面这个函数用于对一个ID字符串进行以“#”开头转码。

function jq( myid ) {

return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );

}

上面这个函数可以被这么用：

$( jq( "some.id" ) )

7、如何 使能(enable)/使不能(disable) 一个表单元素 ?

你可以使用

.prop()

方法：

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

8、如何改变单选框或复选框的选中状态?

你可以使用

.prop()

方法：

// Check #x
$( "#x" ).prop( "checked", true );

// Uncheck #x
$( "#x" ).prop( "checked", false );

9、如何获得一个已选选项的文本内容？

通常我们选择一个元素，只为了获取两个值，一个是用来发送给服务器的，这个简单：

$( "#myselect" ).val();
// => 1

另一个是你选择的条目的文本内容，例如我们使用如下的例子：

<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>

如果你想得到“Mr”这个值，而不是仅仅得到“1”，那么你就要这么做：

$( "#myselect option:selected" ).text();
// => "Mr"

10、如何改变一个长度为10的list中第3个元素的值？

无论

:eq()

还是

.eq()

方法，都可以得到你需要的条目，然而，想要改变其文本，就要先得到这个文本。

// 这个不管用，.text()会返回一个String字符串而不是一个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")

设置。

11、如何从一个jQuery对象中取出一个原生DOM元素？

一个jQuery对象就像一个包裹着一个或多个原生DOM元素的类似数组的东西，为了得到一个真正的DOM元素的引用（不是jQuery对象），你有两种选择。

第一种（最快速）就是使用数组符号：

$( "#foo" )[ 0 ]; // 等价于document.getElementById( "foo" )

第二种，是使用

.get()

函数：

$( "#foo" ).get( 0 ); // 同第一种，但速度稍慢.

你可以使用

.get()

方法不加任何参数来获取一个真实DOM元素的数组。

以上就是官网对于频繁被问的问题给出的解答，翻译不容易，转载请注明出处，谢谢！