15. <script src="jquery.js" type="text/javascript"></script>
<script src="alice.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>Through the LookingGlass</h1>
<div class="author">by Lewis Carroll</div>
<div class="chapter" id="chapter1">
<h2 class="chaptertitle">
1. LookingGlass
House</h2>
<p>There was a book lying near Alice on the table, and while she sat watching the
White King (for she was still a little anxious about him, and had the ink all ready
to throw over him, in case he fainted again), she turned overthe leaves, to find
some part that she could read, <span class="spoken">"—for it's all in some
language I don't know,"</span> she said to herself.</p>
<p>It was like this.</p>
<div class="poem">
<h3 class="poemtitle">YKCOWREBBAJ</h3>
<div class="poemstanza">
<div>sevot yhtils eht dna ,gillirb sawT'</div>
<div>;ebaw eht ni elbmig dna eryg diD</div>
<div>,sevogorob eht erew ysmim llA</div>
<div>.ebargtuo shtar emom eht dnA</div>
</div>
16. </div>
<p>She puzzled over this for some time, but at last a bright thought struck her.
<span class="spoken">"Why, it's a Looking glass book, of course! And if I hold it
up to a glass, the words will all go the right way again."</span></p>
<p>This was the poem that Alice read.</p>
<div class="poem">
<h3 class="poemtitle">JABBERWOCKY</h3>
<div class="poemstanza">
<div>'Twas brillig, and the slithy toves</div>
<div>Did gyre and gimble in the wabe;</div>
<div>All mimsy were the borogoves,</div>
<div>And the mome raths outgrabe.</div>
</div>
</div>
</div>
</div>
</body>
</html>
说明 这个示例文档在服务器上的实际布局并不重要。读者可以根据自己选中的组织结构,
调整一个文件中指向另一个文件的引用。在本书多数例子中,都将使用相对路径引用文件
(../images/foo.png),不使用绝对路径(/images/foo.png)。这样,我们不需要使用
Web 服务器就能在本地运行代码。
文档中,紧随常规的 HTML 开头代码之后的是加载样式表文件的代码。在这个例子中,我们
使用了一个简单的样式表。
body {
font: 62.5% Arial, Verdana, sansserif;
22. 第 2 章 选择符——取得你想要的一切
She’s just the girl
She’s just the girl
The girl you want
—Devo,
“Girl U Want”
jQuery 利用了 CSS 和 Xpath 选择符的能力,让我们在 DOM 中快捷而轻松地获取元素或元素
组。在本章中,我们将探索一些 CSS 和 XPath 选择符,以及 jQuery 独有的自定义选择符。
此外,还将介绍一下 jQuery 的 DOM 遍历方法,这些方法为取得目标元素提供了更大的灵活
性。
2.1 DOM
jQuery 最强大的方面之一就是它能够简化 DOM 遍历任务。文档对象模型与家谱有几分类似。
同其他标记语言一样,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>
36. 为了给包含 Henry 的单元格之后的单元格添加样式,我们可以在已经写出的选择符基础上,
向其中添加.next()方法:
$(document).ready(function() {
$('the').parent().addClass('tableheading');
$('tr:not([th]):even').addClass('even');
$('tr:not([th]):odd').addClass('odd');
$('td:contains("Henry")').next().addClass('highlight');
});
在添加了 table-heading 类和将 highlight 类应用到 Category 列的单元格之后,表格的外
观如图 2-7 所示。
图 2-7
其中,.next()方法只取得最接近的下一个同辈元素。那么,要是表格中包含更多的列怎么
办呢?比如,如果还有一个 Year Published 列,那么只要所在行的 Title 列中包含 Henry,
我们希望该列中的文本也突出显示。换句话说,对于一个单元格中包含 Henry 的行,我们想
要取得该行中的其他所有单元格。通过组合不同的选择符表达式和 jQuery 方法,有如下几
种方式可以达到我们的目的。
(1) 取得包含 Henry 的单元格,然后取得该单元格的所有同辈元素(不仅仅是下一个同辈元
素)。最后添加类:
37. $('td:contains("Henry")').siblings().addClass('highlight');
(2) 取得包含 Henry 的单元格,再取得它的父元素,然后找到该元素中包含的所有编号大于
0(0 是第 1 单元格)的单元格。最后添加类:
$('td:contains("Henry")').parent().find('td:gt(0)') .addClass('highlight');
(3) 取得包含 Henry 的单元格,再取得它的父元素,找到该元素中包含的所有单元格,然后
过滤这些单元格排除包含 Henry 的那一个。最后添加类:
$('td:contains("Henry")').parent().find('td').not(':
contains("Henry")') ).addClass('highlight');
(4) 取得包含 Henry 的单元格,再取得它的父元素,找到该元素包含的子元素中的第 2 个单
元格,添加类;取消最后一次.find(),再查找该元素包含的子元素中的第 3 个单元格,添
加类:
$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight').end(
).find('td:eq(2)').addClass('highlight');
所有这些方法都会得到相同的结果,如图 2-8 所示。
图 2-8
为了代码清晰起见,以上组合选择符表达式和方法的这几种方式并不全都是我们所推荐的。
实际上,第 4 种转弯抹角的方式几乎达到了荒谬的程度。不过,通过这些方式应该能够体现
出 jQuery 的 DOM 遍历方式的确极具灵活性。
38. 3. 连缀
以上几种方式同时也示范了 jQuery 的连缀能力。 jQuery 中,
在 可以通过一行代码取得多个
元素集合并对这些元素集合执行多次操作。而且,为了获得更佳的可读性,也可以把一行代
码分成多行。例如,上一节中的第 4 种方式可以写成 7 行代码,而且每行代码都可以包含自
己的注释,但本质上它们仍然是一行代码:
$('td:contains("Henry")') //get every cell containing "Henry"
.parent() //get its parent
.find('td:eq(1)') //find inside the parent the 2nd cell
.addClass(highlight') //add the "highlight" class to that cell
.end() //revert back to the parent of the cell containing "Henry"
.find('td:eq(2)') //find inside the parent the 3rd cell
.addClass('highlight'); //add the "highlight" class to that cell
连缀就像是一口气说出一大段话——虽然效率很高,但对别人来说可能会难于理解。而将它
分开放到多行并添加明确的注释,从长远来看则可以节省更多的时间。
2.7 访问 DOM 元素
所有选择符表达式和多数 jQuery 方法都返回一个 jQuery 对象,而这通常都是我们所希望的,
因为 jQuery 对象能够提供隐式迭代和连缀能力。
尽管如此,我们仍然有需要在代码中直接访问 DOM 元素的时候。例如,可能需要为另一个
JavaScript 库提供一组元素的结果集合。或者,可能不得不访问某个元素的标签名。对于
这些少见但合理的情形,jQuery 提供了.get()方法。要访问 jQuery 对象引用的第 1 个 DOM
元素,可以使用.get(0)。如果需要在循环中使用 DOM 元素,那么应该使用.get(index)。因
而,如果想知道带有 id="my-element"属性的元素的标签名,应该使用如下代码:
var myTag = $('#myelement').get(0).tagName;
为了进一步简化这些代码,jQuery 还为.get()方法提供了一种简写方式。比如,可以将
$('#my-element').get(0)简写为$('#my-element')[0],也就是说,可以在选择符后面直接
使用方括号。 显然, 这种语法与访问 DOM 元素数组很相似, 而使用方括号就好像剥掉 jQuery
的包装并直接取得这些元素。
2.8 小结
通过本章介绍的技术, 应该掌握了如何使用 CSS 选择符为嵌套列表中的顶级和非顶级项分别
添加样式,如何使用 XPath 属性选择符为不同类型的链接应用不同的样式,如何使用自定义