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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。