理解JQuery对象$.html

最新推荐文章于 2023-06-16 15:43:17 发布

arthurwanggang

最新推荐文章于 2023-06-16 15:43:17 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： jquery

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文详细阐述了jQuery对象与DOM对象的区别，包括如何创建、转换及判断元素的存在性，并介绍了两者在事件绑定上的共存特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$对象

说起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]);//true
console.log(document === $(document).get(0));//true

共存

如果JQuery对象和DOM对象指向同一个对象，绑定不同的函数，则函数会依次按照顺序执行。

//先弹出0 在弹出1
document.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对象，为不存在的对象设置样式不会报错.

$("#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.*的版本。