Jquery对象与DOM对象之间的转换

时间 2019-11-16

标签 jquery 对象 dom 之间转换栏目 JQuery 繁體版

原文原文链接

经过document获取的对象获得的是DOM对象，而Jquery经过$获取的对象获得的是Jquery对象，二者之间存在区别的。DOM对象才能使用DOM中的方法，jQuery对象是不能够用DOM中的方法。好比DOM对象能调用getContext('2d')获取上下文，而Jquery对象不行，必须转换成DOM对象才行。那么二者之间怎么进行转换呢？javascript

　　1、Jquery对象转换成DOM对象html

　　Jquery对象是一个数组对象，能够经过下标获取，如：java

　　var jqueryObj = $('#objId');　　//获得Jquery对象jquery

　　var domObj = jqueryObj[0];　　//经过下标获得DOM对象，jqueryObj[0]等同于jqueryObj.get(0)数组

　　2、DOM对象转换成Jquery对象dom

　　DOM对象只须要用$()将其包含起来便可，如：this

　　var domObj = document.getElementById('objId');　　//获得DOM对象spa

　　var jqueryObj = $(domObj);　　//转换成Jquery对象htm

　　注：document或Jquery中经过className或TagName获取的数组对象，应该经过循环逐个转换。对象

实例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
 <title></title>
</head>
<body>
 <div id="div1" name="testDiv"></div>
 <div id="div2" name="testDiv"></div>
 <div id="div3" name="testDiv"></div>
</body>
<script>
 console.log($('#div1')); //获得的是JQuery对象
 //等同于
 var div1Obj = document.getElementById('div1'); //获得的是DOM对象
 console.log($(div1Obj));

 console.log($('#div1')[0]);
 //等同于
 console.log($('#div1').get(0));
 //等同于
 console.log(div1Obj);

 var divArray = document.getElementsByTagName('div');
 console.log(divArray);
 console.log($(divArray));
 console.log($('div'));

 for(var index in divArray){
 if(index<=divArray.length){
 console.log(divArray[index]);
 }
 }
 //等同于
 for(var index=0;index<divArray.length;index++){
 console.log(divArray[index]);
 }
 //等同于
 $('div').each(function(){
 console.log(this);
 });
</script>
</html>