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元素的数组。

---

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