dom对象与jq对象的区别

发布时间:2019-06-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了dom对象与jq对象的区别脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

作为一名刚出来的前端菜鸟,有时候jq对象和dom对象概念理解的不是很深入。空闲时间写点东西来理解一下。

  1. 代码如下

<div id="dome">
    <div class="b" str="1">1111</div>
    <div class="b" str="2">222</div>
    <div class="b" str="2">333</div>
    <div class="b" str="2">444</div>
    <div class="b" str="1">555</div>
</div>
<script>
    $(function(){
        $("div[class='b'][str='1']").css("background","red");
         $(".b").eq(0).attr("str");  //可以获取到这个对象的属性str的值。
         $(".b")[0].attr("str");    //报错
    })
</script>
  $(".b").eq(0)获取的对象如下

dom对象与jq对象的区别

  $(".b")[0]获取的对象如下

dom对象与jq对象的区别

  • $(".b").eq(0)$(".b")[0]获取的是同一个对象,为什么$(".b")[0].attr("str")会报错jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,原来jQuery 获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑,为什么${”#Element”}不能直接 innerHTML,这就是原因所在。*

dom对象正确获取属性:$(".b")[0].style.color
dom对象正确获取自定义属性:$(".b")[0].attributes['str'].nodeValue

可以了解dom对象和jq对象的转换

脚本宝典总结

以上是脚本宝典为你收集整理的dom对象与jq对象的区别全部内容,希望文章能够帮你解决dom对象与jq对象的区别所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。