One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The Document Object Model serves as the interface between JavaScript and a web page; it provides a representation of the source HTML as a network of objects rather than as plain text.

jquery最有力的能力之一是它使选择DOM结构中元素的变的容易的能力。文档对象模型作为js和网页的接口存在，他提供了基础html作为对象网而不是简单的文本的存在。

This network takes the form of a "family tree" of elements on the page. When we refer to the relationships that elements have with one another, we use the same terminology that we use when referring to family relationships: parents, children, and so on. A simple example can help us understand how the family tree metaphor applies to a document, as follows:

<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>

网状结构在网页上表现为家庭图谱的形式。当我们涉及到一个元素和其他元素的关系时，我们使用实际到家庭关系的术语：双亲，子代等等。一个简单的例子可以帮助我们理解家庭图谱如何映射到文档中的，如下：
<html>

<head>

<title>the title</title>

</head>

<body>

<div>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is yet another paragraph.</p>

</div>

</body>

</html>

Here, <html>is the ancestorof all the other elements; in other words, all the other elements are descendantsof <html>. The <head>and <body>elements are not only descendants, but childrenof <html>, as well. Likewise, in addition to being the ancestor of <head>and <body>, <html>is also their parent. The <p>elements are children (and descendants) of <div>, descendants of <body>and <html>, and siblingsof each other, as shown in the following diagram:


在这里，<html>是所有其他元素的祖先，换句话说，所有其他元素是<html>的后代。 <head>和<body>元素不仅仅是后代元素，还是<html>的子代元素。同样的，<html>不仅仅是他们的祖先元素，也是他们的父代。<p>元素是<div>的子代元素也是后代元素，也是<body>和<html>的后代元素，也是其他<p>的兄弟元素。正如下面的图表展示的那样。



To help visualize the family tree structure of the DOM, you can use a number of software tools, such as the Firebug plugin for Firefox, or the Web Inspector in Safari or Chrome.
为了帮助让DOM结构的家庭书结构变的更加形象，你可以使用一些软件工具，比如firefox上的firebug插件，或者Safari或者Chrome上的web探测器。
With this tree of elements at our disposal, we'll be able to use jQuery to efficiently locate any set of elements on the page. Our tools to achieve this are jQuery selectors and traversal methods.
通过我们使用的元素树状图，我们可以使用jquery去有效的定位网页上的任何元素。我们实现这一点的工具就是jquery选择器和遍历方法。
An important point to note, before we begin, is that the resulting set of elements from selectors and methods is always wrapped in a jQuery object. These jQuery objects are very easy to work with when we want to actually do something with the things that we find on a page. We can easily bind eventsto these objects and add slick effectsto them, as well as chainmultiple modifications or effects together. Nevertheless, jQuery objects are different from regular DOM elements or node lists, and as such do not necessarily provide the same methods and properties for some tasks. In the final part of this chapter, therefore, we will look at ways to directly access the DOM elements that are wrapped in a jQuery object.
在我们开始前，一个需要指出的重要一点是选择器和方法得到的结果中石碑jquery对象包围。当我们想实际在我们从网页上查找到的元素上做一些事情的时候，使用这些jquery对象将是很容易的。我们可以很容易的在这些对象上绑定事件，为他们添加流畅的影响，同时一起链状的修改影响他们。jquery对象与常规的DOM对象或者节点列表是不相同的，并没有必要的为一些任务添加相同的方法和属性。因此在这一章节的最后部分，我们将看一下直接接触被jquery对象包围着的DOM对象。

（3）选择元素——（2）文档对象模型（The Document Object Model）的更多相关文章

  1. JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素

    Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定 ...

  2. DOM （文档对象模型(Document Object Model)）

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  3. DOM （文档对象模型(Document Object Model)

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

  4. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  5. DOM---文档对象模型(Document Object Model)的基本使用

    一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...

  6. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  7. Document Object Model

    什么是DOM W3C制定的书写HTML分析器的标准接口规范 全称 Document Object Model 文档对象模型DOM为HTML文档提供的一个API(接口) 可以操作HTML文档 <! ...

  8. JS--dom对象：document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  9. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. Cocos2d-X 动作展示《一》

    因为Cocos2d-X中的动作较多,我将全部的动作制作成了一个滚动视图.每一个滚动视图上都有动作名,单击滚动视图就能够展示对应的动作 程序效果图: 使用滚动视图实现动作切换 动作展示 程序代码: 首先 ...

  2. 如何最简单的优化MySql

    1.创建索引,一定要根据实际情况来创建,如果是连接表查询,如一个主帐号连接多个子帐号,可以考虑两个或三个以上的多索引: 2.合理利用时间排序,由于大多数表格用时间来排序,数据量相当大的时候,在时间列上 ...

  3. 9．PHP 教程_PHP运算符

    PHP 运算符 在 PHP 中,赋值运算符 = 用于给变量赋值. 在 PHP 中,算术运算符 + 用于把值加在一起. PHP 算术运算符 运算符 名称 描述 实例 结果 x + y 加 x 和 y 的 ...

  4. feof()和EOF的用法（转载）

    查看 stdio.h 可以看到如下定义: #define  EOF  (-1) #define  _IOEOF  0x0010 #define  feof(_stream)  ((_stream)-& ...

  5. 从Xib文件加载UIView的5种方式

    在不同的Xib文件中最容易维护的是定义的视图,因此对于从Xib文件中加载UIView来说一个方便的流程是非常重要. 在过去的几年里我发现唯一易于管理创建和维护视图(或者任何界面元素,通常会更多)方式就 ...

  6. android 之Fragment（官网资料翻译）

    原文地址: http://blog.csdn.net/lilu_leo/article/details/7671533 ***************************  正文分割线 ***** ...

  7. Qt Creator needs a compiler set up to build. Configure a compiler in the kit options - Stack Overflow

    Qt Creator needs a compiler set up to build. Configure a compiler in the kit options - Stack Overflo ...

  8. Scrambled Polygon(斜率排序)

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7799   Accepted: 3707 ...

  9. poj 2155

    题目链接 二维树状数组 给出矩阵左上角和右下角坐标,矩阵里的元素 1变0 ,0 变1,然后给出询问,问某个点是多少. 树状数组下标不能为0 二维的每次更新都是从(1,1)到(x,y) 要更新(x1,y ...

  10. cocos2d基础篇笔记四

    1.//有两种集合 //第一种是array 特点:插入,删除效率低,可是查找效率高 //另外一种是list  特点:插入,删除效率高,可是查找效率低 //分析这个游戏: 插入的时候:怪物,射弹出现时, ...