jquery对象与dom对象之间互相转换的方法

Posted 2020-11-10 乌云上

　　本文主要讲述jquery对象和js里的dom对象之间互相转换的方法，使jquery对象可以直接使用js里的方法，或js里的dom对象使用jquery里的方法。

jquery对象和dom对象是不一样的，什么是jquery对象？什么是dom对象？我们举个例子来说：

$("#aijquery"): //这种方式获取得到的就是jquery对象
document.getElementById("aijquery")://这种方法获取到的就是dom对象

 

jquery对象和dom对象是不一样的，对象的一些方法也是不一样的，比如我们要获取一个标签的html内容：

document.getElementById("aijquery").innerHTML;//这是dom对象的方法
$("#aijquery").html();//这是jquery对象的方法

 

有时我们在特定的情况下，需要把jquery对象转换成dom对象，或者把dom对象转换成jquery对象，两种对象之间互相转换的方法：

dom对象转换为jquery对象：

一般情况下，dom对象直接用$()就可以转换成jquery对象，如：

$(document.getElementById("aijquery"))

 

jquery对象转换成dom对象，有两种方法，一种是用jquery的内置函数get，来获取dom对象，如：

$("#aijquery").get(0);

 

还有一种方法更简单，因为jquery对象的属性是一个集合，所以我们可以像数组那样，取出其中一项就行：

$("#aijquery")[0];
$("div")[5];
//上面这两种返回的都是dom对象,可以直接使用js里的方法

 

jquery对象和dom对象之间的互相转换就是上面这几种方法，总结一下我们经常会用到的一些写法，下面的这些写法都是正确的：

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

 

原文参考：http://www.aijquery.cn/Html/jqueryjiqiao/11.html