jQuery第一章
一、jQuery的优势
1.轻量级：压缩之后大小只有30KB左右。
2.强大的选择器：jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器。
3.出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，是开发者在编写DOM操作相关程序的时候能够得心应手。
4.可靠的事件处理机制：jQuery事件处理机制在处理事件绑定的时候相当可靠。
5.完善的Ajax：jQuery将所有的Ajax操作封装在一个函数$.ajax()里面，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
6.不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝不污染其他对象。
7.出色的浏览器兼容性：jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。
8.链式操作方式：jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
9.隐式迭代：当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。
10.行为层与结构层分离：开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。
11.丰富的插件支持：jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。
12.完善的文档：jQuery的文档非常丰富，不管是中文文档还是英文文档。
13.开源：jQuery是一个开源产品。
二、jQuery代码的编写
1.获取jQuery最新版本：
到jQuery官网http://jquery.com/即可下载。
2.jQuery库类型说明：
jQuery库的类型分为两种，分别是生产版和开发版，生产版主要用于产品和项目，生产版主要用于测试、学习和开发。
3.jQuery环境配置：
jQuery不需要安装，把下载好的jquery.js放到网上的一个公共位置，想要在某个页面上使用jQuery时，只需在相关的HTML文档中引入即可。
4.在页面中引入jQuery
将jquery.js放在一个文件目录下，编写页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了。程序如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 在head标签内引入jQuery --> <script src = “../scripts/jquery.js” type = “text/javascript”></script> <title></title> <body> </body> </html>
三、编写简单的jQuery代码
1.在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，$.ajax和jQuery.ajax是等价的。
下面开始编写第一个jQuery程序。
//……省略其他代码
<!—引入jQuery-->
<script src = “../scripts/jquery.js” type = “text/javascript”></script>
<script type = “text/javascript”>
$(document).ready(function( ){
alert(“Hello World!”);
});
</script>
//……省略其他代码
$(document).ready(function(){
//…
});
这段代码的作用类似于传统的JavaScript中的window.onload方法，不过对于window.onload还是有区别的。
window.onload必须等网页中的所有内容加载完毕之后才能执行，而$(document).ready()在网页中所有DOM结构绘制完毕之后就执行，可能DOM元素相关联的东西并没有加载完。window.onload不能同时编写多个，例如以下代码：
window.onload = function(){
alert(“test1”)};
window.onload = function(){
alert(“test2”)};
结果只会输出“test2” 而$(document).ready()可以编写多个，例如以下代码：
$(document).ready(function(){
alert(“Hello World!”);
});
$(document).ready(function(){
alert(“Hello again!”);
});
结果两次都输出
window.onload没有简化写法，$(document).ready(function(){
//….
})；可以写成
$(function(){
//…
})；
2.jQuery的编码风格：
（1）对于同一个对象不超过3个操作的，可以直接写成一行。
（2）对于同一个对象的较多操作，建议每行写一个操作。
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。
（4）适当地添加注释
四、jQuery对象和DOM对象
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，可以使用jQuery里的方法，无法使用DOM对象的任何方法。例如$(“#id”).innerHTML和$(“#id”).checked之类的写法都是错误的，可以用$(“#id”).html()和$(“#id”).attr(“checked”)之类的jQuery方法来代替。同样，DOM也不能使用jQuery里的方法。例如
document.getElementById(“id”).html()也会报错，
只能用document.getElementById(“id”).innerHTML语句。
2.jQuery对象和DOM对象的相互转换
在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：
var $variable = jQuery对象；
var variable = DOM对象；
（1）jQuery对象转换成DOM对象。jQuery提供了两个方法将一个jQuery对象转换成DOM对象，即[index]和get（index）。
①jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
代码如下：
var $cr = $(“#cr”); //jQuery对象
var cr = $cr[0]; //DOM对象
②另一种方法时jQuery本身提供的，通过get（index）方法得到相应的DOM对象。
代码如下：
var $cr = $(“#cr”); //jQuery对象
var cr = $cr.get(0); //DOM对象
（2）DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。
jQuery代码如下：
var vr = document.getElementById(“cr”) ;
var $cr = $(cr) ;
3.解决jQuery和其他库的冲突
如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：
var $j = jQuery.noConflict();
$j(function(){
$j(“p”).click(function(){
alert( $j(this).text() );
})
})
$(“pp”).style.display = ‘none’;