1.1认识JQuery
1，AJAX：异步的JavaScript和XML。
2，Prototype：是最早成型的JavaScript库之一。对JavaScript的内置对象做了大量的扩展。
3，Dojo:Dojo的强大之处在于提供了许多JavaScript库所没有的功能，例如：离线存储的API，生成图标的组件，基于SVG/VML的矢量图形库和Comet支持等。
4，YUI(Yahoo! UI)是由雅虎公司开发的一套完整的扩展性良好的网页程序工具集。
5，Ext JS：简称Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面。
6，Moo Tools:是一套简介的轻量级的，模块化的和面向对象的JavaScript框架。Moo Tools完全实现了面向对象的思想，语法简介，文档完善。
7，JQuery:是一个轻量级的JavaScript库，拥有强大的选择器，出色的DOM操作，可靠的事件处理，完善的兼容性和链式操作等功能。
1.2加入JQuery
1.2.1JQuery简介
JQuery是一个优秀的轻量级的JavaScript库，是一个由Jhon Resig在2006年1月创建的一个开源项目。现在的JQuery主要包括核心库、UI、插件、JQuery Mobile。
1.2.2JQuery的优势
JQuery的理念：写的少，做的多。
1、轻量级。JQuery压缩以后只有30KB左右，非常轻巧。
2、强大的选择器。JQuery允许使用CSS1到CSS3的所有的选择器，以及JQuery独创的选择器也可以加入一些插件来支持XPath选择器。
3、出色的DOM操作的封装。
4、可靠的事件处理机制。
5、完善的AJAX。JQuery将所有的AJAX操作封装到一个函数里面$.ajax()里面，使开发者处理Ajax的时候不需要太多的考虑浏览器的兼容性问题和XMLHttpRequest对象的创建和使用的问题。
6、不污染顶级的变量。JQuery只建立一个名称为JQuery的对象，其所有的函数的方法都在这个对象之下。不会污染其他的对象，使JQuery对象可以和其他的JavaScript的对象共存。不用担心冲突的问题。
7、出色的浏览器的兼容性。JQuery能够在IE6.0+,Fire Fox3.6+，Safari 5.0+,Opera和Chrome浏览器上正常运行。JQuery同时也修复了一些浏览器之间的差异。具有出色的兼容性。
8、链式操作方式。可以在同一个浏览器对象上定义一组动作，可以直接连写不用重复获取对象。
9、隐式迭代。当用JQuery找到带有".myClass"类的全部元素，在隐藏他们的时候，无需循环遍历每一个返回的元素。因为JQuery里面的方法都被设计成自动操作对象的集合，而不是单独的对象，从而简化了代码量。
10、行为层和结构层的分离。开发者可以使用JQuery选择器选择对象直接添加事件。
11、丰富的插件支持。JQuery的易扩展性。
12、完善的文档。
13、JQUery开源。
1.3JQuery代码的编写
1.3.1JQuery代码的编写
1，获取JQuery的最新版本
进入http://jquery.com官网下载最新版的JQuery。
2、JQuery库类型说明。
JQuery库的类型分为两种：分别是生产版(最小化和压缩版)和开发版(未压缩版)，区别如下表所示：
| 名称 |
大小 |
说明 |
| jquery.js(开发版) |
大约229KB |
完整无压缩版本，主要用于测试、学习和开发 |
| jquery.min.js（生产版） |
大约31KB |
经过工具压缩或者经过服务器开启Gzip压缩，主要应用于产品和项目 |
3、JQuery的环境配置
JQuery不需要安装，只需要在需要引用的页面引用就可以了。
4、JQuery的引入
在HTML页面中使用<script></script>中引入JQuery的核心问价就可以使用JQuery库了。
程序实例
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
1.3.2编写简单的JQuery代码
在JQuery中"$"是JQuery的简写形式。例如：$("#first_button")和jQuery("#first_button")是等价的。$.ajax和jQuery.ajax是等价的。程序的"$"符号都是jQuery的一个简写形式。
程序实例:
$(document).ready(function(){
alert("Hello World");
});
$(document).ready();这个方法类似于JavaScript中的window.load()方法，事实上还是与window.load()方法有区别。
对比如下：
| window.load()方法 |
$(document).ready()方法 |
|
| 执行时机 |
必须等待网页中所有的内容加载完成之后（包括图片）才能执行window.load()方法 |
网页中所有的DOM结构绘制完毕之后就开始执行，即便是DOM关联的元素都还没有加载完成。 |
| 编写个数 |
在一个js文件中不可以同时编写多个window.load()方法： 一下的代码不能正常运行： window.onload= function () { alert("Hello World"); }; window.onload= function () { alert("Hello China"); }; 结果只会显示：Hello China |
在同一个js文件中可以同时编写多个$(document).ready()方法。以下的代码可以正常运行： $(document).ready(function () { alert("Hello World"); }); $(document).ready(function () { alert("Hello China"); }); 结果两次都会显示。 |
| 简化写法 |
无 |
$(document).ready(function(){ |
2、为代码添加注释
1.4JQuery对象和DOM对象
1.4.1DOM对象和JQuery对象的简介
1、DOM对象
DOM(Document Object Model,文档对象模型)。
在DOM树中可以通过JavaScript中的getElementByTagName()和getElementById()来获取元素的节点。
2、 JQuery对象
JQuery对象是通过JQuery包装DOM对象之后的对象。
程序实例：
$("foo").html();就相当于document.getElementById("foo").innerHTML;//都是获取id为foo元素之内的HTML代码。
同时在JQuery对象中无法使用DOM对象的任何方法。例如：$("#foo").innerHTML之类的写法都是错的。同样在DOM对象中也不可以使用JQuery里面的方法。
1.4.2JQuery对象与DOM对象的相互转换
在实现JQuery对象与DOM对象转换之前需要先确定定义变量的风格。
如果是JQuery对象，可以在变量名称之前加上$,例如：
var $variable=JQuery对象；
如果是DOM对象：
var variable=DOM对象
1、JQuery对象转换成DOM对象
将JQuery对象转换成DOM对象有两种方法，也就是[index]和get(index)：
(1)JQuery对象是一个类似于数组的对象，可以通过[index]的方法得到对应的DOM对象。
JQuery代码如下：
var $cr=$("#cr");//JQuery对象
var cr=$cr[0];//DOM对象
alert(cr.checked);
(2)另一种方法是JQuery本身提供的，通过get(index)方法获得DOM对象
JQuery代码如下：
var $cr=$(#cr);//JQuery对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked);//检测这个checkbox是否被选中
2、DOM对象转换成JQuery对象
只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象了。
JQuery代码如下：
var cr=document.getElementById("cr")；//DOM对象
var $cr=$(cr);//JQuery对象
1.5解决JQuery和其他库的冲突。
1、JQuery库在其他库之后引入。
在其他库和JQuery库被加载完成之后在任何时候都可以调用jQuery.noConflict()函数来将变量的控制权交给其他JavaScript库。
程序实例：
<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();//将变量$的控制权转交给prototype.js
</script>
2、JQuery库在其他JavaScript库之前导入
如果在其他js库之前导入JQuery库，则不需要使用jQuery.noConflict()。