在讨论 jQuery 对象和 DOM 对象的相互转换之前,先约定好定义变量的风格。如果获取的对象是 jQuery 对象,那么在变量前面加上 $ ,例如:
var $variable = jQuery对象;
如果获取的是DOM对象,则定义如下:
var variable = DOM对象;
1、jQuery 对象转成 DOM 对象
jQuery 对象不能使用DOM中的方法,但如果对 jQuery 对象所提供的方法不熟悉,或者 jQuery 没有封装想要的方法,不得不使用 DOM 对象的时候,有以下两种处理方法。
jQuery 提供了两种方法将一个 jQuery 对象转换成 DOM 对象,既 [index] 和 get (index) 。
(1) jQuery 对象是类似于一个数组对象,我们通常叫做包装集,这个后面会介绍到,所以可以通过下标的形式访问数组中的某个元素,从而得到相应的DOM对象。
var $div = $("div");
var div = $div[0];
alert(div.innerHTML);
(2) 另一种方法是 jQuery 本身提供的,通过 get(index) 方法得到相应的 DOM 对象,jQuery 代码如下所示:
var $div = $("div");
var div = $div.get(0);
alert(div.innerHTML);
2、DOM 对象转成 jQuery 对象
对于一个 DOM 对象,只需要用 $() 把 DOM 对象包装起来。 $() 就是 jQuery 对象。示例代码如下所示:
var div = document.getElementById("id");
var $div = $("div");
转换后,可以任意使用 jQuery 中的方法。通过以上方法,可以任意地相互转换 jQuery 对象和 DOM 对象。
jQuery 代码中常常见到 $(this) 这样的写法,这个就是使用工厂方法将 DOM 对象转换成 jQuery 上下文对象。