jQuery对象与DOM对象

最新推荐文章于 2023-04-08 10:41:35 发布

parzival996

最新推荐文章于 2023-04-08 10:41:35 发布

阅读量107

点赞数

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

本文链接：https://blog.csdn.net/lijins1024/article/details/105644209

版权

1 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
    <div id="box">芜湖,起飞</div>
    <div>芜湖,起飞</div>
    <div>芜湖,起飞</div>

    <script src="../js/jquery-1.12.4.js"></script>
    <script>
         $(function(){
             //jQuery对象与DOM对象
             //DOM对象:通过原生js方法获取到的元素返回的对象就是DOM对象
                // document.querySelector()
                // document.getElementsByTagName()
                // document.getElementById()
           // var box =  document.querySelector("#box");
            //console.log(box);
            //注意点:box是DOM对象,不能去使用jQ方法
            //DOM对象如何去成功使用jQ的方法
           

            //jQ对象:通过$()获取到的元素返回的对象就是jQ对象
             //jQ对象是个伪数组,里面存储的是获取到的所有的DOM对象
            // console.log($("div"));
            //jQ方法只能是jQ对象来使用
           // $("div").text("肉蛋冲击")
           //jQ对象不能使用DOM对象的属性和方法
          // $("div").style.color="lime";
          })
          //小结:
          //DOM对象:
          //jQ对象:$()
          //注意点:DOM对象只能使用DOM对象自身的属性和方法，不能使用jQ对象的
          //      jQ对象只能使用自己的,不能使用DOM对象的
          //两者不能混用

           //将DOM对象转成jQ对象
            // $ 把DOM对象放到$()里，$(DOM对象)整体就是个jQ对象
           // $(box).text("肉蛋冲击")

           //将jQ对象转成DOM对象,从而可以去使用DOM对象的属性和方法
           //通过下标取出对应的DOM对象
           $("div")[0].style.backgroundColor= "lime";

           //转换:
           //DOM对象==>jQ对象 $(dom对象)
           //jQ对象==>DOM对象 通过下标取出来
    </script>
</body>

parzival996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery对象与DOM对象

<body> <div id="box">芜湖,起飞</div> <div>芜湖,起飞</div> <div>芜湖,起飞</div> <script src="../js/jquery-1.12.4.js"></script> <script&...
复制链接

扫一扫