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

通过document获取的对象得到的是DOM对象,而Jquery通过$获取的对象得到的是Jquery对象,两者之间存在区别的。DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。比如DOM对象能调用getContext('2d')获取上下文,而Jquery对象不行,必须转换成DOM对象才行。那么两者之间怎么进行转换呢?

  一、Jquery对象转换成DOM对象

  Jquery对象是一个数组对象,可以通过下标获取,如:

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

  var domObj = jqueryObj[0];  //通过下标得到DOM对象,jqueryObj[0]等同于jqueryObj.get(0)

  二、DOM对象转换成Jquery对象

  DOM对象只需要用$()将其包含起来即可,如:

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

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

 

  注: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>
posted @ 2016-03-18 13:41  紫霖  阅读(7031)  评论(0编辑  收藏  举报