昨天主要学习了JQuery的选择元素这一章节，在JQuery中最重要的就是选择符，只有通过选择符进行相应的元素选择，才能够对相应的元素进行操作。因此学好如何从页面中选择元素是非常重要的。
这一章节讲述的内容主要分为四个部分。
1.掌握JQuery的基本选择符。
2.属性选择符
3.JQuery自定义选择符
4.DOM元素的遍历以及访问
总结：
一、JQuery的基本选择符
首先，理解什么是DOM。DOM（document object modal（文档对象模型）），其充当了JavaScript与网页之间的接口，它以对象网络而非纯文本的形式表现HTML源代码。
理解DOM整体树形结构：
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>aa</p>
<p>bb</p>
</div>
</body>
</html>
其中<html>是其他元素的祖先元素，而<head>和<body>元素则成为其后代元素。其实，就把<html>看成父亲，而<head><body>是其两个儿子而已。
而其“儿子”(<body>)也有孩子，即<div>,如此类推。其中<p>aa</p>与<p>bb</p>是兄弟，也就是说两者是同辈元素。
此图更能表明整个结构：
HTML
HEAD BODY
TITLE DIV
P P P
其次，我们开始学习一些基本的选择符。
JQuery选择符是根据CSS相应的选择器来进行的。即可以通过标签名、ID、类进行选择。分别对应了CSS选择器中的元素选择器、ID选择器、类选择器。
JQuery以$()表示一个对象。
例： $("#aa") ------------------- 此为ID选择器，即可以再元素中定义id属性，然后通过$("")形式，双引号里面用#+id名称即可以选择相应的ID名称相同的元素
$(".aa") -------------------此为类选择器，即可以再元素中定义class属性，然后通过$("")形式，双引号里面放入。+class后面的名称，即可以选择相应 的元素
$("p") ---------------------此为元素选择器，即可以讲页面中元素为P（段落）的元素全部选择出来，相当于一个数组。
下面认识一下子元素组合符的使用:
<html>
<head>
<title>the title</title>
</head>
<body>
<ul>
<li>MM</li>
</ul>
<ul id='test'>
<li>aa</li>
<li>
<ul>
<li>bb</li>
</ul>
</li>
</div>
</body>
</html>
如果想取得所有的li元素，则可以通过元素选择符进行选择$("li")。如果想取得id为test的下面的所有li呢？
我们可以这么写：$("#test li") --------此表明通过ID选择符将整个ul选择，然后再通过元素选择符将li进行选择，其意为将ID为test的ul下面的所有li选择出来。
可以看到其中也有嵌套的ul，那么我们只想取直属的li，而不想取出嵌套在内部的li呢？
$("#test>li") ----------------加入>此符号表明，将取得ID为test下的直属子元素li，即不包括嵌套在内部的。
此时，我们对ID为test下面的所有直属子元素进行添加类open，即：$("#test>li").addClass("open");
而与此同时我们相对那些没有加入类open的li进行添加类close，那该怎么办呢？
JQuery 中就有这么一种否定是伪类的方法来选择。
即： $("#test li:not(.open)").addClass("closed"); ---------------即通过not（加入。表示类在加上类名即可）
二、属性选择符
属性选择符是通过HTML元素的属性进行选择。例如：$("img[alt]") ----------元素img中带有alt属性的元素
属性选择符使用一种从正则表达式中借鉴来的通配符语法，主要分为4种。
1.以 ^ 表示在字符串的开始位置。
2.以 $ 表示在字符串的结束位置。
3.以 * 表示在字符串的任意位置。
4.以 ! 表示对值取反。
下面我们来举一个例子来详细说明：
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<a href="mailto:henryin@king.com">aa</a>
<a href="test.pdf">bb</a>
<a href="test:hello.pdf">bb</a>
</div>
</body>
</html>
当我们想选择元素a的属性href中的值以mailto开头的元素的时候，则使用上面讲到的第一种通配符：^
即： $("a[href ^='mailto']") --------此种方式即可以选择到元素a的属性href中的值以mailto开头的元素
当我们想选择元素为a的属性href中的值以pdf结束的元素时，则使用上面讲到的第二种通配符：$
即： $("a[href $='pdf']") -----------元素为a的属性href中的值以pdf结束的元素
当我们想选择元素为a的属性href中的值中包含有el的元素的时候，则使用上面讲到的第三种通配符：*
即： $("a[href *='el']") -----------元素为a的属性href中的值中包含有el的元素
这4种通配符也可以组合使用：即： $("a[href ^='test'] [href *='hello']") ----------此表明的是a元素的href属性的值中以test为开头，而href的值中同时包含了hello的内容 的元素。
其他两个部分的内容将在稍晚些的时候进行更新。如果文档中有那些错误或者不足的地方，欢迎各位批评指正，以达到互相学习的目的，谢谢！
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
