JQuery基本选择器和基本动画方法总结

刚开始接触JQuery是在大三的时候，那时候先学的Javascript，然后跳跃到JQuery，就一个字，爽。但因为之前用的不是太多，所以很多都忘了，直接导致的后果就是之前在一家公司面试，面试官问我要把一个表格的奇数行和偶数行的背景设置成不同的颜色，我当时的答案是挨个循环，然后判断是奇数行还是偶数行，并加上需要加的背景。的确，这样也是可以实现的，但是如果熟悉JQuery的话，就2行代码，一行even(),一行odd()就可以很好的解决了。现在在一家做电子商务/移动互联网的公司工作，难免经常要用到JQuery，于是抽时间又复习了一下。本文将对JQuery的基本选择器和基本的方法做一个基本的介绍，欢迎广大网友吐槽。关于JQuery的书籍，个人就看过《锋利的JQuery》，下载地址：

http://download.csdn.net/detail/jrlxsy/6467613

,感觉写的还不错，适合初中级水平的人学习。

我们都知道，JQuery相比于Javascript而言，有很多的有点，包括：

1、完美的浏览器兼容性；

2、强大的选择器；

3、出色的Dom操作；

4、可靠的事件机制；

5、简易的Ajax；

6、丰富的动画和UI特效，曾经用过的EasyUI，LigerUI，ArtDialog感觉都还不错。

下面就从JQuery基本的选择器和基本的方法做一个大致的介绍。

基本选择器：

选择器	描述	返回	示例
#id	id选择器，注意必须唯一， 如果不唯一会选择不到元素	单个元素	$("#test")选取id为test的元素
.class	类选择器，选取给定的样式 类来选择元素	集合元素	$(".test")选取class为test的元素集合
element	根据给定元素名称选择元素	集合元素	$("div")选取所有的div元素
*	匹配所有元素	集合元素	$("*")选取所有的元素
element1， element2……	将每一个选择器匹配到的元素的组合一起返回	集合元素	$("div,span,p.myClass")选取所有div元素， span元素，class为myClass的p元素

以上就是最基本的选择器，值得注意的地方就是：选择器中“，”和“ ” 是有区别的，空格相当于元素里的子元素，是包含在所选元素内部的，如$(".test span"),选取的是class为test的元素里的span元素，而$(".test,span")选取的则是class为test的元素和span标签的并集，这是容易忽略的地方。

层次选择器：

选择器	描述	返回	示例
$("ancestor descendant")	div里的所有span元素（后代元素）	集合元素	$("div span")选取div下的所有span元素
$("parent>child")	选取parent元素下的子元素，与$("ancestor descendant")有区别	集合元素	$("div>span")选取div下元素名是span的元素
$('pre+next')	紧接在pre元素之后的next元素	集合元素	$(".one+div")选取class为one的下一个div元素
$('pre~siblings')	选取pre元素之后所有的siblings元素	集合元素	$("#one~div")选取id为one的元素后面所有的div兄弟元素

过滤选择器：

JQuery常用的过滤器有：

:first()  选取第一个元素

:last()  选取最后一个元素

:even() 选取索引为偶数的元素，索引从0开始

:odd()   选取索引为奇数的元素，索引从0开始

:not(selector)   去除与给定选择器相同的元素

:eq(index)    选取索引等于给定值的元素

:gt(index)   选取索引大于给定索引的元素

:lt(index)     选取索引小于给定索引的元素

:header       选取所有的标题元素，h1，h2，h3……

:animated    选取当前正在执行动画的元素

表单选择器：

：input 选取所有的input，textare，select，button元素

：text   选取所有的单行文本框

：password 选取所有的密码框

：radio 选取所有的单选框

：checkbok 选取所有的多选框

：submit 选取所有的提交按钮

：image 选取所有的图像按钮

：reset 选取所有的重置按钮

：button 选取所有的button按钮

：file   选取所有的file按钮

：hidden 选取所有的不可见域

方法这里主要介绍一下动画方法，Dom操作和表单操作放在下一篇介绍。

JQuery常用作动画的方法有：

show（）用来显示元素

hide （）用来隐藏元素

fadeIn（）淡入

fadeOut（）淡出   这两组方法主要是通过改变透明度，来实现淡入淡出效果

SlideUp（）由下而上缩短至0

Slidedown（）由上而下逐渐显示

自定义动画：animate（params，speed，callback）

最简单的自定义动画：

$(function(){

$("#panel1").click(function(){

$(this).animate({left:"500px"},3000)

});

});

这里将实现一个id为panel1元素的左边距在3s内变成500px的效果。感兴趣的同学可以运行如下实例：

运行效果：

源码地址：http://download.csdn.net/detail/jrlxsy/6468053

说到JQuery，就不得不说到Chrome，这绝对是一款JQuery神器，用他来调试JQuery和Javascript，只能用一个字来形容，爽！打开Chrome浏览器的开发者工具，快捷键是F12，你的每一个请求，响应，都能通过Chrome看得一清二楚。这样我们就能监视请求资源的状态，注意，如果所请求的资源里有错误，那么将导致整个JS文件都不会执行，或者至少有一部分不会被执行，这时候通过Chrome，我们可以在Console下看到出错资源的位置，修改完错误之后就可以继续执行了。另外在Source里可以在Javascript中插入断点，方便我们调试。还有就是在Console里，可以随意执行JQuery或者Javascript代码，这样也方便了我们使用。如图：在输入$(".hp-bd")之后，敲回车，就能立刻得到选择的结果。这样我们也能很方便的测试某些代码是否有作用。