理解JQuery对象$.html

来源:互联网 发布:淘宝买烟怎么搜索 编辑:程序博客网 时间:2024/03/28 16:33

$对象

说起JQuery,最明显的标志,毫无疑问是$$其实是jQuery的缩写。而是用$()包装的对象就是jQuery对象

与jQuery对象相应的就是DOM对象,DOM对象其实就是DOM元素节点对象

如果直接写document,则指的是document的DOM元素对象

document.onclick = function(){     alert("dom")}

而如果用$()包裹起来,如$(document),则是jQuery(document)的简写形式,则指的是jQuery对象

<script src="jquery-3.1.0.js"></script>    <script>    console.log(jQuery(document));//[document]    console.log($(document));//[document]    console.log(document);//#document</script>

需要注意的是jQuery对象无法操作DOM对象,DOM对象也无法操作jQuery对象的方法

<script src="jquery-3.1.0.js"></script>    <script>    //无反应    $(document).onclick = function(){        alert(0);    };    //Uncaught TypeError: document.click is not a function    document.click(function(){        alert(1);    });</script>

转换
1:对于一个jQuery对象,只需要用$把DOM对象包裹起来就可以得到一个jQuery对象
2:由于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 nulldocument.getElementById('test').style.color = 'red';

而是用jQuery对象,为不存在的对象设置样式不会报错.

$("#container").css({'color','red'});

判断存在

一般的DOM对象在使用之前要判断存在,防止出错;

if(document.getElementById("#container")){    document.getElementById("#container"),style.color = "red";}

对于JQuery对象来说,因为$()回去的永远是对象,即使网页上么有该元素。所以是不能用下面的方式去判断

if($("#container")){    //code}

应该获取元素的长度来判断

if($("#container").length){    //code}

或者是转换DOM对象来判断

if($("#container")[0]){    //code}

最后注意的是jQuery的版本问题,jQuery从2.0版本开始不再支持IE8,且去掉了一些过时的API,从而使的体积更小,运行速率更高,如果说要兼容IE8浏览器的需求,请使用1.*的版本。

0 0
原创粉丝点击