jQuery学习总结

1.      常用的HTML元素选取

$(“xxx”)                              所有<xxx>标签的元素

$(“p#demo”)                   所有id=”demo”的<p>元素

$(“p.style”)                       所有class=”style”的<p>元素

$(“#demo”)                      所有id=”demo”的元素

$(“.style”)                          所有class=”style”的元素

$(“[href]”)                          所有带有href属性的元素

$(“[href=’#’]”)                   所有带有href属性且属性值为”#”的元素

$(“[href!=’#’]”)                  所有带有href属性且属性值不为”#”的元素

$(“[href$=’.jpg’]”)             所有带有href属性且属性值以”.jpg”结尾的元素

更多元素选取方法请查阅jQuery选择器参考手册。

2.      获取元素集合中的具体项

如上，通过jQuery选取得到的HTML元素都是一组元素的集合，要获取到其中具体的某一项，可以使用eq(index)方法来获得集合中索引号为index的jQuery对象，如：

若不获取具体的元素项就调用相关的方法，则会对该集合中的所有元素都执行该方法，如：

3.      jQuery对象与DOM对象

需要注意的是eq方法获得的是jQuery对象，不是DOM对象，它只能执行jQuery的方法而不能调用DOM的方法。

普通的DOM对象可以通过$()转化为jQuery对象，最常见的如：$(document)。转化后的jQuery对象为只有一个元素的集合。

jQuery对象要转化成DOM对象则需要用相关的方法从集合中取出特定的DOM对象，常见的方法有get(index)和[index]两种，如：

特别需要注意的是，jQuery对象只能使用jQuery方法，DOM对象只能使用DOM方法。

4.      引用jquery.js文件

jQuery只是一个JavaScript库文件，所以当需要使用jQuery之前首先需要引用这个库文件。通常可以到jQuery的官网下载一份放到本地。另外，Google和微软也提供了在线的库文件供开发者使用。

Google的引用地址：http://Ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

微软的引用地址：http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js

当jQuery更新的时候，上述两个在线引用也会做出相应的更新。所以，可以通过修改上述两个地址中的版本号来引用其它版本的jQuery文件，如：

http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js是Google提供的1.4.0版本的JQuery文件；而前述分别是两公司提供的1.7版本的jQuery文件。

5.      jQuery执行入口

为了防止在jQuery文件加载完成之前就开始执行jQuery代码，所有的jQuery代码都必须写到

或

的函数体中，否则操作可能无效。

6.      jQuery方法

只有jQuery对象才能调用jQuery方法。有关jQuery的具体方法请参见下面的链接：

事件处理

动画效果

页面元素操作

操作页面元素的属性

CSS操作

Ajax

遍历集合

数据流和函数流的操作

DOM元素操作

以上参考资料均出自Vevb，版权与本人无关。

7.      命名冲突

为了避免其它地方的命名冲突，如其它一些JS库中也定义了$，jQuery提供了.noConflict()方法来将jQuery中$的职权让渡给另一个标识符，如：

之后$将变成普通的符号而不再具备之前它在jQuery中的功能。

8.      个人感觉

在大体看过jQuery的语法和一些方法之后，我就觉得其实jQuery就是对JS和CSS操作DOM的封装和简化。把过去JS和CSS需要许多语句才能实现的一些效果简化，典型的如hide()方法。但根本上，jQuery仍然是面向过程的，甚至很难在面向对象的场合下使用它。原因就是常常需要jQuery对象和DOM对象之间的相互转化。而事实上，在利用Canvas，甚至进一步的WebGL上来说，个人感觉不太用得上jQuery的效果，而它的事件处理又显得很死板，实际上跟直接写DOM的事件处理没有多大的区别。不过，它的Ajax处理倒是显示非常的方便，只是常常会出现一些问题。

总的来说，jQuery正如它的初衷一样，简化了许多JS和CSS的效果操作，使前台开发者能够简单甚至无脑地做出许多很炫的效果。但是，如果要搞个大工作，比如做个游戏，只用jQuery就有点捉襟见拙了。不过，这并不影响jQuery作为一个网页效果工具的良好表现。大多数前台页面实际上也不需要大动干戈地做特效，简单实用的效果或许对开发者和用户都是最好的。