用#id取得的jQuery对象与document.getElementById('id')所得到的DOM对象区别
发布在jQuery2015年8月7日view:3073jQuery
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

var $cr=$('#cr');//jQuery对象

var cr=document.getElementById('cr');//DOM对象

如果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]**

enter image description here

如果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对象

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

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

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

方法一:

$(function(){
   var $cr=$('#cr');//jQuery对象
   var cr=$cr[0];//DOM对象,或者$cr.get(0)
   $cr.click(function () {
       if(cr.checked){//DOM方式判断
       alert('感谢你的支持!你可以继续操作')
        }
    })
})

方法二:

$(function(){
var $cr=$('#cr');//jQuery对象
$cr.click(function () {
if($cr.is(':checked')){//jQuery方式判断
alert('感谢你的支持!你可以继续操作')
        }
    })
})
评论
发表评论
暂无评论
WRITTEN BY
bqlimiy
每天进步一点点
TA的新浪微博
PUBLISHED IN

我的收藏