jQuery教程PPT课件

1、.,1,Jquery基础教程,.,2,jQuery优势轻量级强大的选择器出色的DOM操作的封装可靠的事件处理机制完善的Ajax不污染顶级变量出色的浏览器兼容性链式操作方式隐式迭代行为和结构层分离丰富的插件支持完善的文档开源,.,3,jQuery选择器是其最核心的部分分为四大类基本选择器层次选择器过滤选择器表单选择器,.,4,基本选择器是最常用的选择器可以根据标签的名字、ID名字或者class名字来选择元素#id根据指定的id来匹配元素.class根据制定的类名字来匹配元素element根据指定的元素的名字匹配元素*匹配所有的元素selector1,selector2,selectorN将每一个

2、匹配到的元素合并到一起返回,.,5,层次选择器jQuery(ancestordescendant):选取ancestor中的所有的descendant(后代)元素jQuery(parentchild):选取parent中的所有的child(子元素)jQuery(prev+next):选取紧跟在prev后的同级别的next元素可用next()方法代替jQuery(prevsiblings):选取紧跟在prev后的同级别的所有的元素可用nextAll()方法代替,.,6,过滤选择器分为：基本过滤选择器内容过滤选择器可见性过滤选择器子元素过滤选择器属性过滤选择器表单过滤选择器,.,7,基本过滤选择器

3、:first选取第一个元素:last选取最后一个元素:not(selector)去除与跟定选择器匹配的元素:even选取索引值为偶数的所有的元素从0开始:odd选取索引值为奇数的所有的元素从0开始:eq(index)选取索引值等于index的所有的元素从0开始:gt(index)选取索引值大于index的所有的元素从0开始:lt(index)选取索引值小于index的所有的元素从0开始:header选取所有的标题元素例如h1h2h3等:animated选取所有的正在执行动画的元素,.,8,内容过滤选择器:contains(text)选取含有文本内容为text的元素:empty选取不包含子元素的

4、空元素:has(selector)选取含有选择器所匹配的元素的元素:parent选取含有子元素的元素,.,9,可见性过滤选择器:hidden选取所有的不可见的元素:visible选取所有的可见的元素,.,10,属性过滤选择器attribute选取拥有此属性的元素attribute=value选取属性值为value的元素attribute!=value选取属性值不等于value的元素也包括不含属性名为attribute的元素attribute=value选取属性值以value开头的元素attribute$=value选取属性值以value结尾的元素attribute*=value选取属性值含有v

5、alue的元素selector1selector2selector3用属性选择器合并成一个复合选择器,.,11,子元素过滤选择器nth-child(index/even/odd/equation)选取每个父元素下的第index子元素/奇元素/偶元素/比较元素索引从1开始first-child选取每个父元素的第一个子元素last-child选取每个父元素的最后一个元素only-child如果该元素是其父元素的唯一的子元素那么该元素就会匹配到注意与基本过滤选择器的区别,.,12,表单过滤选择器:enabled选取所有的可见的元素:disabled选取所有的不可见的元素:checked选取所有的选中

6、的元素(单选框、复选框):selected选取所有的被选中的元素(下拉菜单),.,13,表单选择器:input选取所有的、元素:text选取所有的单行文本框:password选取所有的密码框:radio选取所有的单选按钮:checkbox选取所有的复选按钮:submit选取所有的提交按钮:image选取所有的图像按钮:reset选取所有的重置按钮:button选取所有的button:file选取所有的上传域:hidden选取所有的不可见元素(包括display为none的),.,14,jQuery中DOM操作append()向匹配的元素追加内容appendTo()颠倒append()操作pre

7、pend()向匹配的元素前置内容preprendTo()颠倒prepend()操作after()在匹配的元素后插入内容insertAfter()颠倒after()操作before()在匹配的元素前插入内容insertBefore()颠倒before()操作,.,15,元素操作：remove()删除节点例jQuery(ulli).remove()也可在remove()中添加过滤条件jQuery(ulli).remove(lititle!=菠萝)empty()清空节点jQuery(ulli:eq(1).empty()清空第二个li元素中的内容clone()复制节点jQuery(#li).clone

8、().appendTo(ul)如果想在复制节点的同时也具有行为可用clone(true)replaceWith()替换节点如jQuery(p).replaceWith(你最不喜欢的水果是?)replaceAll()颠倒replaceWith()操作如jQuery(你最不喜欢的水果是？).replaceAll(p);,.,16,wrapAll()将所有的匹配的元素用一个元素来包裹如jQuery(strong).wrapAll()会得到你最喜欢的水果1你最喜欢的水果2wrap()将每个匹配的元素用一个元素包裹起来如jQuery(strong).wrap()会得到你最喜欢的水果1你最喜欢的水果2wr

9、apInner()将每个匹配的子元素用另外一个元素包裹起来,.,17,属性操作获取和设置属性获取:jQuery(p).attr(title)设置属性:jQuery(p).attr(title,yourtitle);删除属性jQuery(p).removeAttr(title)样式操作jQuery(p).attr(class,classname);追加样式jQuery(p).addClass()移除样式jQuery(p).removeClass(),.,18,toggleClass()切换样式hasClass()判断是否含有某个样式同is(.className)html()获取或者设置html代

10、码text()获取或者设置文本框的值val()获取或者设置表单元素的值children()获取匹配元素的子元素next()获取匹配元素后紧邻的同辈的元素prev()获取匹配元素前紧邻的同辈的元素nextAll()获取匹配元素后的所有的同辈的元素siblings()获取匹配元素前台所有的同辈的元素closest()获取匹配元素最近的元素find()查找匹配元素的所有的后代元素css()设置获取获取css样式可以传输json格式的参数批量的设置多个样式height()设置或者获取元素的高度注意和css(height)的区别width()设置或者获取元素的宽度注意和css(width)的区别,.,1

11、9,offset()获取元素在当前视窗的相对偏移返回的是个对象包括top和left两个属性position()获取元素相对于最近的一个position样式属性设置为relative和absolute的祖父节点的相对的偏移返回的也是个对象包括top和left两个属性scrollTop()获取元素的滚动条距顶端的距离scrollLeft()获取元素的滚动条距左边的距离jQuery中的事件注意jQuery(document).ready()和window.onload的区别事件绑定bind(type,data,fn)第一个为事件类型包括blur,focus,load,resize,scroll,un

12、load,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也可以是自定义事件名称第二个为可选的参数第三个为绑定的处理函数,.,20,简写绑定操作jQuery(p).click(fn),jQuery(mouseover).click(fn)合成事件主要有两个jQuery(p).toggle(fn1,fn2)单击的时候分别执行fn1和fn2两个函数hover(fn1,fn2)鼠标移

13、上去和移走的时候分别执行fn1和fn2两个函数事件冒泡如果想阻止冒泡的话可以用event.stopPropagation()阻止事件的默认行为可以采用event.preventDefault()如果上面两个都想阻止可以直接在fn中returnfalse事件对象的属性event.type:获取事件的类型如clickdbclickevent.preventDefault():阻止事件的默认行为event.stopPropagation():阻止事件的冒泡event.target()获取触发事件的元素event.relatedTarget()获取相关元素,.,21,event.pageX()获取光标

14、相对于页面的x坐标event.pageY()获取光标相对于页面的y坐标event.which()在鼠标单击事件中获取到鼠标的左中右键event.metaKey()键盘事件中获取ctrl键event.originalEvent()指向原始的事件对象移除事件移除某个元素的单击事件jQuery(p).unbind(click)移除某个元素的所有的事件jQuery(p).unbind()假如某个元素的单击事件绑定了多个函数可用jQuery(p).unbind(click,fn1)来解除fn1的事件处理程序模拟操作常用模拟:不一定要单击才会触发可以用trigger()方法模拟操作jQuery(#btn)

15、.trigger(click),.,22,触发自定义事件jQuery(#btn).bind(myClick,fn1)可以通过jQuery(#btn).trigger(myClick)触发传递数据trigger(type,data)trigger()方法会执行浏览器的默认行为如果不想执行浏览器的默认行为可用jQuery(input).triggerHander(focus)可以一次绑定多个事件类型jQuery(div).bind(mouseovermouseout,fn1)添加事件的命名空间便于管理jQuery(div).bind(click.plugin,fn1)jQuery(div).bin

16、d(mouseover.plugin,fn2)jQuery(div).bind(dbclick,fn3)在执行jQuery(div).unbind(.plugin)的时候dbclick事件依然会触发相同事件名称不同命名空间的执行方法,.,23,jQuery(div).bind(click,fn1)jQuery(div).bind(click.plugin,fn2)jQuery(#btn).click(function()jQuery(div).trigger(click!);/注意click后面的感叹号)当单击div元素的时候fn1和fn2事件处理程序都会执行当单击button元素的时候，只会

17、触发fn1的事件处理程序jQuery中的动画,.,24,show()显示元素hide()隐藏元素show(slow)让元素在600毫秒内显示出来show(fast)让元素在200毫秒内显示出来show(normal)让元素在400毫秒内显示出来show(1000)让元素在1000毫秒内显示出来hide()方法带参数时候与show()方法相似fadeIn()增加不透明度fadeOut()降低不透明度slideUp()从下向上隐藏元素可以带参数slideDown()从上到下显示元素可以带参数自定义动画方法animate()jQuery(p).animate(left:500px,3000)使得元素

18、在3秒内向右移动500个像素jQuery(p).animate(left:+=500px,3000)在当前位置累加500个像素jQuery(p).animate(left:-=500px,3000)在当前位置累减500个像素,.,25,多重动画同时执行多个动画:jQuery(p).animate(left:500px,height:200px,3000)按顺序执行动画:jQuery(p).animate(left:500px,3000).animate(height:200px,3000)fadeTo(3000,0.2)在3秒内将元素的不透明度变为0.2动画的回调函数jQuery(p).ani

19、mate(top:200px,width:200px,200,fn)执行完动画后执行fn停止动画stop(false,false)is(:animated)判断某元素是否处于动画状态toggle()用来代替show和hide方法会改变高度宽度和不透明度slideToggle()用来代替slideUp()和slideDown()只改变高度,.,26,jQuery与Ajax应用分三层jQuery.ajax()是第一层,jQuery(param).load()/jQuery.get()/jQuery.post()是第二层,jQuery.getScript()/jQuery.getJSON()是第三层

20、load()方法1.载入html文档load(url,data,callbackurl:请求地址data:发送至服务器端的key/value值callback:回调函数无论成功还是失败都会调用回调函数2.筛选载入的HTML文档jQuery(#resText).load(test.html.param)3.传递方式根据data自动指定如果没有参数传递采用get方式传递反之则自动转化为post方式,.,27,4.回调函数function(responseText,txtStatus,XMLHttpRequest)responseText:请求返回的内容textStatus:请求状态success/

21、error/notmodified/timeout四种XMLHttpRequest:XMLHttpRequest对象jQuery.get()全局函数jQuery.get(url,data,callback,type)url:请求的地址data:发送至服务器端的key/value数据会作为QueryString附加到请求的URL中callback:载入成功时的回调函数type:服务器返回内容的格式xml/html/json/script/text/_default,.,28,callback形式如下function(data,textStatus)/data:返回的内容可以是XMLJSON或者h

22、tml片段等/textStatus:请求状态success/error/notmodified/timeout数据格式:html片段:实现起来只需要很少的工作量,但是这种固定的数据结构并不一定能够在其它的web程序中得到重用XML文档:该数据可以利用强大的jQuery选择器的功能，这种数据的可移植性是其它的数据格式所无法比拟的,因此以这种格式提供的数据的重用性大大的提高,不过xml体积相对庞大,解析和操作他们的速度要慢一些,.,29,JSON格式在不远的将来新版的JavaScript中的XML将会和JSON一样容易解析,不过在它到来之前,json依然有着很强的生命力json的格式非常的严格,构

23、建的json文件必须是完整无误的,任何的一个不匹配或者缺少逗号,都会导致页面脚本的终止运行,甚至还会带来更加严重的负面影响post()方法它与get()方法的结构和使用方式都相同,不过重大区别如下1.GET请求会将参数跟在URL后面进行传递,而POST请求则是作为HTTP消息的实体内容发送给web服务器,当然在ajax请求中这种区别对用户来说是不可见的2.GET请求对传输的数据大小有限制(通常不能大于2K),而使用POST方式传输的数据量比GET方式大的多(理论上不受限制)3.GET方式请求的数据会被浏览器缓存起来,因此其它人便可以从浏览器的历史记录中读取到这些数据,例如帐号和密码等等,在某些

24、情况下GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题,.,30,getScript()方法动态加载script文件可以用回调函数getJSON()动态加载JSON文件,处理JSON文件的时候可以利用each函数jQuery.each()不同于jQuery对象的each()它是一个全局函数,不操作jQuery对象而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数,回调函数中有两个参数第一个为索引第二个为对应的变量或者内容ajax()只有一个参数以key/value的形式存在url:发送请求的地址type:请求方式POST或者GET默认为GET注意其它的HTTP请求方法timeout:设置请求的超时时间(毫秒)此设置将覆盖ajaxStart()等方法的全局设