jquery对象和DOM对象的区别介绍

下面是针对“jquery对象和DOM对象的区别介绍”的完整攻略，希望能对你有所帮助。

1. 什么是jquery对象和DOM对象?

• jQuery对象是使用jQuery库通过选择器或者DOM元素创建的一个jQuery对象，它是一个封装了一系列操作DOM元素的方法的对象，具有jQuery独特的特性；
• DOM对象是指文档对象模型（Document Object Model），即HTML或XML文档中的节点，最常用的是各种元素节点（元素节点指HTML标签）。

2.jquery对象和DOM对象的区别

2.1 创建方式不同

• jQuery对象的创建方式主要有以下几种：

$(selector);  // 选择器选择的元素，返回一个jQuery对象，可以进行 jQuery 的操作
$(DOMObject);  //传入一个dom节点，将其转换为一个 jQuery 对象
$(html);  // 传入一个HTML字符串，并创建一个jQuery对象
$(callback);  //当DOM文档加载完成之后，执行回调函数创建一个 jQuery 对象

• DOM对象的创建方式主要有以下两种：

document.getElementById(id);  //通过id获取元素，返回一个DOM对象
document.createElement(tagName);  // 创建新的DOM节点

2.2 操作方式不同

• jQuery对象的操作方式

jQuery对象是通过jQuery.jar提供了一些强大的方法来操作DOM元素。比如：

$('#id').hide();
$('#id').show();
$('#id').addClass('classNmae');
$('#id').val();
$('#id').html();
$('#id').click(function(){
  console.log('click me!');
});

• DOM对象的操作方式

DOM对象则使用DOM API提供的方法操作DOM元素。比如：

document.getElementById('id').style.display = 'none';
document.getElementById('id').style.display = 'block';
document.getElementById('id').classList.add('className');
document.getElementById('id').value;
document.getElementById('id').innerHTML;
document.getElementById('id').click = function(){
  console.log('click me!');
}

2.3 函数执行的上下文不同

• jQuery对象的函数执行上下文为jQuery对象

jQuery库中的大部分函数是链式执行的，也就是说，在元素上调用的方法返回的是 jQuery 对象本身，使得对 jQuery 对象的多次操作可以链式进行，而且不用再次查找元素。如：

$("#test1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

• DOM对象的函数执行上下文为DOM元素本身

在操作 DOM 元素时，虽然也可以使用 document.createElement 创建新节点，但使用新建的节点时，需要重新将新创建的节点插入到当前文档中。如：

var para = document.createElement("p"); // 创建新节点
var node = document.createTextNode("This is a new paragraph."); // 创建新节点文本
para.appendChild(node); // 将节点插入到文档中
var element = document.getElementById("div1"); // 找到div元素
element.appendChild(para); // 将节点插入到div元素中

3. 示例介绍

3.1 示例1

<div id="test">这是一个div元素</div>

// jquery 对象
var $test = $('#test');
$test.css('color','red').html('我是使用jQuery修改的文字');

// DOM对象
var test = document.getElementById('test');
test.style.color = 'red';
test.innerHTML = '我是使用DOM对象修改的文字';

3.2 示例2

<div>
  <p id="test">点击我</p>
</div>

// jquery 对象
$('#test').click(function(){
  $(this).css('color','red').html('我被点击了');
});

// DOM对象
document.getElementById('test').onclick = function(){
  this.style.color = 'red';
  this.innerHTML = '我被点击了';
}

通过以上两个简单的示例，可以详细的了解jquery对象和DOM对象的区别以及使用方式。