jQuery 开发技巧

1、关于页面元素的引用 
通过

jquery 的$()引用元素包括通过 id、class、元素名以及元素的层级关系及 dom 或者 xpath

条件等方法，且返回的对象为

jquery 对象（集合对象），不能直接调用 dom 定义的方法。 

2、jQuery 对象与 dom 对象的转换 
只有

jquery 对象才能使用 jquery 定义的方法。注意 dom 对象和 jquery 对象是有区别的，调用

方法时要注意操作的是

dom 对象还是 jquery 对象。 

普通的

dom 对象一般可以通过$()转换成 jquery 对象。 

如：

$(document.getElementById(

“msg”))则为 jquery 对象，可以使用 jquery 的方法。 

由于

jquery 对象本身是一个集合。所以如果 jquery 对象要转换为 dom 对象则必须取出其中

的某一项，一般可通过索引取出。

 

如：

$(

“#msg”)[0]，$(“div”).eq(1)[0]，$(“div”).get()[1]，$(“td”)[5]这些都是 dom 对象，可

以使用

dom 中的方法，但不能再使用 Jquery 的方法。 

以下几种写法都是正确的：

 

复制代码

 代码如下:

$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML; 

3、如何获取 jQuery 集合的某一项 
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用

eq 或 get(n)方法或者

索引号获取，要注意，

eq 返回的是 jquery 对象，而 get(n)和索引返回的是 dom 元素对象。对

于

jquery 对象只能使用 jquery 的方法，而 dom 对象只能使用 dom 的方法，如要获取第三 个

<div>元素的内容。有如下两种方法： 
$(

“div”).eq(2).html(); //调用 jquery 对象的方法 

$(

“div”).get(2).innerHTML; //调用 dom 的方法属性 

4、同一函数实现 set 和 get 
Jquery 中的很多方法都是如此，主要包括如下几个： 
复制代码

 代码如下:

$(

“#msg”).html(); //返回 id 为 msg 的元素节点的 html 内容。 

$(

“#msg”).html(“<b>new content</b>”); 

//将

“<b>new content</b>” 作为 html 串写入 id 为 msg 的元素节点内容中,页面显示粗体的

new content