一：认识jQuery
1、jQuery 的优点
（1）、轻量级
（2）、链式操作方式
（3）、隐式迭代
（4）、不污染顶级变量
（5）、可靠的事件处理机制
（6）、完善的ajax,jQuery 所有的ajax操作封装到一个函数$.ajax()里面,使得开发者处理ajax的时候，能够专心处理业务逻辑，而无需关心复杂的浏览器兼容性和xml HTTPrequest对象的创建和使用的问题
2、window.onload和$(document).ready的对比
| window.onload | $(document).ready | |
| 执行时机 | 必须达到网页中所有的内容加载完毕之后（包括图片）才能执行 | 网页中所以DOM结构绘制完毕之后就执行，可能DOM元素关联的东西并没有加载完 |
| 编写个数 |
不能同时编写多个 以下是不正确的 1 window.onload=function (){ 2 3 alert("hello"); 4 5 } 6 7 window.onload=function (){ 8 9 alert("hello"); 10 11 } |
能同时编写多个 以下是正确的 1 $(document).ready(function(){ 2 3 alert("hello"); 4 5 }); 6 7 $(document).ready(function(){ 8 9 alert("hello"); 10 11 }); |
| 简化写法 | 无 |
1 $(document).ready(function(){ 2 3 ....// 4 5 ..// 6 7 }); 可以简写为： 1 $(function(){ 2 3 ...// 4 5 ...// 6 7 }); |
3、jQuery 对象和DOM对象的转换
（1）、jQuery 对象转换DOM对象的
方法一：jQuery对象是一个类似数组的对象，可以通过index的方法得到相应的DOM对象
var $cr=$("#rc");//jQuery 对象
var cr=$cr[0];//DOM对象
alert(cr.checked)//检测checked是否被选中
方法二：对于一个DOM对象，只需要用$()把DOM对象包装起来就可以获得一个jQuery对象
var $cr=$("#rc");//jQuery 对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked)//检测checked是否被选中
（2）、DOM对象的转换jQuery 对象
var cr=document.getElementById("cr");//DOM对学生 var $cr=cr.get(0);//jQuery 对象
用DOM方式来判断复选框是否被选中
$(document).ready(function (){//等待dom元素加载完毕
var $cr=$('#read');//jQuery对象
var cr=$cr[0];//DOM对象，或者$cr.get[0]
$cr.click(function (){
if(cr.checked){//DOM方式判断
alert ("感谢你的支出");
}
});
});
用jQuery方式来判断复选框是否被选中
$(document).ready(function (){//等待dom元素加载完毕
var $cr=$('#read');//jQuery对象
var cr=$cr[0];//DOM对象，或者$cr.get[0]
$cr.click(function (){
if($cr.is(":checked")){//jQuery方式判断
alert ("感谢你的支出");
}
});
});
以上演示了jQuery对象和DOM对象的不同，但最终的效果是一样的
4、解决jQuery和其他库的冲突
在其他库和jQuery都被加载完毕之后，可以在任何时候调用noConflict()函数来将变量$的控制权移交给其他JavaScript库
var $j=jQuery.noConflict();//自定义一个快捷方式
$j(function (){//使用jQuery，利用自定义快捷方式——$j
$j("p").click(function (){
alert ("$j(this).text()");
});
});
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$（）方法，同时又不想与其他库冲突，那么可以使用以下两种解决方法
其一：
jQuery.noConflict();//将变量的控制权给prototype.js
jQuery(function ($){//使用jQuery设定页面加载是执行的函数
$("p").click(function (){//在函数内部继续使用$()方法
alert ("$(this).text()");
});
});
其二：
jQuery.noConflict();//将变量的控制权给prototype.js
(function ($) {//定义匿名函数并设置形参为$
$(function () {//在匿名函数内部$均为jQuery
$("p").click(function () {//继续使用$方法
alert("$(this).text()");
});
});
}());
最后一种方法是在其他库之前导入
5、jQuery选择器
(1)、css选择器
| 选择器 | 语法 | 描述 | 示例 |
| 标签选择器 |
p{ CSS规则 } |
以文档元素作为选择器 |
p{ 200px; } |
| ID选择器 |
#id{ CSS规则 } |
以文档元素的唯一标识id作为选择器 |
#note{ 200px; } |
| 类选择器 |
.className{ CSS规则 } |
以文档元素class作为选择器 | .note{
200px; } |
| 群组选择器 |
p,div,a{ CSS规则 } |
多个选择器应用同一个样式 |
p,div,a{ 200px; } |
| 后代选择器 |
E F{ CSS规则 } |
元素E的任意后代元素F |
#links a{ color:red; } |
| 通配符选择器 |
*{ CSS规则 } |
以文档的所有元素 |
*{ padding:0; } |
| 伪类选择器 |
E：F{ CSS规则 } |
指定要选择元素的特殊状态E:F |
li:first-child{ color:red; } |
| 邻近选择器 |
p{ CSS规则 } |
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 |
h1 + p { margin-top:50px; } |
| 属性选择器 |
p{ CSS规则 } |
选择有某个属性的元素 |
input[type=text]{ color:red; } |
| 子代选择器 |
p{ CSS规则 } |
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 |
li>a{ color:red; } |
jQuery选择器的优势
document.getElementById('tt').style.css='red';
运行上面的代码,浏览器就会报错,原因是网页中没有id为“tt”的元素
改进后的代码如下:
if(document.getElementById("tt")){
document.getElementById("tt").style.color="red";
这样就可以避免浏览器报错但如果要操作的元素很多,可能对每个元素都要进行一次判断,大量重复的工作会使开发人员感到欣倦,而jQuery 在这方面问题上的处理是非常不错的,即使用
iOuery 获取网页中不存在的元素也不会报错,看下面的例子,代码如下:
$('#tt').css("color"."red")；//这里无需判断$('#tt')是否存在
注意：$('#t)获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码:
if($("#tt")){ //do something }
而应该根据获取到元素的长度来判断,代码如下:
if($("#tt").length>0){
//do something
}
或者转化成DOM 对象来判断,代码如下:
if($("#tt")[0]){
//do something
}
例子:对多选框进行操作,输出选中的多选框的个数。
HTML 代码如下:
<input type="checkbox" name="check" value="1" checked="checked">
<input type="checkbox" name="check" value="2">
<input type="checkbox" name="check" value="3" checked="checked">
<input type="button" name="checked " value="你选中的个数" id="btn">
JavaScript 代码如下:
var btn = document.getElementById("btn");//获取id为btn的元素(button)
btn.onclick = function () {//给元素添加onclick事件
var arrays = new Array();//创建一个数组对象
var items = document.getElementsByName("check");//获取name为check 的一组元素(checkbox)
for (i = 0; i < items.length; i++) {//循环这组数据
if (items[i].checked) {//判断是否选中
arrays.push(items[i].value);//把符合条件的数据添加到数组中,push()是JavaScript 数组中的方法
}
}
alert("你选中的个数" + arrays.length);
}
(2)、基本选择器
| 描述 | 示例 |
| 改变id为one 的元素的背景色 |
$("#one").css("background"."#bbffaa"); |
|
改变class为mini的所有$(".mini")有元素的背景色 |
$(".mini").css("background"."#bbffaa" |
| 改变元素名是<div>的$("div")所有元素的背景色 | $("div").css("background"."#bbffaa"); |
| 改变所有元素的背景色 | $("*").css("background"."#bbffaa"); |
|
改变所有的<span>元素和id为two的元素的背景色 |
$("span,#two").css("background"."#bbffaa"); |
(3)、层级选择器
| 描述 | 示例 |
| 改变<body>内所有<div>的背景色 | $("body div").css("background","#bbffaa"); |
| 改变<body>内子<div>的背景色 | $("body >div").css("background","#bbffaa"); |
|
改变class为one 的下一个<div>同辈元素的背景色 |
$(".one+div").css("background","#bbffaa"); |
|
改变id为two的元素后面的所有<div>辈元素的背景色辈元素的背景色 |
$("#two~div").css("background","#bbffaa"); |
在层级选择器中,第1个,第2个比较常用,而后面两个因为在iQuery里可以用更加简单的方法代替
可以使用next()方法来代替$('prev+next')
$('prev+next')//选择器与next()方法的等价
$(".one +div"):
$(".one").next("div");
$('prev~siblings')//选择器与nextAlI()方法的等价关系选择器
$("#prev~div");
$("#prev").nextA11("div");
例子：
//选取#prev 之后的所有同辈div元素
$("#prev.~div").css("background","#bbffaa");
//同上
$("#prev").nextA11("div").css("background","#bbffaa");
//选取#rev所有的同辈div元素,无论前后位置
$("#prev").siblings("div").css("background"."#bbffaa");
(4)、过滤选择器
4.1、基本过滤选择器
| 选择器 | 描述 | 示例 |
| :first | 选取第1个元素 |
$("div:first")选取所有<div>元素中第1个<div>元素 |
| :last | 选取最后一个元素 | $("div:last")选取所有<div>元素中最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | $("input:not(.myClass)")选取class不是myClass的<input>元素 |
| :even | 选取索引是偶数的所有元素 | $("input:even")选取索引是偶数的 |
| :odd | 选取索引是奇数的所有元素 | $("input:odd")选取索引是奇数的 |
| :eq(index) | 选取索引等于 index 的元素 | $("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) | 选取索引大于index 的元素(index从0开始) | $("input:gt(1)")选取索引大于1的<input>元素(注:大于1,而不包括1) |
| :lt(index) | 选取索引小于index 的元素(index从0开始) | $("input:lt(1)")选取索引小于1的<input>元素(注:小于1,而不包括1) |
| :header | 选取所有的标题元素,例如hl,h2,h3等等 | $(":header")选取网页中所有的<h1><h2> |
| :animated | 选取当前正在执行动画的元素 | $("div:animated")选取正在执行动画的元素 |
| :focus | 选取当前获取焦点的元素 | $(:focus')选取当前获取焦点的元素 |
4.2、内容过滤选择器
| 选择器 | 描述 | 示例 |
| :contains(text) | 选取含有文本内容为“text”的元素 |
$("div:contains('我')")选取含有文本“我"的<div>元素 |
| :empty | 选取不包含子元素或者文本的空元素 |
$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 |
$("div:parent")选取拥有子元素(包括文本元素)的<div>元素 |
4.3、可见性选择器
| 选择器 | 描述 | 示例 |
| :hidden | 选取所有不可见的元素 |
$("hidden")选取所有不可见的元素。包括<inputtype="hidden"/>, <div style="display: none> |
| :visible | 选取所有可见的元素 |
$("div:visible")选取所有可见的<div>元素 |
4.4、属性过滤选择器
| 选择器 | 描述 | 示例 |
| [attribute] | 选取拥有此属性的元素 | $(" div[id]")选取拥有属性id的元素 |
| [attribute=value] | 选取属性的值等于 value的元素 |
$(" div[title=test")选取属性 title为“test的<div>元素 |
| [attribute!=value] | 选取属性的值不等于 value的元素 | $(" div[title!=test")选取属性 title不为“test的<div>元素
(注意:没有属性 title的<div>元素也会被选取) |
| [attribute^=value] | 选取属性的值以 value开始的元素 |
$(" div[ltitle^=test]")选取属性 title以“test开始的<div>元素 |
| [attribute$=value] | 选取属性的值以 value结束的元素 | $(" div[ltitle$=test]")选取属性 title以“test结束的<div>元素 |
| [attribute*=value] |
选取属性的值含有vaue的元素集合元素 |
$(" div[ltitle*=test]")选取属性 title有“test的<div>元素 |
| [attribute|=value] | 选取属性等于给定字符串或以该字符串为前级(该字符串后跟一个连字符“-”)的元素 | $('divl[titlel="en"]')选取属性 title不等于en或以en为前缀(该字符串后跟一个连字连字符“-”)的元素 |
| [attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | $('div[title~="uk"]')选取属性 title用空格分隔的值中包含字符uk的元素 |
| [attribute1][attribute2][attribute3] |
用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 |
$("div[id][title$='test']")选取拥有属性id并且属性title以“test”结束的<div>元素 |
4.5、子元素过滤选择器
| 选择器 | 描述 | 示例 |
| :nth-child(index/even/odd) | 选取每个父元素下的第 index个子元是从1开始的 |
eq( index)只匹配一个元素,而nth-child将为每个元素匹配子元素nth-child(index)的index是从1开始，:eq(index）index是从0开始 |
| :first-child | 选取每个父元素的第1个子元素 |
:first只返回单个元素,而 :first-child选择符将为每个父元素的匹配第1个子元素 例如s(" 'ul li:first-child");选取每个<ul>中第1个<li> |
| :last-child | 选取每个父元素的最后一个子元素 |
:last只返回单个元素,而 :last-child选择符将为每个父元素的匹配最后一个子元素 例如s(" 'ul li:last-child");选取每个<ul>中最后一个<li> |
| :only-child |
如果某个元素是它父元素中惟一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配 |
$("ul li:only-child")在ul中选取是唯一子元素的<li>元素 |
nth- childe选择器是很常用的子元素过滤选择器,详细功能如下。
(1)nth- child(even)能选取每个父元素下的索引值是偶数的元素。
(2) nth-child(od)能选取每个父元素下的索引值是奇数的元素。
(3)mnth- child(2)能选取每个父元素下的索引值等于2的元素
(4)nth- child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从1开始)。
(5) nth-child3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从1开始4.6、表单对象属性过滤选择器
| 选择器 | 描述 | 示例 |
| :enabled | 选取所有可用元素 |
s("# form1: enabled")选取id为“fom1”的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | s("# form1: disabled")选取id为“fom1”的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框复选框) | $(input: checked)选取所有被选中的< input>元素 |
| : selected |
选取所有被选中的选项元素(下拉列表) |
$("select option: selected");选取所有被选中的元素 |
4.7、表单选择器
| 选择器 | 描述 | 示例 |
| :input | 选取所有<input>、< textarea>、<select>和<button>元素 | $(:input) |
| :text | 选取所有的单行文本框 | $(:text) |
| :password | 选取所有的密码框 | $(:password) |
| :radio | 选取所有的单选按钮 | $(:radio) |
| :checked | 选取所有的复选框 | $(:checked) |
| :submit | 选取所有的提交按钮 | $(:submit) |
| :image | 选取所有的图像按钮 | $(:image) |
| :button | 选取所有的按钮 | $(:button) |
| :file | 选取所有的文件域 | $(:file) |
| :hidden | 选取所有的不可见元素 | $(:hidden) |
| :reset | 选取所有的重置按钮 | $(:reset) |
选择器的注意事项：如果选择器包含特殊符号 ".",".","#","(",或"]",需要用转义字符
<div id="one#">aa</div>//html代码
$('#one\#');//转义字符#
属性选择器@符号的问题：使用1.3.1版本以上的jQuery，不需要在属性前面加@符号
$("div[@title='test']");//错误写法
$("div[title='test']");//正确写法
选择器中的空格多一个或者少一个结果都会不一样
var $t_a=$(' test :hidden');//带空格的J0uery选择器
var $t_b=s('.test:hidden');//不带空格的J0uery选择器
var len_a= $t_a.length;
var len_b= $t_b.length;
alert("$('.test :hidden')="+len_a);//输出4
alert("$('.test:hidden')="+len_b);//输出3
二：jQuery的DOM操作
（1）、查找元素节点和属性节点
//html代码
<p title="选择你喜欢的水果">你最喜欢的水果</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
JavaScript代码：
var lis=$('ul li:eq(1)');//获取ul里第二个li节点
var lis_text=lis.text();//获取第二个li元素节点的文本内容
alert (lis_text);//打印文本内容
var p_attr=$("p").attr("title");//获取p元素节点属性title
alert (p_attr);//打印文本内容
（2）、创建节点
var li_1=$("<li></li>");//创建元素节点 $('ul').append(li_1);//添加到ul中 var li_2=$('<li>菠萝</li>');//创建带文本的节点 $('ul').append(li_2);//添加到ul中 var li_3=$('<li title="菠萝">菠萝</li>');//创建属性节点，title为属性节点 $('ul').append(li_3);//添加到ul中
（3）、插入节点
向每一个匹配的元素内容追加内容—— $("p").append("<b>李四</b>");//结果<p>我是<b>李四</b></p>
$(A).appendTo(B)将A追加到B中——$("<b>李四</b>").appendTo("p");//结果<p>我是<b>李四</b></p>
向每一个匹配的元素内部前置内容——$("p").prepend("<b>李四</b>");//结果<p><b>李四</b>我是</p>
$(A).appendTo(B)将A前置B中——$("<b>李四</b>").prependTo("p");//结果<p><b>李四</b>我是</p>
向每一个匹配的元素之后插入内容——$("p").after("<b>李四</b>");//结果<p>我是</p><b>李四</b>
$(A).insertAfter(B)将A插入B后面——$("<b>李四</b>").insertAfter("p");//结果<p>我是</p><b>李四</b>
向每一个匹配的元素之前插入内容——$("p").before("<b>李四</b>");//结果<b>李四</b><p>我是</p>
$(A).insertBefore(B)将A插入B前面——$("<b>李四</b>").insertBefore("p");//结果<b>李四</b><p>我是</p>
（4）、删除节点
1. remove0方法：该方法会把该节点的所有后代 节点同时删除，返回的是已被删除节点的引用，因此可以继续使用
var lis=$('ul li:eq(1)').remove();//删除第二个li
lis.appendTo("ul");//把刚刚删除的添加到ul中
$('ul li:eq(1)').remove().appendTo("ul");//直接写到一行
2. detach()方法：与remove()方法一样，不同的是，所有绑定的事件和数据都会保留下来
var lis=$('ul li:eq(1)').detach();//删除第二个li
lis.appendTo("ul");//把刚刚删除的添加到ul中，如果使用remove的话，那么它之前绑定的事件会失效
3. empty()方法：并不是删除，而是清空节点，清空元素中所有后代节点
var lis=$('ul li:eq(1)').empty();//清空li里面的内容，节点还会存在
（5）、复制节点clone (): 该方法中传递的参数是true，表示深度克隆，会把所绑定的事件和后代节点同事复制
$('ul li').click(function (){
$(this).clone (true).appendTo("ul");//复制当前点击的节点，追加到ul中
});
（5）、替换节点：两个方法用法一样，位置不一样
替换之前已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失
$("p").replaceWith("hello");//把p额内容替换为hello
$("<strong>hello</strong>").replaceAll("p");//注意：当使用replaceAll的时候，前面的要用标签如：strong包裹起来，不然就会被删除
（6）、包裹节点
$("p").wrap("<div></div>");//用div把p包裹起来，单个包裹，一个p一个div
$("p").wrapAll("<div></div>");//全部包裹
$("p").wrapInner("<div></div>");//div在p里面，包裹在里面
（7）、属性操作
$(p).attr("title");//获取p元素节点属性title
$(p).attr("title","you");//给p元素的title属性设置单个值
$(p).attr({"title":"you","name":"oso"});//给p元素的title属性设置单多个值
$(p).removeAttr("title");//删除p元素的title属性
（8）、样式操作
8.1、添加样式 attr和addClass的区别：
| 方法 | addClass | attr |
| 用途 | 追加样式 | 设置样式 |
| 对同一个网页操作 | <p>hello</p> | |
| 第一次使用方法 |
$('p').addClass('color');
|
$('p').attr('class','font');
|
| 第一次结果 | <p class="color">hello</p> | |
| 再次提交 | $('p').addClass('font'); |
$('p').attr('class','font');
|
| 最终结果 | <p class="color font">hello</p> | <p class="font">hello</p> |
$('p').attr('class');//可以用attr来获取p元素，
$('p').attr('class','font');//用attr来设置值$('p').addClass('color'); //是追加样式
8.2、移除样式：removeClass
$('p').removeClass('color').removeClass('font');//可以调用两次
$('p').removeClass()//不带参数会把全部样式移除
8.3、切换样式：toggleClass
8.4、判断是否有某个样式：hasClass，有返回true，负责返回false，为了增强代码的可读性，在jQuery内部，实际上是调用了is()方法
$('p').hasClass('color');//等于$('p').is('color');
（9）设置和获取HTML，文本和值
9.1、html方法，此方法类似与js的innerHTML方法，可读取和设置HTML内容，可以用于xhtml文档，但不能用于xml文档
9.2、text方法，此方法类似与js的innerText方法，可读取和设置文本内容，可以用于xhtml文档和xml文档，Js的innerText的属性不能在firefox浏览器上运行，而jquery的text的方法支持所有的浏览器
9.3、val方法，此方法类似与js的value方法，可读取和设置元素的值
9.3.1、当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则将地址框中的值清空
$('#input').focus(function(){//地址框获取鼠标焦点
var inputValue=$(this).val();//得到当前文本框的值
if(inputValue=='请输入邮箱地址'){//判断是否符合，则清空文本框}
$(this).val('');
}
});
上面的例子可以使用表单元素的defaultValue属性来实现同样的功能，this.defaultValue，当前文本框的默认值
$('#input').focus(function(){
var inputValue=$(this).val();
if(inputValue==this.defaultValue){
$(this).val('');
}
});
9.3.2、当地址框失去鼠标焦点时，如果地址宽的纸为空，则将地址框的值设置为“请输入邮箱地址”
$('#input').blur(function(){
var inputValue=$(this).val();
if(inputValue==''){
$(this).val('请输入邮箱地址');
}
});
val方法不仅能设置和获取元素的值，还有另外一个用途，就是它能使select， checkbox， radio相应的选项被选中，同样attr也可以实现同样的功能
$('#sel').val(['选择1号'])//选中2号，选择一个可用，可不用数组
$('#sel').val(['选择2号','选择3号']);//以数组的形式赋值
$(':radio').val(['radio1','radio2']);//CheckBox和radio要用数组的形式
$(':checkbox').val(['checkbox1','checkbox2']);
（10）、遍历节点
10.1、children：获取匹配元素的所有子元素的个数，只考虑子元素不考虑后代元素
10.2、next：取得匹配元素后面紧邻的同辈元素
10.3、prev：取得匹配元素前面紧邻的同辈元素
10.4、siblings：取得匹配元素前后所有的同辈元素
10.5、closest：取得最近的匹配元素检查当前元素是否匹配，如果匹配则返回，如果没有匹配则向上查找父元素，直到找到为止，如果没有找到，则会返回一个空，只返回匹配的第一个
10.6、parent：获取集合中每个匹配元素的附件，返回一个元素节点
10.7、parents：或者集合中每个匹配元素的祖先元素，返回多个父节点
（11）、cssDOM的操作：注意：如果只是数字，则会要加上像素值px，如果属性中带-符号，在设置的时候使用驼峰式写法fontSize
可以直接用css()方法，获取元素的样式，也可以设置样式，与attr方法一样
$('p').css({"fontSize":"50px","backgroundColor":"red"})
11.1、offset：有left和top，获取元素在当前视口的相对偏移值
11.2、position：有left和top，获取元素相对于最近的一个position样式，属性设置relative和absolute的祖父节点的相对便宜
11.3、scrollTop() 和scrollLeft()获取元素的滚动条距顶端和左侧的距离
$('p').height();//获取高度
$('p').height(500);//设置高度
$('p').offset().left;//获取p元素的offsetleft的值，元素必须设置了position为absolute或者relative
$('p').scrollTop()//获取元素的滚动条距顶端的距离
三：jQuery的事件和动画
（1）、判定事件，下面三种是相等的
$('p').click(function(){
alert("a")
});
$('p').on('click',function(){
alert("a")
});
$('p').bind('click',function(){
alert("a")
});