jQuery学习笔记一（jQuery选择器，整理）

通过前段时间的一个小项目，自己对JQuery的使用也有些了解与自己的见解了，虽然还是难登大雅之堂，但是还是想把自己学习的点滴记录起来，而且在整理的同时比对jQueryAPI文档进行系统的重新学习，自己也好再学习一些遗漏的知识点，并且温故知新。发在blog上不图什么，就为自己查找方便，不用再去U盘里面翻看，所以高人莫喷，我就一菜鸟……

　　jQuery官方网站：http://jquery.com/ 可以通过这个地址下载到最新版的jQuery，自己使用的是V1.3.2版本。废话就不说了，还是先从基本的开始。选择器，API文档介绍的已经很详细了，自己这边再阐述一遍，一方面是自己重新记忆，另一方面是方便自己以后查找，因为选择器的正确使用，是很考验一个人的功力的，因为选择器实在太多了，而且通过简单的组合，就能达到任何所需的效果。

jQuery 基本选择器

　　jQuery选择器的符号与CSS样式表选择器一样，id使用#，class使用.，html选择器直接使用标签，如div，td等，还有其他多种选择器，后面会陆续介绍到。

[ id 选择器]

　　原本在JavaScript下，要想选择一个id=“aa”的需要这样：document.getElementById("aa"); 才能获取到aa这个对象，而通过jQuery选择器，只需这样：$("#aa") 就获取到了id为aa的对象，从而就可以对它进行操作，十分的方便。也是我使用最频繁的一个选择器。

如果查找含有特殊字符的元素，如：
<span id="aa:bb"></span>
<span id="aa[bb]"></span>
<span id="aa.bb"></span>

就需要使用反斜杠来进行字符的转义了，以上三个例子就需要这样获取到对应的对象：

$("#aa\\:bb")
$("#aa\\[bb\\]")
$("#aa\\.bb")
这样才能通过ID正确获取到该对象。如果存在多个id相同的对象，则只会匹配到第一次出现的。

[ class 选择器 ]

　　使用上与id选择器差不多，只是id用的是“ # ”而class选择器使用的就是“ . ”，只要class相同的，就能被匹配到，如：
<div class='notSelect'>不选择我</div>
<span class='selectMe'>选择我</div>
<p class='selectMe'>也选我</p>
使用$(".selectMe")将会匹配到<span class='selectMe'>选择我</div> 与 <p class='selectMe'>也选我</p>

[ * 选择器 ]

　　$("*")将会匹配到网页中所有的元素，我个人是没用过这个，因为好像用不到这种，不过了解下也好。

[ HTML 选择器 ]

　　如果需要选择网页中出现的所有div，则可以通过这种方式进行选择 $("div") ，用的也比较少，css中倒是经常这么来编辑样式，不过jQuery这种方式选择，是不是说可以用来整体修改某中html标签的整体样式？有空可以尝试一下。

[ 同时选择多种元素 ]

　　最后这种应该算是比 * 选择器范围小点的了，它可以选择多个元素，然后一起返回，用法是$("#id,p.myClass,div,span,td")

中间用“ , ”分开，就会将id为id的，class="myClass"的p标记，还有div，span，td都匹配到，并且返回。十分的牛X。

jQuery 索引值选择器

　　索引值都是从 0 开始的。也是非常有用的一种选择器。比如想让表格奇偶行显示不同的颜色，则可以使用索引值选择器进行操作。

[ :first 选择器 ] [ :last 选择器 ]

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
比如上面的html代码，我们需要查找到第一行的元素对象，则可以通过这样获取 $("tr:first") 就可以获得
<tr><td>Header 1</td></tr>
使用 $("tr:last") 就可以获取到 <tr><td>Value 2</td></tr> 元素对象

[ :not 选择器 ]

去除所有与给定选择器匹配的元素 在jQuery 1.3中，已经支持复杂选择器了，例如:not(div a) 和 :not(div,a)

查找所有未选中的 input 元素
<input name="apple" />
<input name="flower" checked="checked" />
使用 $("input:not(:checked)") 得到 <input name="apple" />

[ :even 偶选择器 ] [ :odd 奇选择器 ] 奇偶选择器

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

奇偶选择器是从0开始计算的，如果需要选择上面表格的偶行，则使用 $("tr:even") 选中
<tr><td>Header 1</td></tr> 与 <tr><td>Value 2</td></tr>
使用$("tr:odd") 选中 <tr><td>Value 1</td></tr>

[ :eq 索引选择器 ]

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

　　索引选择器，也是从0开始，如果我要选择第二行，则使用 $("tr:eq(1)")即可获得 <tr><td>Value 1</td></tr>

[ :gt 比给定索引大 ] [ :lt 比给定索引小 ] 的选择器
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

$("tr:gt(0)") 将匹配 <tr><td>Value 1</td></tr> 与 <tr><td>Value 2</td></tr> 选择比给定索引为 0 大的元素

$("tr:lt(2)") 将匹配 <tr><td>Header 1</td></tr> 与 <tr><td>Value 1</td></tr> 选择比给定索引为 2 小的元素

[ :header 标题元素选择器 ]

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

如果要选择h1，h2元素，则使用 $(":header") 即可获得 <h1>Header 1</h1> 与 <h2>Header 2</h2>元素，从而对它们进行操作，可以修改背景，或者字体等。

[ :animated 正在执行动画元素 选择器 ]

　　没用过这种选择器，API上介绍说是：只有对不在执行动画效果的元素执行一个动画特效。一个页面内，没动画的元素多了去了，如果都执行动画，那不卡死，不过通过这个选择器与其它选择器结合，倒是能执行很多功能。API实例：
<button id="run">Run</button><div></div>
执行如下代码：
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
实现的效果，每1秒钟，不在执行动画的div元素向右移动20像素。

jQuery 层级选择器

　　一般情况下，通过上面的选择器，灵活的运用，就已经能方便，快捷的找到自己所需的绝大部分的元素了，但是，还有一些特殊情况下，可能通过上面的查找方式不太适合，并且效率上有所欠缺，所以我们还要了解层级选择器的用法，这样才能更方便，更高效的让jQuery为我们服务。

[ 先人 后代选择器 ]

　　先来看看实例：

<div>
　　<a href='chengwei2009.blog.163.com' >snail的博客</a>
　　<span>Snail的博客</span>
　　<input type='text' name='txtName' value='Snail_博客' />
　　<a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
</div>
<a href='chengwei2009.blog.163.com' >还是snail的博客</a>

这时，如果这么使用选择器 $("div a")将会选择到
<a href='chengwei2009.blog.163.com' >snail的博客</a> 与 <a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
比起$("a")将所有a标记都选中，范围小了很多，通过这种方式，我们可以选择某类或者某个id区域内的某种或者某个元素，先选中了“先人”，再去找它的“后代”，而不会盲目的查找全文，也是很有用的，比如说清空一个form中的input，如果不使用rest按钮，就可以使用这种方式来进行清除数据。

[ 父 > 子 选择器 ]

　　定义为：在给定的父元素下匹配所有的子元素。先看一个实例：

<div id ="parent">
　　<div>小儿子</div>
　　<div>大儿子
　　　　<div>孙子</div>
　　　　<div>孙女</div>
　　</div>
</div>

如果使用：$("#parent > div") 则只会匹配到<div>小儿子</div> 与 <div>大儿子</div> 不会再选择到“孙子”与“孙女”，当然，你要是通过大儿子，再去找孙子，孙女，是另外一回事。

[ 前 + 后 选择器 ]

　　格式 $("prev + next") 其中prev为：任何有效选择器，next为：一个有效选择器，并且紧跟在着第一个选择器后面，API文档上面的例子：
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("label + input")，将得到 <input name="name" /> 与 <input name="newsletter" />

[ 前 ~ 同辈 选择器 ]

　　格式 $("prev ~ siblings") 其中prev为：任何有效选择器，siblings 一个选择器，并且它作为prev选择器的同辈，API文档例子：

找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("form ~ input")选择器，查找到的结果为：<input name="none" />

　　还有很多其他的选择器，就不一一列出来了，自己常用的也就是上面那些选择器，而且好像也够用了，不够用的再去API内进行查找。