用#id取得的jQuery对象与document.getElementByIdid所得到的DOM对象区别

转载于： 贤心博客

用#id作为选择符取得的是jQuery对象而并非是document.getElementById(’id’)所得到的DOM对象，两者并不等价。

var $cr=$('#cr');//jQuery对象var cr=document.getElementById('cr');//DOM对象
1
2
3

代码laycode - v1.1

如果console.log($cr);浏览器控制台输出的结果如下：

[div#cr, context: document, selector: ”#cr”, constructor: function, init: function, jquery: “1.8.2”…]

展开结果：

**0: div#cr

context: document

length: 1

selector: ”#cr”

proto: Object[0]**

如果console.log(cr);浏览器控制台输出的结果如下：

div#cr

原来：用#id作为选择符取得的是jQuery对象，被jQuery封装了很多方法。

jQuery对象转换成DOM对象

方法一：jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。

$cr[0]

得到的就是DOM对象：div#cr

方法二：是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。

$cr.get(0)

得到的就是DOM对象：div#cr

DOM对象转成jQuery对象

对于一个DOM对象，只需用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

var cr=document.getElementById('cr');//DOM对象var $cr=$(cr);//jQuery对象
1
2
3

代码laycode - v1.1

强调一下：DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM。

例子：jQuery对象和DOM对象相互转换

<input type="checkbox" id="cr"><label for="cr">我已经阅读了上面制度</label>
1

代码laycode - v1.1

方法一：

$(function(){   var $cr=$('#cr');//jQuery对象   var cr=$cr[0];//DOM对象，或者$cr.get(0)   $cr.click(function () {       if(cr.checked){//DOM方式判断       alert('感谢你的支持！你可以继续操作')        }    })})
1
2
3
4
5
6
7
8
9
10

代码laycode - v1.1

方法二：

$(function(){var $cr=$('#cr');//jQuery对象$cr.click(function () {if($cr.is(':checked')){//jQuery方式判断alert('感谢你的支持！你可以继续操作')        }    })})