jQuery对象与DOM对象

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年06月24日 星期一

                 jQuery对象与DOM对象 

jQuery对象和DOM对象是不一样的，初次学习jQuery函数库要注意的一点。可有时分不清哪些是jQuery对象，哪些是DOM对象怎么办？

下面通过例子简单区分jQuery对象和DOM对象:

我们要获取页面上这个ID为text的元素，然后给这个文本节点增添一段文字“这是一段增添文字”，并且让文字改变颜色。

一般通过标准的JavaScript处理：

var q =
document.getElementById(‘test’);

q.innerHTML
= “这是一段增添文字”;

q.style.color
= "white;

通过原生DOM模型提供的document.getElementById(“test”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

而jQuery的处理：var q = $(“#text”);

q.html(‘这是一段增添文字’).css(‘color’, white);

通过KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲test')方法会得到一个q的…p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。在方法中：

 window.onload = function () {

 var p = document.getElementById('test');// 通过原生JS语法获取id为test的元素p                 

  p.innerHTML = "<a href='#'>这是一段增添文字</a>";// 将元素p在html中内容改变            

  p.style.color = white;// 将元素p的内容颜色改为白色

    }

jQuery对象：

   $(document).ready(function () {           

        $p.html('这是一段增添文字').css('color', white);

        var $p = $('#test');

        $p.append("<a href='#'>a标签</a>").children().html("标签标签").css({ 'color': 'red', 'font-size': 20 });

    });

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

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

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

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：(1) 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

(2) 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

在平常的代码中：jQuery与DOM能够相互的转换，都可以操作DOM元素，jQuery是一个类数组，而DOMd对象就是一个单独的DOM元素。哪怎么将两者进行转化？

JavaScript代码：

var $div = $('div') //jQuery对象

    var div = $div[0] == $div.get(0)//转化成DOM对象

    div.style.color = 'red' //操作dom对象的属性

因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0。

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

    var $div = $('div') //jQuery对象

    var div = $div.get(0) //通过get方法，转化成DOM对象

    div.style.color = 'red' //操作dom对象的属性