（MC嘉）jQueryDOM节点操作

 

                                        jQueryDOM节点操作

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：曾维嘉

撰写时间：2020年05月03日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.0 JavaScript中的DOM对象

       

        例如：document.getElementById("box");DOM对象

       

        1.1 jQuery对象

       

            在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象

            $(".box");//jQuery对象

       

        1.2 DOM对象与jQuery对象的区别

       

            1.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

            2.jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

              jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法

       

        js中window.onload

        window.onload = function () {

            通过原生的JS代码获取DOM对象

            var box = document.getElementById("box");

            console.log(box);//js中的DOM对象

            通过对象的属性修改对象的样式

            box.style.width = "400px";

            box.innerHTML = "这是一个JS对象";

        }

        jQuery中页面加载事件

        $(document).ready(function () {

           

            * 通过jQuery语法获取id为jqBox的元素获得一个jQuery对象

            * 调用该对象的html()方法进行更改内容

            * 调用该对象的css()方法进行更改颜色样式

            

            var $box = $("#jqBox");//jQuery中的对象

            console.log($box);

            $box.css("width", "400px");

            $box.html("这是一个jQuery对象");

 

            链式写法

            $("#jqBox").css("width", "400px").html("这是一个jQuery对象");

        })

        JS对象只能调用JS中提供的方法和属性，不能使用jquery中的方法和属性

        jquery对象只能使用jQuery的方法和属性，不能使用JS提供的方法和属性

 

            通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

                 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

                 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，

                 而不需要我们具体知道哪个DOM节点有那些方法，

                 也不需要关心不同浏览器的兼容性问题，

                 我们通过jQuery提供的API进行开发，代码也会更加精短。

       

        1.3 DOM对象与jQuery对象之间的转换  //JS对象包含 DOM对象

      

            jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，

            为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

            我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

            在很多场景中，我们需要jQuery与DOM能够相互的转换，

            它们都是可以操作的DOM元素，jQuery是一个类数组对象，

            而DOM对象就是一个单独的DOM元素。

 

            相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，

            通过传递不同的参数而产生不同的作用。

            如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

            通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

       

            1.DOM对象转换为jQuery对象

                var box = document.getElementById("box");//DOM对象

                $(box);//jQuery对象

            2.jQuery对象转换为一个DOM对象

                var $divs=$("div");//jQuery对象  divs中包含所有的$divs元素

                var div=$divs[0];//div为DOM对象

                //使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

                var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象