通过前段时间的一个小项目,自己对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 偶选择器 ] [
dd 奇选择器 ] 奇偶选择器
<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内进行查找。