(3)选择元素——(2)文档对象模型(The Document Object Model)

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对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
辽B代驾管理系统对代驾订单管理、用户咨询管理、代驾订单评价管理、代驾订单投诉管理、字典管理、论坛管理、公告管理、新闻信息管理、司机管理、用户管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识,加上自己在学校课堂上学习的知识,决定开发系统选择小程序模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问,采用的主流的Java语言这种面向对象的语言进行辽B代驾管理系统程序的开发,在数据库的选择上面,选择功能强大的Mysql数据库进行数据的存放操作。辽B代驾管理系统的开发让用户查看代驾订单信息变得容易,让管理员高效管理代驾订单信息。 辽B代驾管理系统具有管理员角色,用户角色,这几个操作权限。 辽B代驾管理系统针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理代驾订单信息,管理公告信息等内容。 辽B代驾管理系统针对用户设置的功能有:查看并修改个人信息,查看代驾订单信息,查看公告信息等内容。 辽B代驾管理系统针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理代驾订单信息,管理公告信息等内容。 辽B代驾管理系统针对用户设置的功能有:查看并修改个人信息,查看代驾订单信息,查看公告信息等内容。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填写并提交这二者数据之后,管理员就可以进入系统后台功能操作区。项目管理页面提供的功能操作有:查看代驾订单,删除代驾订单操作,新增代驾订单操作,修改代驾订单操作。公告信息管理页面提供的功能操作有:新增公告,修改公告,删除公告操作。公告类型管理页面显示所有公告类型,在此页面既可以让管理员添加新的公告信息类型,也能对已有的公告类型信息执行编辑更新,失效的公告类型信息也能让管理员快速删除。新闻管理页面,此页面提供给管理员的功能有:新增新闻,修改新闻,删除新闻。新闻类型管理页面,此页面提供给管理员的功能有:新增新闻类型,修改新闻类型,删除新闻类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值