jquery培训

jquery培训教材-作者：罗露第一章jquery简介第二章jquery选择器第三章jquery中的DOM操作第四章jquery中的事件和动画jQuery培训教材第一章jQuery简介JavaScript库•为简化JavaScript的开发•封装了很多预定义的对象和函数•兼容各大浏览器常见的JavaScript库•Prototype•Dojo•YUI•ExtJS•MooTools•jQuery认识jQuery•jQuery是一个JavaScript库•jQuery极大地简化了JavaScript编程•jQuery很容易学习•jQuery的理念：写得更少，做得更多（writeless,domore）jQuery有优势•不污染顶级变量•出色的浏览器兼容性•链式操作方式•隐式迭代•行为层与结构层分离•跟丰富的插件支持•完善的文档•开源•轻量级•强大的选择器•出色的DOM操作•可靠的事件处理机制•完善的Ajax进入jQuery世界•获得jQuery库（）jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。–jquery-版本号.js（无压缩版,用于测试、学习）–jquery-版本号.min.js（压缩版,用于产品、项目)•配置：无需安装，只需有库文件即可(库的替代：见备注)•网页中引入jQuery库：headscripttype=text/javascriptsrc=jquery.js/script/head注意：script标签应该位于页面的head部分。在HTML5中，不必在script标签中使用type=text/javascript。JavaScript是HTML5以及所有现代浏览器中的默认脚步语言！jQuery基础语法•基础语法是：$(selector).action()–美元符号定义jQuery（又称工厂函数）–选择器（selector）“查询”和“查找”HTML元素–action()执行对元素的操作•示例$(this).hide()//隐藏当前元素$(p).hide()//隐藏所有段落$(p.test).hide()//隐藏所有class=test的段落$(#test).hide()//隐藏第id=test的元素jQuery代码风格•链式操作风格–对于同一对象不超过3个操作，可直接写一行–对同一对象的操作较多，建议每行写一个操作•添加必要的注释$(has_children).click(function(){$(this).addClass(highLight).children(a).show().end().siblings().removeClass(highLight).children(a).hide();});文档就绪函数•$(document).ready()：类似window.onload定义文档加载完后执行的函数headscripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascript$(document).ready(function(){alert(HelloWorld!);});/script/head这是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。例如：试图隐藏一个不存在的元素获得未完全加载的图像的大小文档就绪函数window.onload与$(document).ready()的对比window.onload$(document).ready()执行时机必须等网页中所有内容加载完后（包括图片）才能执行网页中所有DOM结构绘制完后就执行编写个数不能编写多个window.onload=function(){};window.onload=function(){};此时第二个覆盖第一个能同时编写多个$(document).ready(function(){});$(document).ready(function(){});两个函数都执行简化写法无$()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支持自动提示需要到下载一个插件：jQuery_API.mxp（如有需要见：“jquery例子集合”文件夹中jQuery_API.mxp）–在DW中选择“命令”-“扩展管理”-“安装扩展”•Eclipse–jQueryWTP插件下载–Spket插件：开发工具和插件•Aptana•VisualStudio2010（已包含jquery-1.4.1）jQuery培训教材第二章jQuery选择器什么是jQuery选择器•方便找出文档中的DOM元素•可对找出的元素添加相应行为•兼容各种浏览器jQuery选择器的优点•写法简洁–$(#ID)、$(.class)、$(TagName)…•支持CSS1~CSS3选择器–无需考虑特定浏览器是否支持•完善的处理机制–元素不存在不会出错–注意：判断元素是否存在，要判断•jQuery对象的长度是否0，或者•转换成DOM对象来判断//不能用下面方式判断元素是否存在if($(#test))//可用以下两种方式判断元素是否存在if($(#test).length0)或if($(#test)[0])//javascript代码，元素不存在会出错scripttype=text/javascriptdocument.getElementById(test).style.color=red;/script//jQuery代码，元素不存在不出错scripttype=text/javascript$(#test).css(color,red);/scriptjQuery选择器的类型•基本选择器•层次选择器•过滤选择器–基本过滤选择器–内容过滤选择器–可见性过滤选择器–属性过滤选择器–子元素过滤选择器–表单域对象属性过滤选择器•表单选择器基本选择器选择器描述返回示例#id根据给定id匹配一个元素单个元素$(#t)选取id为t的元素.class根据给定类名匹配元素集合元素$(.t)选取所有class为t的元素element根据给定元素名匹配元素集合元素$(p)选取所有p元素*匹配所有元素集合元素$(*)选取所有元素selector1,selector2,selector3,…将每个选择器匹配到的元素合并后一起返回集合元素$(div,span,p.myclass)选取所有div,span和拥有class为myclass的p标签的一组元素基本选择器#id#id返回值:ArrayElement(1)概述:根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。(2)参数：idString用于搜索的，通过元素的id属性中给定的值(3)示例：例一：描述：查找含有特殊字符id=“run[button]的元素”。代码见：“jquery例子集合”文件夹中的examples.html基本选择器.class.class返回值:ArrayElement(s)(1)概述:根据给定的类匹配元素。(2)参数：classString一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。(3)示例：例一：描述：选取class=“font”的元素。代码见：“jquery例子集合”文件夹中的examples.html基本选择器elementelement返回值:ArrayElement(s)(1)概述:根据给定的元素名匹配所有元素(2)参数：elementString一个用于搜索的元素。指向DOM节点的标签名。(3)示例：例一：描述：查找一个p元素。代码见：“jquery例子集合”文件夹中的examples.html基本选择器**返回值:ArrayElement(s)(1)概述:匹配所有元素多用于结合上下文来搜索。(2)示例：例一：描述：找到form下的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.html基本选择器selector1,selector2,selectorNselector1、selector2、selectorN返回值:ArrayElement(s)(1)概述:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。(2)参数：selector1Selector一个有效的选择器selector2Selector另一个有效的选择器selectorN(可选)Selector任意多个有效选择器(3)示例：例一：描述：找到匹配任意一个类的元素，并设置字体颜色为红色代码见：“jquery例子集合”文件夹中的examples.html层次选择器选择器描述返回示例$(ancestordescendant)选取ancesdor元素里的所有descendant(后代)元素集合元素$(divspan)选取div里所有的span元素$(parentchild)选取parent元素下的直接child元素，而不是所有后代元素集合元素$(divspan)选取div下span子元素$(prev+next)选取紧接在prev元素后的next元素集合元素$(.one+div)选取class为one的下一个div兄弟元素$(prev~siblings)选取prev元素之后的所有siblings元素集合元素$(#two~div)选取id为two元素后面的所有div兄弟元素后两种选择器较少用因为jQuery中有更简单的方法代替：next()代替$(prev+next)nextAll()代替$(prev~siblings)层次选择器ancestordescendantancestordescendant返回值:ArrayElement(s)(1)概述:在给定的祖先元素下匹配所有的后代元素(2)参数：ancestorSelector任何有效选择器descendantSelector用以匹配元素的选择器，并且它是第一个选择器的后代元素(3)示例：例一：描述：找到form下的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.html层次选择器parentchildparentchild返回值:Arra