理解jQuery对象$.html
如果要比喻jQuery和原生javascript的关系,我个人认为是自动档和手动档汽车的区别。使用原生javascript,可以知道离合器以及档位的作用;而使用jQuery,则把离合器和手动档位封装到函数,直接前进、后退或驻车即可。所以,熟练使用原生javascript,再去使用jQuery是一个很自然的步骤。从本文开始,将陆续介绍jQuery的相关内容,并给出相关的原生javascript实现。接下来,将详细介绍jQuery对象$
创新互联专注于成都网站建设、网站建设、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。
$对象
说起jQuery,最明显的标志,毫无疑问,就是美元符号$,美元符号$其实是jquery的简写。而使用$()包装的对象就是jQuery对象
与jQuery对象相对应的就是DOM对象,DOM对象其实就是DOM元素节点对象
如果直接写document,则指的是document的DOM元素对象
document.onclick = function(){ alert('dom'); }
而如果用$()包括起来,如$(document),是jQuery(document)的简写形式,则指的是jQuery对象
[注意]jQuery对象无法使用DOM对象的方法,DOM对象也无法使用jQuery对象的方法
转换
【1】DOM转jQuery对象
对于一个jQuery对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象
【2】jQuery转DOM对象
jQuery是一个类数组对象,可以通过[index]或get(index)的方法得到相应的DOM对象
console.log(document === $(document)[0]);//trueconsole.log(document === $(document).get(0));//true
共存
如果jQuery对象和DOM对象指向同一对象,绑定不同函数,则函数会按照顺序依次执行
//先弹出0,再弹出1document.onclick = function(){ alert(0); } $(document).click(function(){ alert(1); });
不报错
如果使用DOM对象,为不存在的DOM对象设置样式会报错
//Uncaught TypeError: Cannot read property 'style' of null document.getElementById('test').style.color = 'red';
而使用jQuery对象,为不存在的jQuery对象设置样式不会报错
$('#test').css('color','red');
判断存在
一般地,DOM对象在使用之前需要判断存在,防止出错
if(document.getElementById('#test')){ document.getElementById('#test').style.color = 'red'; }
对于jQuery对象来说,因为$()获取到的永远是对象,即使网页上没有该元素。所以不能采用下面方式判断
if($(#test)){ //}
应该根据获取到元素的长度来判断
if($(#test).length){ //}
或者转换成DOM对象来判断
if($(#test)[0]){ //}
网页名称:理解jQuery对象$.html
浏览地址:http://pwwzsj.com/article/pgdoch.html