javascript框架比较（二）

DOM 遍历

　　根据 ID、元素类型或 CSS 类名查找元素非常有用，但如何根据元素在 DOM 树中的位置执行查找呢？换而言之，根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如，看一下清单 1 的 HTML 片段。

清单 1. HTML 片段（一个 HTML 表）

<table>　
　　<thead>　
　　　　<tr>　
　　　　　　<th>Name</th>　
　　　　　　<th>Email　Address</th>　
　　　　　　<th>Actions</th>　
　　　　</tr>　
　　</thead>　
　　<tbody>　
　　　　<tr　id="row-001">　
　　　　　　<td>Joe　Lennon</td>　
　　　　　　<td>joe@joelennon.ie</td>　
　　　　　　<td><a　href="#">Edit</a> 　
　　　　　　　　<a　href="#">Delete</a></td>　
　　　　</tr>　
　　　　<tr　id="row-002">　
　　　　　　<td>Jill　Mac　Sweeney</td>　
　　　　　　<td>jill@example.com</td>　
　　　　　　<td><a　href="#">Edit</a> 　
　　　　　　　　<a　href="#">Delete</a></td>　
　　　　</tr>　
　　</tbody>　
</table>　

　　清单 1 用缩进表示每个元素在 DOM 节点树中的位置。在该例中，table 元素是根元素，它有两个子节点，thead 和 tbody。thead 元素只有一个子节点 tr，后者有三个子节点 — 所有 th 元素。tbody 元素有两个子节点，均为 tr 元素，每个 tr 元素又有三个子元素。每行的第三个子元素又有两个子节点，都是 a （锚点）标记。

　　如您所知，可以使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中，有两个元素具有 ID — 均为 tr（表行）元素，ID 分别为 row-001 和 row-002。要使用 Prototype 选取第一个 tr 元素，需要用到以下代码：

var　theRow　=　$('row-001');

　　在前面的小节中，您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中，可以使用以下语法选取所有 td 元素。

var　allCells　=　$('td');

　　这段代码的问题是它将返回 DOM 中的所有 td 元素。但是，如果只希望获取 ID 为 row-001 的行中的 td 元素，怎么办呢？这时就该使用 DOM 遍历函数了。首先，使用 Prototype 选取 ID 为 row-001 的 tr 元素的所有子节点：

var　firstRowCells　=　theRow.childElements();

　　这将返回 theRow 变量（之前已设为 ID 为 row-001 的元素）的所有子元素的数组。

　　下一步，假设只希望取得该行的第一个子节点，在本例中，是内容为 “Joe Lennon” 的 td 元素。应使用以下语句：

var　firstRowFirstCell　=　theRow.down();

　　很简单吧？这种特别的用法等价于：

var　firstRowFirstCell　=　theRow.childElements()[0];

　　也可以表示为：

var　firstRowFirstCell　=　theRow.down(0);

　　JavaScript 索引值从零（0）开始，所以以上语句实际上是告诉 JavaScript 选取第一个子元素。要选取第二个子元素（包含 joe@joelennon.ie 邮件地址的单元格），可以使用下面的语句：

var　firstRowSecondCell　=　theRow.down(1);

　　或者，可以在 DOM 兄弟节点间导航。本例中，第二个单元格是第一个单元格的下一个兄弟节点，因此可以使用以下语句：

var　firstRowSecondCell　=　firstRowFirstCell.next();

　　这与 down() 函数使用了相同的方式，因此可以使用下面的语句选择第三个单元格：

var　firstRowThirdCell　=　firstRowFirstCell.next(1);

　　除了使用索引查找特定节点外，Prototype 还允许使用 CSS 选择器语法。考虑清单 1 的例子，找到包含 Jill Mac Sweeney 的明细的行的第二个链接（“Delete” 链接）：

var　secondRowSecondLink　=　$('row-002').down('a',　1);

　　在本例中，可以使用美元符号函数找到 ID 为 row-002 的元素，然后向下遍历 DOM，直到找到下一个后代 a（锚点）元素。

　　有些框架可以使用 “菊花链” 遍历函数，表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是：

var　secondRowSecondLink　=　$('row-002').down('a').next();

　　考虑下面的例子：

var　domTraversal　=　$('row-001').down().up().next().previous();

　　如您所见，菊花链方式可以将几个 DOM 遍历语句连接起来。实际上，上例实际上选择 tr 元素 row-001，因此菊花链刚好回到了起点！

　　DOM 操作

　　上文中，您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而，要想改变 Web 页面中的特定元素的外观或内容，需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐，幸运的是，大多数 JavaScript 框架提供了有用的函数，简化了这些操作。

　　假设您有一个 div 元素，其 id 是 the-box：

<div　id="the-box">Message　goes　here</div>

　　如果要用 jQuery 改变 “Message goes here” 文本，方法如下：

$('the-box').html('This　is　the　new　message!');

　　实际上，可以在函数内部使用 HTML 代码，它将由浏览器解析。例如：

$('the-box').html('This　is　the　<strong>new</strong>　message!');

　　在本例中，div 元素的内容在 DOM 中呈现为：

<div　id="the-box">This　is　the　<strong>new</strong>　message!</div>

　　当然，在一些情况下您需要使用特殊字符，如大于号或小于号。可以不指定专门的 HTML 实体代码，而是使用 jQuery 的 text 函数：

$('the-box').text('300　>　200');

　　这将把 div 元素更新为以下代码：

<div　id="the-box">300　>　200</div>

　　在上面的例子中，原有内容被新内容取代。如果只是想把消息添加到文本的后面，该怎么做呢？幸好，jQuery 提供了专门的 append 函数：

$('the-box').append(',　here　goes　message');

　　将这个函数应用到初始的 div 元素，div 元素的内容就变成下面这样：

<div　id="the-box">Message　goes　here,　here　goes　message</div>

　　除了附加以外，您还可以 “前置” 内容，即在已有内容的前面而不是末尾插入新内容。另外，jQuery 提供了在给定元素之外插入内容的函数，不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。

　　除了 DOM 操作函数，JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如，假设您有一个表，您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类，并且您想要将这个类动态添加到行中。在 YUI 中，可以使用以下代码检查行中是否已经具有 hover 类，如果已经有的话，则删除它，如果没有的话，则添加它：

if(row.hasClass('hover'))　row.removeClass('hover');　else　row.addClass('hover');

　　而且，大多数 JavaScript 框架都有内置的 CSS 操作函数。

该文章转摘自-网页制作大宝库(www.dabaoku.com) - 原文链接：http://www.dabaoku.com/jiaocheng/biancheng/javascript/201009136832_2.shtml

javascript框架比较（二）相关推荐

你可能不需要一个 JavaScript 框架（二）
解决方案 Solution 你需要的,还是 JavaScript 和 Web API.我希望阁下可以看看 Web API (detailed),快速浏览一下然后回到本文. What you need ...
一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...
dva处理_关于dva框架的二三事
关于dva框架的二三事发布时间:2018-06-24 15:31, 浏览次数:618 , 标签: dva 前言我开通了一个微信公共号"王和阳的航海日志",在上面记录着自己的学习 ...
JavaScript专题（二）：深入理解iframe
原文地址为: JavaScript专题(二):深入理解iframe 一目的 iframe是网页布局中重要的元素,是解决一些常见前端问题的必修课,而iframe总是让人捉摸不透,不好掌握.关于ifra ...
python3 scrapy框架,Python3爬虫（十八） Scrapy框架（二）
对Scrapy框架(一)的补充 Infi-chu: Scrapy优点: 提供了内置的 HTTP 缓存 ,以加速本地开发 . 提供了自动节流调节机制,而且具有遵守 robots.txt 的设置的能力. ...
使用 Vanilla JavaScript 框架创建一个简单的天气应用
大家好,不知道大家听说过 Vanilla JavaScript 这款框架吗?最近我在浏览国外的一些技术网站时,这个词出现的频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScrip ...
JavaScript 框架之jQuery
目录一.JavaScript 框架之jQuery 二.JavaScript - 测试 jQuery 引用 jQuery jQuery 描述测试 jQuery 一.JavaScript 框架之jQu ...

javascript框架比较（二）

javascript框架比较（二）相关推荐

最新文章

热门文章