jQuery教程-jQuery简介

jQuery是当前最受欢迎的JavaScript和Ajax库之一，它的宗旨是写更少的代码，实现更多的功能。

jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。

jQuery的文档就绪

如果使用纯JavaScript，在我们需要文档准备就绪才执行某些操作的时候，需要使用window.onload()方法，例如下面的代码：

window.onload() = function(){ /* 要执行的代码 */ }                                
                            

如果同一个页面中存在多个window.onload()方法，前面的会被后面的覆盖。例如：

window.onload() = function(){
    alert("action 1");
}
window.onload() = function(){
    alert("action 2");
}                                  
                            

执行上面的代码，只会弹出“action 2”对话框。

而在jQuery中，我们可以通过$(function(){})或jQuery(function(){})方法来在文档就绪时执行某些操作。同一个页面中的多个$(function(){})中的代码都会被执行，例如：

$(function(){
    alert("action 1");
})

$(function(){
    alert("action 2");
})                                 
                            

执行上面的代码，页面会依次输出“action 1”和“action 2”。

jQuery包装器

在使用jQuery的时候，我们一定要分清一个节点变量是jQuery节点还是js节点。jQuery节点和js节点之间是可以相互转换的。

我们通过$(selector)方法就可以将一个节点封装为jQuery节点。例如：

var node = document.getElementById("#foo"); //js节点
$(node) //jquery节点，可以使用jquery的方法                               
                            

上面的代码中，node是一个js节点，而通过$(node)后就变为了jQuery节点，可以使用所有的jQuery方法。

$(selector)中的selector是选择器，jQuery的选择器不仅支持CSS中的常用选择器，还支持没有被所有浏览器实现的更加强大的选择器，例如nth-child选择器。

每一个jQuery节点都是一个数组，只要取出数组中的值，这个值就是js节点，只能使用js的方法。例如有一组<li>元素，HTML代码为：

<ul id="foo">
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>                                
                            

我们要遍历这个无序列表中的所有元素，可以先获取所有的li元素：

var lis = $("#foo li");  //jQuery节点                              
                            

此时，lis是一个jQuery节点。我们通过for循环来对它进行遍历：

for(var i = 0; i < lis.length; i++){
    var li = lis[i];    //此时的li是js节点
}                                
                            

我们通过for循环获取了lis中的每一个li元素，此时的li元素是js节点，它们不能使用jQuery的方法，如果我们想修改它们的文本，需要使用JavaScript的方法：

for(var i = 0; i < lis.length; i++){
    var li = lis[i];    //此时的li是js节点
    li.innerHTML = "li-"+i;
}                                
                            

如果想使用jQuery的方法，就需要重新将所有的li元素包装为jQuery节点，方法是通过$()。

for(var i = 0; i < lis.length; i++){
    var li = lis[i];    //此时的li是js节点
    $(li).html("li-"+i);
}                                
                            

多库共存

如果我们在页面中使用了包括jQuery在内的多个JavaScript库，就有可能会发生冲突。在jQuery中提供了noConflict()工具函数来消除这些冲突。会导致冲突的库被加载之后的任何时候，我们都可以调用下面的方法来消除冲突。：

jQuery.noConflict();                                
                            

上的代码会将$还原到非jQuery库所定义的含义。