Jquery 系列（2）选择元素

Jquery基础学习

jQuery利用css选择符的能力，能够在DOM中快捷而轻松地获取元素。

主要内容如下：

介绍DOM树
如何通过CSS选择符在页中查找元素
扩展jQuery标准的CSS选择符
选择页面元素更灵活的DOM遍历方法

理解DOM树

DOM（Document Object Model）文档对象模型，可以充当JavaScript和网页之间的接口。jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素。DOM中各元素的关系，同数据结构中的二叉树的称呼非常相近。元素之间的关系包括祖先元素，父元素，子元素，同辈元素。

 1 <!DOCTYPE html>
 2     <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5      <title>The Title</title>
 6     </head>
 7     <body>
 8         <div>
 9             <p> This is a paragraph.</p>
10             <p> This is  another paragraph.</p>
11             <p> This is  yet another paragraph.</p>
12         </div> 
13     </body>
14     </html>

为了把Dom更好的表现出来，可以使用很多工具，如FireFox FireBug ……

2、使用$()函数

我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中，通过jQuery对象实际地操作这些元素会非常简单，可以轻松地为jQuery对象绑定事件，添加漂亮的效果。也可以将多重修改和效果通过 jQuery对象联系在一起。

创建jQuery就要使用$()函数。

选择符	CSS	jQuery	说明
标签名	P{}	$('P')	取得文档中所有的段落
ID	#some-id	$('#some-id')	取文档中id='some-id'的元素
类	.someClass	$('.someClass')	取得文档中所有的类为someClass的元素

3 CSS选择符信息

jQuery支持css规范1至规范3中的几乎所有的选择符。具体内容可以参考W3C 网站

http://www.w3.org/Style/CSS/specs

开发者在增强自己的网站时，不必担心浏览器支不支持的问题，只要为浏览器启用JavaScript就没有问题。

NOTICE：

负责任的JQuery 开发者应该在编写自己的程序时，始终坚持渐近增强和平稳退化的理念，做到在禁用JavaScript时，页面仍然能够与启用javaScript时一样准确地呈现。

关于渐近增强可以参考

https://en.wikipedia.org/wiki/Progressive_enhancement

EG：

HTML code

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>Selected Shakespeare Plays</title>
 5     <link rel="stylesheet" href="Css/02.css" type="text/css"/>
 6     <script src="Jquery/jquery-1.11.3.js"></script>
 7     <script src="Jquery/ClientJS/02.js"></script>
 8 </head>
 9 <body>
10 <div id="container">
11     <h2>Selected Shakespeare Plays</h2>
12     <ul id="selected-plays" class="clear-after">
13         <li>
14             Comedies
15             <ul>
16                 <li>
17                     <a href="/asyoulikeit/">As You Like It</a>
18                 </li>
19                 <li>All's Well That Ends Well</li>
20                 <li>A Midsummer Night's Dream</li>
21                 <li>Twelfth Night</li>
22             </ul>
23         </li>
24         <li>
25             Tragedies
26             <ul>
27                 <li>
28                    <a href="hamlet.pdf">Hamlet</a>
29                 </li>
30                 <li>Macbeth</li>
31                <li>Romeo and Juliet</li>
32             </ul>
33         </li>
34         <li>
35             Histories
36             <ul>
37                <li>
38                     Henry IV (<a href="mailto:henryiv@king.co.uk">
39                         email
40                     </a>)
41                     <ul>
42                         <li>Part I</li>
43                         <li>Part II</li>
44                     </ul>
45                 </li>
46                 <li>
47                     <a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a>
48                 </li>
49                 <li>Richard II</li>
50             </ul>
51         </li>
52     </ul>
53 </div>
54 </body>

JavaScript code

Jquery/ClientJS/02.js

1 $(document).ready(
2   function () 
3   {
4     $('#selected-plays >li').addClass('horizontal');
5     $('#selected-plays li:not(.horizontal)').addClass('sub-level');
6   }
7  );

CSS code

 1 .horizontal {
 2 
 3     float:left;
 4 
 5     list-style:none;
 6
 7     margin:10px;
 8 
 9 }
10 
11 .sub-level {
12 
13   background: #ccc;
14 
15 }

详解：

上面的HTML code 中用到的是ul网页嵌套的无序列表。

父节点ul用到的是【id="selected-plays"】

li节点都没有用到任何类，故事的开头就是这样的，什么都没有。没有样式，没有外观接下来我们希望用让最外面的li(就是内容为Comedies、Tragedies、Histories) 包在ul外面的哪个TT给这个TT加上样式（horizontal）

1 {
2 
3 float:left;
4 
5 list-style:none;
6 
7 margin:10px;
8 
9 }

$(document).ready()中的代码将会在DOM加载完成后，立即执行。

$('#selected-plays >li').addClass('horizontal');

使用了子元素组合符（>）,将horizontal类添加到位于顶级元素项中。

具体的含义是查找ID=【selected-plays】元素（#selected-plays）的子元素（ >）中所有的列表项（li）应用后列表项被水平放置。接下来设置其它列表的样式。这里使用的是否定伪类选择符来识别没有horizontal类的所有列表项。$('#selected-plays li:not(.horizontal)').addClass('sub-level');

这一次取得每一个列表项（<li>）;是ID为selected-plays的元素（#selected-plays）的后代元素

没有horizontal类（:not(horizontal)）

在没有列表项元素添加了sub-level类之后，它们的背景颜色变为在样式表规则定义的浅灰色

1 .sub-level {
2 
3   background: #ccc;
4 
5 }

属性选择符

属性选择符能过ＨＴＭＬ元素的属性选择元素，例如链接的title属性或图像的alt属性。例如选择带有alt属性的所有图像元素

$('img[alt]')

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法

^表示值在字符串的开始

$表示值在字符串的结尾

*表示要匹配的值可以出现在字符串的任意位置

!表示对值取反。

以下是链接样式

 1 a 
 2 
 3 {
 4 
 5     color:#00c;
 6 
 7 }
 8 
 9  a.mailto 
10 
11 { 
12 
13   background:url(../Images/email.png) no-repeat left top ;
14 
15   padding-left:18px;
16 
17 }
18 
19 a.pdflink 
20 
21 {
22 
23   background:url(../Images/pdf.png) no-repeat left top;
24 
25   padding-left:18px;
26 
27 }
28 
29 a.henrylink 
30 
31 {
32 
33   padding:2px;
34 
35   border:1px solid #000;
36 
37 }

JS片断

$('a[href ^= "mailto:"]').addClass('mailto');

$('a[href $= ".pdf"]').addClass('pdflink');

$('a[href ^="http"][herf *= "henry"]').addClass('henrylink');

jQuery自定义选择符(jQuery自己定义的选择符) 而非CSS选择符的

性能提示

只要可能，jQuery 中就会使用浏览器原生的DOM选择符引擎去查找元素，但是在使用自定义选择符的时候，就无法使用速度最快的原生方法了，因此，建议在能够使用原生的方法情况下，就不要频繁地使用jquery自定义选择符，以确保性能。

属jQuery多数是自定义选择符可以让我们可以从中找到的元素中选出一或多个元素，Jquery自定义选择符一般跟在Css选择符后面基于已经选择集的位置来查找元素。自定义选择符的语法和Css中的伪类相近，即选择符以（:）冒号开头。

EG 从horizontal类的DIV集合中选择集合中的第二项

$('div.horizontal:eq(1)')

注意:因为Javascript数组采用从0开始的编号方式，所以eq(1)取得是集合中第二个元素。而Css则是从1开始编号的。因些CSS选择符$('div:nth-child(1)') 取得的是作为其父元素第1个子元素的位置的所有div元素。

EG：代码片断

HTML

  1 <h2>Shakespeare's Plays</h2>
  2 
  3     <table>
  4 
  5         <tr>
  6 
  7             <td>As You Like It</td>
  8 
  9             <td>Comedy</td>
 10 
 11             <td></td>
 12 
 13         </tr>
 14 
 15         <tr>
 16 
 17             <td>All's Well that Ends Well</td>
 18 
 19             <td>Comedy</td>
 20 
 21             <td>1601</td>
 22 
 23         </tr>
 24 
 25         <tr>
 26 
 27             <td>Hamlet</td>
 28 
 29             <td>Tragedy</td>
 30 
 31             <td>1604</td>
 32 
 33         </tr>
 34 
 35         <tr>
 36 
 37             <td>Macbeth</td>
 38 
 39             <td>Tragedy</td>
 40 
 41             <td>1606</td>
 42 
 43         </tr>
 44 
 45         <tr>
 46 
 47             <td>Romeo and Juliet</td>
 48 
 49             <td>Tragedy</td>
 50 
 51             <td>1595</td>
 52 
 53         </tr>
 54 
 55         <tr>
 56 
 57             <td>Henry IV, Part I</td>
 58 
 59             <td>History</td>
 60 
 61             <td>1596</td>
 62 
 63         </tr>
 64 
 65         <tr>
 66 
 67             <td>Henry V</td>
 68 
 69             <td>History</td>
 70 
 71             <td>1599</td>
 72 
 73         </tr>
 74 
 75     </table>
 76 
 77     <h2>Shakespeare's Sonnets</h2>
 78 
 79     <table>
 80 
 81         <tr>
 82 
 83             <td>The Fair Youth</td>
 84 
 85             <td>1–126</td>
 86 
 87         </tr>
 88 
 89         <tr>
 90 
 91             <td>The Dark Lady</td>
 92 
 93             <td>127–152</td>
 94 
 95         </tr>
 96 
 97         <tr>
 98 
 99             <td>The Rival Poet</td>
100 
101             <td>78–86</td>
102 
103         </tr>
104 
105     </table>

CSS样式

1 tr { 
2     background-color:#fff;
3 }
4 .alt {
5     background-color:#ccc;
6 }

在样式表中添加一点样式，表格的表头和单元格就清晰了许多。现在，这个表格<tr>有白色背景，但是行与

行之间没有区别。所以再样式表中为所有表格行添加一种样式，然后再为奇数行定义一个alt背景的类。

使用JS如下。

1 $(document).ready( function () 
2 { 
3   $('tr:even').addClass('alt');
4 });

1、eq()选择符、：odd和：even选择符都使用JavaScript内置的特性从0开始编号的方式。

第一行的编号为0（偶数），第二行的编号为（奇数）

2、应用在第一行的样式才能更好的区分。在直观设计时要好看一些。

但是针对上述的情况可以发现一个问题如果页面中出现多个表格时，页面中的tr元素都是做统一处理，总体上出现样式不能独立于一个表格，正常的样式是每一个表格的样式第一行都是加alt样式的，而不是跟在上一表格样式的后面。因些上面的问题须要修正。

解决这一问题要用到另一个方法【:nth-child()】这个选择符相对于父元素而非所有元素来计算位置，它可以接受odd或even作为参数。

nth-child()是以1开始计数的选择符。需要使用odd而不是even参数

因此在应用时，以1开始就要传入参数odd而不是even

Js片断如下：

$('tr:nth-child(odd)').addClass('alt');

基于上下文内容来选择元素

由于出于某种需要，将页面的某些内容突出显示。为此我给须要突出的内容增加了一个这样的突出CSS类

1 .highlight {
2 
3   font-weight: bold;
4 
5   font-style: italic;
6 
7 }

利用上面的例子，将使用:contains()选择符。将含有Henry增加突出显示的效果。

JS片断如下显示:

 1 $(document).ready(   
 2 
 3 function () 
 4 
 5 { 
 6 
 7   $('tr:nth-child(odd)').addClass('alt');
 8 
 9   $('td:contains(Henry)').addClass('highlight');
10 
11 });

注意在这里面的contains选择符区分大小写。

基于表单的选择符

自定义选择符并不局限于基于元素位置的选择元素。

与其它选择符类似，组合使用表单选择符可以更具有针对性

eg:

$('input[type="radio"]:checked')可以选择所有选中的单选按钮（而不是复选框）

Jquery 系列（2） 选择元素

Jquery 系列（2）选择元素