jQuery对象与DOM对象

前言

编写任何 JavaScript 程序我们要首先获得对象，jQuery 选择器能彻底改变我们平时获取对象的方式，可以获取几乎任何语义的对象，比如“拥有 title 属性并且值中包含 test 的元素”，完成这些工作只需要编写一个 jQuery 选择器字符串，学习 jQuery 选择器是学习 jQuery 最重要的一步。

Dom 对象和 jQuery 包装集

无论是在写程序还是看 API 文档，我们要时刻注意区分 Dom 对象和 jQuery 包装集。

1. Dom 对象

在传统的 JavaScript 开发中，我们都是首先获取 Dom 对象，比如：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

我们经常使用document.getElementById方法根据 id 获取单个 Dom 对象，或者使用document.getElementsByTagName方法根据 HTML 标签名获取 Dom 对象集合。

另外在事件函数中，可以通过在方法函数中使用this引用事件触发对象（但是在多播事件函数中 IE6 存在问题），或者使用event对象的target（Firefox）或srcElement（IE6）获取到引发事件的 Dom 对象。

注意我们这里获取到的都是 Dom 对象,Dom 对象也有不同的类型比如input,div,span等。Dom 对象只有有限的属性和方法。

2. jQuery 包装集

jQuery 包装集可以说是 Dom 对象的扩充。在 jQuery 的世界中将所有的对象，无论是一个还是一组，都封装成一个 jQuery 包装集，比如获取包含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

jQuery 包装集都是作为一个对象一起调用的。jQuery 包装集拥有丰富的属性和方法。

3. Dom 对象与 jQuery 对象的转换

（1）Dom 转 jQuery 包装集

如果要使用 jQuery 提供的函数，就要首先构造 jQuery 包装集。我们可以使用本文即将介绍的 jQuery 选择器直接构造 jQuery 包装集，比如：

$("#testDiv");

上面语句构造的包装集只含有一个 id 是 testDiv 的元素。

或者我们已经获取了一个 Dom 元素,比如:

var div = document.getElementById("testDiv");

上面的代码中 div 是一个 Dom 元素, 我们可以将 Dom 元素转换成 jQuery 包装集:

var domToJQueryObject = $(div);

（2）jQuery 包装集转 Dom 对象

jQuery 包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:

var domObject = $("#testDiv")[0];

注意, 通过索引器返回的不再是 jQuery 包装集, 而是一个 Dom 对象!

jQuery 包装集的某些遍历方法,比如 each()中, 可以传递遍历函数, 在遍历函数中的 this 也是 Dom 元素,比如:

$("#testDiv").each(function() {
  alert(this)
});

如果我们要使用 jQuery 的方法操作 Dom 对象,怎么办? 用上面介绍过的转换方法即可:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

小结: 先让大家明确 Dom 对象和 jQuery 包装集的概念,将极大的加快我们的学习速度。只要能够区分这两者, 就能够在写程序时变得清清楚楚。

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>  <script type="text/javascript"> window.onload = function(){ // 通过原生JS语法获取id为php1的元素p var p = document.getElementById('php1'); // 将元素p在html中内容改变 p.innerHTML = 'P1：php中文网是您自学php的正确途径'; // 将元素p的内容颜色改为红色 p.style.color = 'red'; } </script>  <script type="text/javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为php2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $('#php2'); $p.html('P2：php中文网是您自学php的正确途径').css('color','red'); }); </script> </head> <body> <p id="php1"></p> <p id="php2"></p> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠