jquery培训教材(PPT 113页)

jquery培训教材作者：罗露第一章jquery简介第二章jquery选择器第三章jquery中的DOM操作第四章jquery中的事件和动画jQuery培训教材第一章　jQuery简介JavaScript库为简化JavaScript的开发封装了很多预定义的对象和函数兼容各大浏览器常见的JavaScript库PrototypeDojoYUIExtJSMooToolsjQuery认识jQueryjQuery是一个JavaScript库jQuery极大地简化了JavaScript编程jQuery很容易学习jQuery的理念：写得更少，做得更多（writeless,domore）jQuery有优势不污染顶级变量出色的浏览器兼容性链式操作方式隐式迭代行为层与结构层分离跟丰富的插件支持完善的文档开源轻量级强大的选择器出色的DOM操作可靠的事件处理完善的Ajax进入jQuery世界获得jQuery库（http://jquery.com）jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。jquery-版本号.js（无压缩版,用于测试、学习）jquery-版本号.min.js（压缩版,用于产品、项目)配置：无需安装，只需有库文件即可(库的替代：见备注)网页中引入jQuery库：注意：$(document).ready(function(){alert("HelloWorld!");});这是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。例如：试图隐藏一个不存在的元素获得未完全加载的图像的大小文档就绪函数jQuery对象与DOM对象DOM对象：HTML的文档对象模型中的元素对象。可通过javascript的以下方法获取jQuery对象：经jQuery包装后的DOM对象两者拥有的方法不同document.getElementById("test")document.getElementsByTagName("p")$("#test")$("p")jQuery对象与DOM对象相互转换jQuery对象转成DOM对象DOM对象转成jQuery对象var$test=$("#test");vartest=$test[0];//jQuery对象是一个数组，可通过索引得到DOM对象或vartest=$test.get(0);//用jQuery提供的get(index)方法得到DOM对象vartest=document.getElementById("test");var$test=$(test);//用jQuery的工厂方法解决jQuery与其它库的冲突jQuery在其它库之后导入jQuery.noConflict();让出$使用权然后用jQuery而不用$jQuery在其它库之前导入直接用jQuery而不用$，同时，可以使用$()方法作为其它库的快捷方式详情见备注。jQuery开发工具和插件Dreamweaver为了使Dreamweaver支持自动提示需要到http://xtnd.us/dreamweaver/jquery下载一个插件：jQuery_API.mxp（如有需要见：“jquery例子集合”文件夹中jQuery_API.mxp）在DW中选择“命令”-“扩展管理”-“安装扩展”EclipsejQueryWTP插件www.langtags.com/jquerywtp下载Spket插件：http://spket.com下载jQuery开发工具和插件AptanaVisualStudio2010（已包含jquery-1.4.1）jQuery培训教材第二章　jQuery选择器什么是jQuery选择器方便找出文档中的DOM元素可对找出的元素添加相应行为兼容各种浏览器jQuery选择器的优点写法简洁$("#ID")、$(".class")、$("TagName")…支持CSS1~CSS3选择器无需考虑特定浏览器是否支持完善的处理机制元素不存在不会出错注意：判断元素是否存在，要判断jQuery对象的长度是否>0，或者转换成DOM对象来判断//不能用下面方式判断元素是否存在if($("#test"))//可用以下两种方式判断元素是否存在if($("#test").length>0)或if($("#test")[0])//javascript代码，元素不存在会出错document.getElementById("test").style.color="red";//jQuery代码，元素不存在不出错$("#test").css("color","red");jQuery选择器的类型基本选择器层次选择器过滤选择器基本过滤选择器

内容

财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容

过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器

表

关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf

单域对象属性过滤选择器表单选择器基本选择器基本选择器#id#id返回值:Array(1)概述:根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。(2)参数：idString用于搜索的，通过元素的id属性中给定的值(3)示例：例一：描述：查找含有特殊字符id=“run[button]的元素”。代码见：“jquery例子集合”文件夹中的examples.html基本选择器.class.class返回值:Array(1)概述:根据给定的类匹配元素。(2)参数：classString一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。(3)示例：例一：描述：选取class=“font”的元素。代码见：“jquery例子集合”文件夹中的examples.html基本选择器elementelement返回值:Array(1)概述:根据给定的元素名匹配所有元素(2)参数：elementString一个用于搜索的元素。指向DOM节点的标签名。(3)示例：例一：描述：查找一个p元素。代码见：“jquery例子集合”文件夹中的examples.html基本选择器**返回值:Array(1)概述:匹配所有元素多用于结合上下文来搜索。(2)示例：例一：描述：找到form下的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.html基本选择器selector1,selector2,selectorNselector1、selector2、selectorN返回值:Array(1)概述:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。(2)参数：selector1Selector一个有效的选择器selector2Selector另一个有效的选择器selectorN(可选)Selector任意多个有效选择器(3)示例：例一：描述：找到匹配任意一个类的元素，并设置字体颜色为红色代码见：“jquery例子集合”文件夹中的examples.html层次选择器后两种选择器较少用因为jQuery中有更简单的方法代替：next()代替$("prev+next")nextAll()代替$("prev~siblings")层次选择器ancestordescendantancestordescendant返回值:Array(1)概述:在给定的祖先元素下匹配所有的后代元素(2)参数：ancestorSelector任何有效选择器descendantSelector用以匹配元素的选择器，并且它是第一个选择器的后代元素(3)示例：例一：描述：找到form下的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.html层次选择器parent>childparent>child返回值:Array(1)概述:在给定的父元素下匹配所有的子元素(2)参数：parentSelector任何有效选择器childSelector用以匹配元素的选择器，并且它是第一个选择器的子元素(3)示例：例一：描述：匹配表单中所有的子级label元素，并设置字体颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html层次选择器prev+nextpre+next返回值:Array(1)概述:匹配所有紧接在prev元素后的next元素(2)参数：preSelector任何有效选择器nextSelector一个有效选择器并且紧接着第一个选择器(3)示例：例一：描述：匹配所有跟在label后面的input元素，并设置边框为蓝色。代码见：“jquery例子集合”文件夹中的examples.html层次选择器prev~siblingsprev~siblings返回值:Array(1)概述:匹配prev元素之后的所有siblings元素(2)参数：prevSelector任何有效选择器siblingsSelector一个选择器，并且它作为第一个选择器的同辈(3)示例：例一：描述：找到所有与表单同辈的input元素，并设置边框为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器过滤选择器-基本过滤选择器:firstfirst()/:first返回值:jQuery(1)概述:获取第一个元素(2)示例：例一：描述：获取第一个th元素，并设置背景色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:lastlast()/:last()返回值:jQuery(1)概述:获取最后个元素(2)示例：例一：描述：获取最后一个th元素，并设置背景色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:not(select):not(selector)返回值:Array(1)概述:去除所有与给定选择器匹配的元素在jQuery1.3中，已经支持复杂选择器了（例如:not(diva)和:not(div,a)）(2)参数:selectorSelector用于筛选的选择器(3)示例：例一：描述：只有对不在执行动画效果的元素执行一个动画特效代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:even:even返回值:Array(1)概述:匹配所有索引值为偶数的元素，从0开始计数(2)示例：例一：描述：表格中偶数行高亮显示。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:odd:odd返回值:Array(1)概述:匹配所有索引值为奇数的元素，从0开始计数(2)示例：例一：描述：表中奇数行不高亮显示。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:eq(index):eq(index)返回值:Array(1)概述:匹配一个给定索引值的元素(2)参数:indexNumber从0开始计数(3)示例：例一：描述：在表格中查找第二个th。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:gt(index):gt(index)返回值:Array(1)概述:匹配所有大于给定索引值的元素(2)参数:indexNumber从0开始计数(3)示例：例一：描述：在表格中查找索引值大于21的td。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:lt(index):lt(index)返回值:Array(1)概述:匹配所有大于给定索引值的元素(2)参数:indexNumber从0开始计数(3)示例：例一：描述：在表格中查找索引值小于2的td。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:header:header返回值:Array(1)概述:匹配如h1,h2,h3之类的标题元素(2)示例：例一：描述：给页面内所有标题加上背景色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-基本过滤选择器:animated:animated返回值:Array(1)概述:匹配所有正在执行动画效果的元素(2)示例：例一：描述：只有对不在执行动画效果的元素执行一个动画特效代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-内容过滤选择器过滤选择器-内容过滤选择器:contains(text):contains(text)返回值:Array(1)概述:匹配包含给定文本的元素(2)示例：例一：描述：查找所有包含"123"的td元素。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-内容过滤选择器:empty:empty返回值:Array(1)概述:匹配所有不包含子元素或者文本的空元素(2)示例：例一：描述：查找所有不包含子元素或者文本的空元素。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-内容过滤选择器:has(selector):has(selector)返回值:Array(1)概述:匹配含有选择器所匹配的元素的元素(2)参数:selectorSelector一个用于筛选的选择器(3)示例：例一：描述：给所有包含a元素的div元素设置div中的字体颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-内容过滤选择器:parent:parent返回值:Array(1)概述:查找所有含有子元素或者文本的td元素(2)示例：例一：描述：查找所有含有子元素或者文本的td元素HTML代码:

Value1
Value2

jQuery代码:$("td:parent")结果：[Value1,Value2]过滤选择器-可见性过滤选择器过滤选择器-可见性过滤选择器:hidden:hidden返回值:Array(1)概述:匹配所有不可见元素，或者type为hidden的元素(2)示例：例一：描述：查找隐藏的trHTML代码:

Value1

Value2

jQuery代码:$("tr:hidden")结果：Value1过滤选择器-可见性过滤选择器:hidden例二：描述：匹配type为hidden的元素HTML代码:

jQuery代码:$("input:hidden")结果：[]过滤选择器-可见性过滤选择器:visible:visible返回值:Array(1)概述:匹配所有的可见元素(2)示例：例一：描述：查找所有可见的tr元素HTML代码:

Value1

Value2

jQuery代码:$("tr:visible")结果：Value2过滤选择器-属性过滤选择器过滤选择器-属性过滤选择器[attribute][attribute]返回值:Array(1)概述:匹配包含给定属性的元素。注意，在jQuery1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。(2)参数:attributeString属性名(3)示例：例一：描述：查找所有name属性是none2的input元素，并设置边框为绿色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-属性过滤选择器[attribute=value][attribute=value]返回值:Array(1)概述:匹配给定的属性是某个特定值的元素(2)参数:attributeString属性名value(可选)String属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。(3)示例：例一：描述：查找所有name属性是none2的input元素，并设置边框为绿色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-属性过滤选择器[attribute!=value][attribute!=value]返回值:Array(1)概述:匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])(2)参数:attributeString属性名value(可选)String属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。(3)示例：例一：描述：查找所有name属性不是online的input元素代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-属性过滤选择器[attribute^=value][attribute^=value]返回值:Array(1)概述:匹配给定的属性是以某些值开始的元素(2)参数:attributeString属性名value(可选)String属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。(3)示例：例一：描述：查找所有name以'news'开始的input元素HTML代码:过滤选择器-属性过滤选择器[attribute^=value]jQuery代码:$("input[name^='news']")结果：[,]过滤选择器-属性过滤选择器[attribute$=value][attribute$=value]返回值:Array(1)概述:匹配给定的属性是以某些值结尾的元素(2)参数:attributeString属性名value(可选)String属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。(3)示例：例一：描述：查找所有name以'letter'结尾的input元素HTML代码:过滤选择器-属性过滤选择器[attribute$=value]jQuery代码:$("input[name$='letter']")结果：[,]过滤选择器-属性过滤选择器[attribute*=value][attribute*=value]返回值:Array(1)概述:匹配给定的属性是以包含某些值的元素(2)参数:attributeString属性名value(可选)String属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。(3)示例：例一：描述：查找所有name包含'man'的input元素HTML代码:过滤选择器-属性过滤选择器[attribute*=value]jQuery代码:$("input[name*='man']")结果：[,,]过滤选择器-属性过滤选择器[selector1][selector2][selectorN][selector1][selector2][selectorN]返回值:Array(1)概述:复合属性选择器，需要同时满足多个条件时使用。(2)参数:selector1Selector属性选择器selector2Selector另一个属性选择器，用以进一步缩小范围selectorNSelector任意多个属性选择器过滤选择器-属性过滤选择器[selector1][selector2][selectorN](3)示例：例一：描述：找到所有含有id属性，并且它的name属性是以man结尾的HTML代码:jQuery代码:$("input[id][name$='man']")结果：[]过滤选择器-子元素过滤选择器过滤选择器-子元素过滤选择器:nth-child:nth-child返回值:Array(1)概述:匹配其父元素下的第N个子或奇偶元素':eq(index)'只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:：nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(2):nth-child(3n+1)、:nth-child(3n+2)(2)参数:indexNumber要匹配元素的序号，从1开始(3)示例：例一：描述：在每个ul查找第2个li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-子元素过滤选择器:first-child:first-child返回值:Array(1)概述:匹配第一个子元素':first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素(2)示例：例一：描述：在每个ul中查找第一个li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-子元素过滤选择器:last-child:last-child返回值:Array(1)概述:匹配最后一个子元素':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素(2)示例：例一：描述：在每个ul中查找最后一个li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-子元素过滤选择器:only-child:only-child返回值:Array(1)概述:如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。(2)示例：例一：描述：在ul中查找是唯一子元素的li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器过滤选择器-表单域对象属性过滤选择器:enabled:enabled返回值:Array(1)概述:匹配所有可用元素(2)示例：例一：描述：查找所有可用的input元素代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器:disabled:disabled返回值:Array(1)概述:匹配所有不可用元素(2)示例：例一：描述：查找所有不可用的input元素代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器:checked:checked返回值:Array(1)概述:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)(2)示例：例一：描述：查找所有选中的复选框元素代码见：“jquery例子集合”文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器:selected:selected返回值:Array(1)概述:匹配所有选中的option元素(2)示例：例一：描述：查找所有选中的选项元素代码见：“jquery例子集合”文件夹中的examples.html表单选择器表单选择器:input:input返回值:Array(1)概述:匹配所有input,textarea,select和button元素(2)示例：例一：描述：查找所有的input，textarea,select和button元素，并设置背景色为淡蓝色。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:text:text返回值:Array(1)概述:匹配所有的单行文本框(2)示例：例一：描述：查找id=“form”的表单下的所有文本框，并设置边框为紫色。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:password:password返回值:Array(1)概述:匹配所有密码框(2)示例：例一：描述：查找id=“form”的表单下的所有密码框，并设置边框为黄色。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:radio:radio返回值:Array(1)概述:匹配所有单选按钮(2)示例：例一：描述：查找id=“form”的表单下的所有单选按钮，并设置size=“20”。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:checkbox:checkbox返回值:Array(1)概述:匹配所有复选框(2)示例：例一：描述：查找id=“form”的表单下的所有复选框，并设置size=“20”。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:submit:submit返回值:Array(1)概述:匹配所有提交按钮(2)示例：例一：描述：查找id=“form”的表单下的所有提交按钮。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:image:image返回值:Array(1)概述:匹配所有图像域(2)示例：例一：描述：匹配id=“form”的表单下的所有图像域。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:reset:reset返回值:Array(1)概述:匹配所有重置按钮(2)示例：例一：描述：查找id=“form”的表单下的所有重置按钮。代码见：“jquery例子集合”文件夹中的examples.html表单选择器:button:button返回值:Array(1)概述:匹配所有按钮(2)示例：例一：描述：查找id=“form”的表单下的所有按钮.代码见：“jquery例子集合”文件夹中的examples.html表单选择器:hidden:hidden返回值:Array(1)概述:匹配所有不可见元素，或者type为hidden的元素(2)示例：例一：描述：查找隐藏的trHTML代码:

Value1

Value2

jQuery代码:$("tr:hidden")结果：[Value1]表单选择器:hidden例二：描述：匹配type为hidden的元素HTML代码:

jQuery代码:$("input:hidden")结果：[]表单选择器:file:file返回值:Array(1)概述:匹配所有文件域(2)示例：例一：描述：查找id=“form”的表单下的所有文件域代码见：“jquery例子集合”文件夹中的examples.htmljQuery培训教材第三章　jQuery中的DOM操作jQueryDOM操作节点操作(文档处理)查找创建插入删除复制替换包裹遍历jQueryDOM操作属性操作属性CSS类(样式操作)HTML文本值CSSDOM操作DOM操作分类DOMCore（核心）任何一种支持DOM的语言都可使用它可用来处理任何一种标记语言文档getElementById(),getElementsByTagNamegetAttribute(),setAttribute()等HTML-DOM仅用来处理HTML文档，处理HTML更方便CSS-DOM针对CSS的操作//DOMCoredocument.getElementsByTagName("form");element.getAttribute("src");//HTML-DOMdocument.formselement.src//CSS-DOMelement.style.color="red";jQuery中的DOM操作-节点操作查找节点使用选择器查找节点var$li=$(".nm_ulli:eq(1)");//获取第二个

元素节点varli_txt=$li.text();//输出第二个

元素节点的text创建节点var$li_1=$("

");var$li_1=$("

文本

");var$li_1=$("文本");jQuery中的DOM操作-节点操作插入节点示例：见：“jquery例子集合”文件夹中的examples.htmljQuery中的DOM操作-节点操作删除节点remove()：删除所有匹配的元素$("ulli:eq(1)").remove();empty()：清空所有匹配元素的子节点复制节点$(this).clone().appendTo("body");$(this).clone(true).appendTo(“body”);参数true表示绑定事件示例：见：“jquery例子集合”文件夹中的examples.htmljQuery中的DOM操作-节点操作替换节点replaceWith()$("p").replaceWith("

haha…

");replaceAll()$("

haha…

").replaceAll("p");替换后原来元素的事件也消失jQuery中的DOM操作-节点操作包裹节点wrap():将所有匹配元素单独包裹起来$("p").wrap("");wrapAll():将所有匹配元素一起包裹起来$("p").wrapAll("");wrapInner():将所有匹配元素的子内容包裹起来$("p").wrapInner("");示例：见：“jquery例子集合”文件夹中的wrap.html和wrapInner.htmljQuery中的DOM操作-节点操作遍历节点jQuery中的DOM操作-属性操作属性操作获取属性的值varp_tl=$("p").attr("title");设置单个属性的值$("p").attr("title","haha…");同时设置多个属性$("p").attr({"title":"haha…","name":"p1"});删除属性$("p").removeAttr("title");jQuery中的DOM操作-CSS类(样式操作)样式操作获取样式varstyle=$("p").attr("class");设置样式$("p").attr("class","highlight");追加样式$("p").addClass("thin");移除样式$("p").removeClass("highlight");jQuery中的DOM操作-CSS类(样式操作)样式操作切换样式$("p").toggleClass("test");在添加和移除样式test间切换判断是否含有某个样式if($("p").hasClass("highlight"))示例：见：“jquery例子集合”文件夹中的examples.htmljQuery中的DOM操作-HTML、文本和值的操作设置和获取HTML、文本和值html()方法：类似innerHTMLtext()方法：类似innerTextval()方法：类似于valuejQuery中的DOM操作-CSS-DOM操作CSS-DOM操作获取CSS样式属性的值varcolor=$("p").css("color");设置CSS样式属性的值$("p").css("color","red");$("p").css({"color":"red","fontSize":"30px"});获取和设置元素的宽高height()、width()jQuery中的DOM操作-CSS-DOM操作CSS-DOM操作offset()方法：获取元素在当前视窗的相对偏移position()方法：获取元素相对于最近一个position为relative或absolute的父节点的相对偏移scrollTop()方法和scorllLeft()方法获取和设置元素滚动的上边距和左边距示例：见：“jquery例子集合”文件夹中的"css-dom位置操作"jQuery培训教材第四章　jQuery中的事件和动画为加载页面绑定事件处理window.onload与$(document).ready()的区别前面已经介绍如果希望jQuery也在加载完所有页面内容后再执行代码的话，可以用：$(window).load(function(){});事件绑定bind()方法bind(type，[data],fn);参数type：事件类型。包括：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等参数data：可选，传递给事件对象的额外数据参数fn：事件回调函数示例：描述：“投他一票”和“取消投票”的click事件的绑定代码见“jquery例子集合”文件夹中的examples.html合成事件一个合成事件可绑定多个回调函数hover()方法语法：hover(enter,leave);用于光标悬停事件。当光标移到元素上，执行第一个函数当光标移出元素，则执行第二个函数示例：描述：p元素字体颜色代码见“jquery例子集合”文件夹中的examples.htmltoggle()方法语法：toggle(fn1,fn2,fn3,…fnN);光标单击元素时轮流执行各个回调函数示例：见“jquery例子集合”文件夹中的examples.html移除事件一个事件可绑定多个回调函数一个回调函数也可被多个事件绑定移除事件unbind():移除所有事件绑定unbind("click"):移除click事件所有绑定unbind("click",func1):移除click事件绑定的func1函数另：one()方法与bind()方法类似，但绑定的函数执行一次后就自动移除示例：描述：“投他一票”和“取消投票”的click事件的移除代码见“jquery例子集合”文件夹中的examples.htmljQuery中的动画show()与hide()方法同时改变大小和不透明度可无参，或有参参数可为：slow,normal,fast或毫秒数（slow:600ms,normal:400ms,fast:200ms）$("element").show("slow");$("element").hide("fast");$("element").show(1000);示例：描述：id=“b”的b元素隐藏和显示代码见“jquery例子集合”文件夹中的examples.htmljQuery中的动画fadeIn()与fadeOut()方法仅改变不透明度参数与show(),hide()一样slideUp()与slideDown()方法仅改变高度参数与show(),hide()一样示例：描述：id分别为“red”、“green”和“blue”的div透明度的渐变。代码见“jquery例子集合”文件夹中的examples.htmljQuery中的动画animate()方法用于自定义动画语法：animate(params,speed,callback)params:样式属性值对{left:"300px",top:"100px"}speed:速度参数，可选callback:动画完成时执行的函数，可选示例：描述：只有对不在执行动画效果的元素执行一个动画特效代码见：“jquery例子集合”文件夹中的examples.htmljQuery中的动画停止动画stop()方法语法：stop([clearQueue][,gotoEnd])两个参数均为boolean值第一个参数为true表示停止整个动画队列第二个参数为true表示直接到动画的最终状态判断元素是否处于动画状态$("element").is(":animated")示例：描述：只有对不在执行动画效果的元素暂停一个动画特效代码见：“jquery例子集合”文件夹中的examples.htmljQuery中的动画其它动画方法toggle()方法：切换元素的可见状态相当于切换调用show()和hide()$("#div1").toggle();slideToggle()方法：通过调整高度切换元素可见相当于切换调用slideUp()和slideDown()fadeTo()方法：将元素不透明度调整到指定值$("#div1").fadeTo(600,0.2);示例：描述：id分别为“red”、“green”和“blue”的div透明度的渐变。代码见“jquery例子集合”文件夹中的examples.html