《《jQuery教程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《jQuery教程》PPT课件.ppt（34页珍藏版）》请在三一办公上搜索。
1、Jquery基础教程,jQuery优势 轻量级 强大的选择器 出色的DOM操作的封装 可靠的事件处理机制 完善的Ajax 不污染顶级变量 出色的浏览器兼容性 链式操作方式 隐式迭代 行为和结构层分离 丰富的插件支持 完善的文档 开源,jQuery选择器是其最核心的部分 分为四大类 基本选择器 层次选择器 过滤选择器 表单选择器,基本选择器是最常用的选择器 可以根据标签的名字、ID名字或者class名字来选择元素#id 根据指定的id来匹配元素.class 根据制定的类名字来匹配元素element 根据指定的元素的名字匹配元素*匹配所有的元素selector1,selector2,selecto
2、rN 将每一个匹配到的元素合并到一起返回,层次选择器 jQuery(ancestor descendant):选取ancestor中的所有的descendant(后代)元素 jQuery(parentchild):选取parent中的所有的child(子元素)jQuery(prev+next):选取紧跟在prev后的同级别的next元素 可用next()方法代替 jQuery(prevsiblings):选取紧跟在prev后的同级别的所有的 元素 可用nextAll()方法代替,过滤选择器分为：基本过滤选择器 内容过滤选择器 可见性过滤选择器 子元素过滤选择器 属性过滤选择器 表单过滤选择器,
3、基本过滤选择器:first 选取第一个元素:last 选取最后一个元素:not(selector)去除与跟定选择器匹配的元素:even 选取索引值为偶数的所有的元素 从0开始:odd 选取索引值为奇数的所有的元素 从0开始:eq(index)选取索引值等于index的所有的元素 从0开始:gt(index)选取索引值大于index的所有的元素 从0开始:lt(index)选取索引值小于index的所有的元素 从0开始:header 选取所有的标题元素 例如h1 h2 h3等:animated 选取所有的正在执行动画的元素,内容过滤选择器:contains(text)选取含有文本内容为text的
4、元素:empty 选取不包含子元素的空元素:has(selector)选取含有选择器所匹配的元素的元素:parent 选取含有子元素的元素,可见性过滤选择器:hidden 选取所有的不可见的元素:visible 选取所有的可见的元素,属性过滤选择器 attribute 选取拥有此属性的元素 attribute=value 选取属性值为value的元素 attribute!=value 选取属性值不等于value的元素 也包括不含属性名为attribute的元素 attribute=value 选取属性值以value开头的元素 attribute$=value 选取属性值以value结尾的元素
5、attribute*=value 选取属性值含有value的元素 selector1selector2selector3 用属性选择器合并成一个复合选择器,子元素过滤选择器 nth-child(index/even/odd/equation)选取每个父元素下的第index子元素/奇元素/偶元素/比较元素 索引从1开始 first-child 选取每个父元素的第一个子元素 last-child 选取每个父元素的最后一个元素 only-child 如果该元素是其父元素的唯一的子元素 那么该元素就会匹配到 注意与基本过滤选择器的区别,表单过滤选择器:enabled 选取所有的可见的元素:disabl
6、ed 选取所有的不可见的元素:checked 选取所有的选中的元素(单选框、复选框):selected 选取所有的被选中的元素(下拉菜单),表单选择器:input 选取所有的、元素:text 选取所有的单行文本框:password 选取所有的密码框:radio 选取所有的单选按钮:checkbox 选取所有的复选按钮:submit 选取所有的提交按钮:image 选取所有的图像按钮:reset 选取所有的重置按钮:button 选取所有的button:file 选取所有的上传域:hidden 选取所有的不可见元素(包括display为none的),jQuery中DOM操作 append()向匹
7、配的元素追加内容 appendTo()颠倒append()操作 prepend()向匹配的元素前置内容 preprendTo()颠倒prepend()操作 after()在匹配的元素后插入内容 insertAfter()颠倒after()操作 before()在匹配的元素前插入内容 insertBefore()颠倒before()操作,元素操作：remove()删除节点 例 jQuery(ul li).remove()也可在remove()中添加过滤条件 jQuery(ul li).remove(lititle!=菠萝)empty()清空节点 jQuery(ul li:eq(1).empty(
8、)清空第二个li元素中的内容 clone()复制节点 jQuery(#li).clone().appendTo(ul)如果想在复制节点的同时也具有行为 可用clone(true)replaceWith()替换节点 如jQuery(p).replaceWith(你最不喜欢的水果是?)replaceAll()颠倒replaceWith()操作 如jQuery(你最不喜欢的水果是？).replaceAll(p);,wrapAll()将所有的匹配的元素用一个元素来包裹 如jQuery(strong).wrapAll()会得到 你最喜欢的水果1 你最喜欢的水果2 wrap()将每个匹配的元素用一个元素包
9、裹起来 如jQuery(strong).wrap()会得到 你最喜欢的水果1 你最喜欢的水果2 wrapInner()将每个匹配的子元素用另外一个元素包裹起来,属性操作 获取和设置属性 获取:jQuery(p).attr(title)设置属性:jQuery(p).attr(title,your title);删除属性 jQuery(p).removeAttr(title)样式操作 jQuery(p).attr(class,classname);追加样式 jQuery(p).addClass()移除样式 jQuery(p).removeClass(),toggleClass()切换样式 hasC
10、lass()判断是否含有某个样式 同is(.className)html()获取或者设置html代码 text()获取或者设置文本框的值 val()获取或者设置表单元素的值 children()获取匹配元素的子元素 next()获取匹配元素后紧邻的同辈的元素 prev()获取匹配元素前紧邻的同辈的元素 nextAll()获取匹配元素后的所有的同辈的元素 siblings()获取匹配元素前台所有的同辈的元素 closest()获取匹配元素最近的元素 find()查找匹配元素的所有的后代元素 css()设置获取获取css样式 可以传输json格式的参数 批量的设置多个样式 height()设置或者
11、获取元素的高度 注意和css(height)的区别 width()设置或者获取元素的宽度 注意和css(width)的区别,offset()获取元素在当前视窗的相对偏移 返回的是个对象 包括top和left两个属性 position()获取元素相对于最近的一个position样式属性设置为relative和absolute的祖父节点的相对的偏移 返回的也是个对象 包括top和left两个属性 scrollTop()获取元素的滚动条距顶端的距离 scrollLeft()获取元素的滚动条距左边的距离jQuery中的事件 注意jQuery(document).ready()和window.onloa
12、d的区别 事件绑定 bind(type,data,fn)第一个为事件类型 包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也 可以是自定义事件名称 第二个为可选的参数 第三个为绑定的处理函数,简写绑定操作 jQuery(p).click(fn),jQuery(mouseover).click(fn)合
13、成事件 主要有两个 jQuery(p).toggle(fn1,fn2)单击的时候分别执行fn1和fn2两个函数 hover(fn1,fn2)鼠标移上去和移走的时候分别执行fn1和fn2两个函数 事件冒泡 如果想阻止冒泡的话可以用event.stopPropagation()阻止事件的默认行为 可以采用event.preventDefault()如果上面两个都想阻止 可以直接在fn中return false 事件对象的属性 event.type:获取事件的类型 如click dbclick event.preventDefault():阻止事件的默认行为 event.stopPropagatio
14、n():阻止事件的冒泡 event.target()获取触发事件的元素 event.relatedTarget()获取相关元素,event.pageX()获取光标相对于页面的x坐标 event.pageY()获取光标相对于页面的y坐标 event.which()在鼠标单击事件中获取到鼠标的左 中 右键 event.metaKey()键盘事件中获取ctrl键 event.originalEvent()指向原始的事件对象 移除事件 移除某个元素的单击事件 jQuery(p).unbind(click)移除某个元素的所有的事件 jQuery(p).unbind()假如某个元素的单击事件绑定了多个函数
15、 可用jQuery(p).unbind(click,fn1)来 解除fn1的事件处理程序 模拟操作 常用模拟:不一定要单击才会触发 可以用trigger()方法模拟操作 jQuery(#btn).trigger(click),触发自定义事件 jQuery(#btn).bind(myClick,fn1)可以通过jQuery(#btn).trigger(myClick)触发 传递数据 trigger(type,data)trigger()方法会执行浏览器的默认行为 如果不想执行浏览器的默认行为 可用 jQuery(input).triggerHander(focus)可以一次绑定多个事件类型 jQ
16、uery(div).bind(mouseover mouseout,fn1)添加事件的命名空间 便于管理 jQuery(div).bind(click.plugin,fn1)jQuery(div).bind(mouseover.plugin,fn2)jQuery(div).bind(dbclick,fn3)在执行jQuery(div).unbind(.plugin)的时候 dbclick事件依然会触发 相同事件名称 不同命名空间的执行方法,jQuery(div).bind(click,fn1)jQuery(div).bind(click.plugin,fn2)jQuery(#btn).clic
17、k(function()jQuery(div).trigger(click!);/注意click后面的感叹号)当单击div元素的时候 fn1和fn2事件处理程序都会执行 当单击button元素的时候，只会触发fn1的事件处理程序jQuery中的动画,show()显示元素 hide()隐藏元素 show(slow)让元素在600毫秒内显示出来 show(fast)让元素在200毫秒内显示出来 show(normal)让元素在400毫秒内显示出来 show(1000)让元素在1000毫秒内显示出来 hide()方法带参数时候与show()方法相似 fadeIn()增加不透明度 fadeOut()降
18、低不透明度 slideUp()从下向上隐藏元素 可以带参数 slideDown()从上到下显示元素 可以带参数 自定义动画方法 animate()jQuery(p).animate(left:500px,3000)使得元素在3秒内向右移动500个像素 jQuery(p).animate(left:+=500px,3000)在当前位置累加500个像素 jQuery(p).animate(left:-=500px,3000)在当前位置累减500个像素,多重动画 同时执行多个动画:jQuery(p).animate(left:500px,height:200px,3000)按顺序执行动画:jQuer
19、y(p).animate(left:500px,3000).animate(height:200px,3000)fadeTo(3000,0.2)在3秒内将元素的不透明度变为0.2 动画的回调函数 jQuery(p).animate(top:200px,width:200px,200,fn)执行完动画后执行fn 停止动画 stop(false,false)is(:animated)判断某元素是否处于动画状态 toggle()用来代替show和hide方法 会改变高度 宽度和不透明度 slideToggle()用来代替slideUp()和slideDown()只改变高度,jQuery与Ajax应用
20、 分三层jQuery.ajax()是第一层,jQuery(param).load()/jQuery.get()/jQuery.post()是第 二层,jQuery.getScript()/jQuery.getJSON()是第三层 load()方法 1.载入html文档 load(url,data,callback url:请求地址 data:发送至服务器端的key/value值 callback:回调函数 无论成功还是失败都会调用回调函数 2.筛选载入的HTML文档 jQuery(#resText).load(test.html.param)3.传递方式 根据data自动指定 如果没有参数传递
21、 采用get方式传递 反之 则自动转化为post 方式,4.回调函数 function(responseText,txtStatus,XMLHttpRequest)responseText:请求返回的内容 textStatus:请求状态 success/error/notmodified/timeout四种 XMLHttpRequest:XMLHttpRequest对象 jQuery.get()全局函数 jQuery.get(url,data,callback,type)url:请求的地址 data:发送至服务器端的key/value数据会作为QueryString附加到请求的URL中 cal
22、lback:载入成功时的回调函数 type:服务器返回内容的格式 xml/html/json/script/text/_default,callback形式如下 function(data,textStatus)/data:返回的内容 可以是XML JSON或者html片段等/textStatus:请求状态 success/error/notmodified/timeout 数据格式:html片段:实现起来只需要很少的工作量,但是这种固定的数据结构并不一定能够在其它的 web程序中得到重用 XML文档:该数据可以利用强大的jQuery选择器的功能，这种数据的可移植性是其它的数据 格式所无法比拟
23、的,因此以这种格式提供的数据的重用性大大的提高,不过xml体 积相对庞大,解析和操作他们的速度要慢一些,JSON格式 在不远的将来 新版的JavaScript中的XML将会和JSON一样容易解析,不过在它到来 之前,json依然有着很强的生命力 json的格式非常的严格,构建的json文件必须是完整无误的,任何的一个不匹配或者 缺少逗号,都会导致页面脚本的终止运行,甚至还会带来更加严重的负面影响 post()方法 它与get()方法的结构和使用方式都相同,不过重大区别如下 1.GET请求会将参数跟在URL后面进行传递,而POST请求则是作为HTTP消息的实体 内容发送给web服务器,当然 在a
24、jax请求中 这种区别对用户来说是不可见的 2.GET请求对传输的数据大小有限制(通常不能大于2K),而使用POST方式传输的数 据量比GET方式大的多(理论上不受限制)3.GET方式请求的数据会被浏览器缓存起来,因此其它人便可以从浏览器的历史记 录中读取到这些数据,例如帐号和密码等等,在某些情况下GET方式会带来严重 的安全性问题,而POST方式相对来说就可以避免这些问题,getScript()方法 动态加载script文件 可以用回调函数 getJSON()动态加载JSON文件,处理JSON文件的时候可以利用each函数 jQuery.each()不同于jQuery对象的each()它是一
25、个全局函数,不操作jQuery对象 而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数,回调函数中有两个参数 第一个为索引 第二个为对应的变量或者内容 ajax()只有一个参数 以key/value的形式存在 url:发送请求的地址 type:请求方式 POST或者GET 默认为GET 注意其它的HTTP请求方法 timeout:设置请求的超时时间(毫秒)此设置将覆盖ajaxStart()等方法的全局设置 data:请求的数据 一般的JSON格式的数据 dataType:预期返回的数据类型,beforeSend:发送请求前可修改的XMLHttpRequest对象的函数 例如添加
26、自定义的 HTTP头.在beforeSend()中如果返回false可以取消本次ajax请求 complate:请求完成后的回调函数(请求成功或者失败的时候均会调用)function(XMLHttpRequest,textStatus)success:请求成功时的回调函数(只有请求成功的时候才会回调)function(data,textStatus)error:请求失败时的回调函数(只有在请求失败的时候才会调用)function(XMLHttpRequest,textStatus,errorThown)global:默认为true,表示是否会触发全局的ajax事件,为false表示不会触发全局
27、事件,序列化元素 serialize()将DOM内容序列化为字符串 serializeArray()将DOM内容序列化为JSON格式的数据 param()用来对一个json对象进行序列化 Ajax全局函数 ajaxStart(callback):ajax开始请求的时候调用的函数 ajaxComplete(callback):ajax请求完成时执行的函数 ajaxError(callback):ajax请求错误的时候触发的函数 捕捉到的错误作为最后的一 个参数传递 ajaxSend(callback):ajax请求发送前要执行的函数 ajaxSuccess(callback):ajax请求成功的时候执行的函数 ajaxStop(callback):ajax请求停止的时候触发的函数,插件的使用和写法 livequery()的使用方法 ui插件的使用方法 cookie插件的使用方法 自定义jQuery插件的写法,Thank you,
