jQuery教程PPT课件

1、2021/7/231Jquery基础教程基础教程 2021/7/232jQuery优势优势 轻量级轻量级 强大的选择器强大的选择器 出色的出色的DOM操作的封装操作的封装 可靠的事件处理机制可靠的事件处理机制 完善的完善的Ajax 不污染顶级变量不污染顶级变量 出色的浏览器兼容性出色的浏览器兼容性 链式操作方式链式操作方式 隐式迭代隐式迭代 行为和结构层分离行为和结构层分离 丰富的插件支持丰富的插件支持 完善的文档完善的文档 开源开源2021/7/233jQuery选择器是其最核心的部分选择器是其最核心的部分 分为四大类分为四大类 基本选择器基本选择器 层次选择器层次选择器 过滤选择器过滤选择

2、器 表单选择器表单选择器2021/7/234基本选择器是最常用的选择器基本选择器是最常用的选择器 可以根据标签的名字、可以根据标签的名字、ID名字或者名字或者class名字来选择元素名字来选择元素#id 根据指定的id来匹配元素.class 根据制定的类名字来匹配元素element 根据指定的元素的名字匹配元素* 匹配所有的元素selector1,selector2,selectorN 将每一个匹配到的元素合并到一起返回2021/7/235层次选择器层次选择器 jQuery(ancestor descendant):选取ancestor中的所有的descendant(后代)元素 jQuery(

3、parentchild):选取parent中的所有的child(子元素) jQuery(prev+next):选取紧跟在prev后的同级别的next元素 可用next()方法代替 jQuery(prevsiblings):选取紧跟在prev后的同级别的所有的 元素 可用nextAll()方法代替 2021/7/236过滤选择器分为：过滤选择器分为： 基本过滤选择器基本过滤选择器 内容过滤选择器内容过滤选择器 可见性过滤选择器可见性过滤选择器 子元素过滤选择器子元素过滤选择器 属性过滤选择器属性过滤选择器 表单过滤选择器表单过滤选择器2021/7/237基本过滤选择器基本过滤选择器 :first

4、 选取第一个元素 :last 选取最后一个元素 :not(selector) 去除与跟定选择器匹配的元素 :even 选取索引值为偶数的所有的元素 从0开始 :odd 选取索引值为奇数的所有的元素 从0开始 :eq(index) 选取索引值等于index的所有的元素 从0开始 :gt(index) 选取索引值大于index的所有的元素 从0开始 :lt(index) 选取索引值小于index的所有的元素 从0开始 :header 选取所有的标题元素 例如h1 h2 h3等 :animated 选取所有的正在执行动画的元素2021/7/238内容过滤选择器内容过滤选择器 :contains(te

5、xt) 选取含有文本内容为text的元素 :empty 选取不包含子元素的空元素 :has(selector) 选取含有选择器所匹配的元素的元素 :parent 选取含有子元素的元素2021/7/239可见性过滤选择器可见性过滤选择器 :hidden 选取所有的不可见的元素 :visible 选取所有的可见的元素2021/7/2310属性过滤选择器属性过滤选择器 attribute 选取拥有此属性的元素 attribute=value 选取属性值为value的元素 attribute!=value 选取属性值不等于value的元素 也包括不含属性名为attribute的元素 attribute

6、=value 选取属性值以value开头的元素 attribute$=value 选取属性值以value结尾的元素 attribute*=value 选取属性值含有value的元素 selector1selector2selector3 用属性选择器合并成一个复合选择器2021/7/2311子元素过滤选择器子元素过滤选择器 nth-child(index/even/odd/equation) 选取每个父元素下的第index子元素/奇元素/偶元素/比较元素 索引从1开始 first-child 选取每个父元素的第一个子元素 last-child 选取每个父元素的最后一个元素 only-child

7、 如果该元素是其父元素的唯一的子元素 那么该元素就会匹配到 注意与基本过滤选择器的区别2021/7/2312表单过滤选择器表单过滤选择器 :enabled 选取所有的可见的元素 :disabled 选取所有的不可见的元素 :checked 选取所有的选中的元素(单选框、复选框) :selected 选取所有的被选中的元素(下拉菜单)2021/7/2313表单选择器表单选择器 :input 选取所有的、 元素 :text 选取所有的单行文本框 :password 选取所有的密码框 :radio 选取所有的单选按钮 :checkbox 选取所有的复选按钮 :submit 选取所有的提交按钮 :im

8、age 选取所有的图像按钮 :reset 选取所有的重置按钮 :button 选取所有的button :file 选取所有的上传域 :hidden 选取所有的不可见元素 (包括display为none的)2021/7/2314jQuery中中DOM操作操作 append() 向匹配的元素追加内容 appendTo() 颠倒append()操作 prepend() 向匹配的元素前置内容 preprendTo() 颠倒prepend()操作 after() 在匹配的元素后插入内容 insertAfter() 颠倒after()操作 before() 在匹配的元素前插入内容 insertBefore

9、() 颠倒before()操作2021/7/2315元素操作：元素操作： remove() 删除节点 例 jQuery(ul li).remove() 也可在remove()中添加过滤条件 jQuery(ul li).remove(lititle!=菠萝) empty() 清空节点 jQuery(ul li:eq(1).empty() 清空第二个li元素中的内容 clone() 复制节点 jQuery(#li).clone().appendTo(ul) 如果想在复制节点的同时也具有行为 可用clone(true) replaceWith() 替换节点 如jQuery(p).replaceWit

10、h(你最不喜欢的水果是?) replaceAll() 颠倒replaceWith()操作 如jQuery(你最不喜欢的水果是？).replaceAll(p);2021/7/2316 wrapAll() 将所有的匹配的元素用一个元素来包裹 如jQuery(strong).wrapAll() 会得到 你最喜欢的水果1 你最喜欢的水果2 wrap() 将每个匹配的元素用一个元素包裹起来 如jQuery(strong).wrap() 会得到 你最喜欢的水果1 你最喜欢的水果2 wrapInner() 将每个匹配的子元素用另外一个元素包裹起来2021/7/2317属性操作属性操作 获取和设置属性 获取:

11、 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()2021/7/2318 toggleClass() 切换样式 hasClass() 判断是否含有某个样式 同is(.className) html() 获取或者设置html代码 text() 获取或者设置文本框的值 val()

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

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

14、ur,focus,load,resize,scroll, unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout, mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也 可以是自定义事件名称 第二个为可选的参数 第三个为绑定的处理函数2021/7/2320 简写绑定操作 jQuery(p).click(fn),jQuery(mouseover).click(fn) 合成事件 主要有两个 jQuery(p).toggle(

15、fn1,fn2) 单击的时候分别执行fn1和fn2两个函数 hover(fn1,fn2) 鼠标移上去和移走的时候分别执行fn1和fn2两个函数 事件冒泡 如果想阻止冒泡的话可以用event.stopPropagation() 阻止事件的默认行为 可以采用event.preventDefault() 如果上面两个都想阻止 可以直接在fn中return false 事件对象的属性 event.type:获取事件的类型 如click dbclick event.preventDefault():阻止事件的默认行为 event.stopPropagation():阻止事件的冒泡 event.targe

16、t() 获取触发事件的元素 event.relatedTarget() 获取相关元素2021/7/2321 event.pageX() 获取光标相对于页面的x坐标 event.pageY() 获取光标相对于页面的y坐标 event.which() 在鼠标单击事件中获取到鼠标的左 中 右键 event.metaKey() 键盘事件中获取ctrl键 event.originalEvent() 指向原始的事件对象 移除事件 移除某个元素的单击事件 jQuery(p).unbind(click) 移除某个元素的所有的事件 jQuery(p).unbind() 假如某个元素的单击事件绑定了多个函数 可用

17、jQuery(p).unbind(click,fn1)来 解除fn1的事件处理程序 模拟操作 常用模拟: 不一定要单击才会触发 可以用trigger()方法模拟操作 jQuery(#btn).trigger(click)2021/7/2322 触发自定义事件 jQuery(#btn).bind(myClick,fn1) 可以通过jQuery(#btn).trigger (myClick)触发 传递数据 trigger(type,data) trigger()方法会执行浏览器的默认行为 如果不想执行浏览器的默认行为 可用 jQuery(input).triggerHander(focus) 可以

18、一次绑定多个事件类型 jQuery(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事件依然会触发 相同事件名称 不同命名空间的执行方法2021/7/2323 jQuery(div).bind(click,fn1) jQuery(div).bind(click

19、.plugin,fn2) jQuery(#btn).click ( function() jQuery(div).trigger(click!); /注意click后面的感叹号 ) 当单击div元素的时候 fn1和fn2事件处理程序都会执行 当单击button元素的时候， 只会触发fn1的事件处理程序jQuery中的动画中的动画 2021/7/2324 show() 显示元素 hide() 隐藏元素 show(slow) 让元素在600毫秒内显示出来 show(fast) 让元素在200毫秒内显示出来 show(normal) 让元素在400毫秒内显示出来 show(1000) 让元素在100

20、0毫秒内显示出来 hide()方法带参数时候与show()方法相似 fadeIn() 增加不透明度 fadeOut() 降低不透明度 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个像素 2021/7/

21、2325 多重动画 同时执行多个动画: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).animate(top:200px,width:200px,200,fn) 执行完动画后执行fn 停止动画 stop(false,false) is(:animated) 判断某元素是否处于动画状态 toggle()

22、用来代替show和hide方法 会改变高度 宽度和不透明度 slideToggle() 用来代替slideUp()和slideDown() 只改变高度2021/7/2326jQuery与与Ajax应用应用 分三层jQuery.ajax()是第一层,jQuery(param).load() /jQuery.get()/jQuery.post()是第 二层, jQuery.getScript()/jQuery.getJSON()是第三层 load()方法 1.载入html文档 load(url,data,callback url :请求地址 data:发送至服务器端的key/value值 call

23、back:回调函数 无论成功还是失败都会调用回调函数 2.筛选载入的HTML文档 jQuery(#resText).load(test.html .param) 3.传递方式 根据data自动指定 如果没有参数传递 采用get方式传递 反之 则自动转化为post 方式2021/7/2327 4.回调函数 function(responseText,txtStatus,XMLHttpRequest) responseText :请求返回的内容 textStatus:请求状态 success/error/notmodified/timeout四种 XMLHttpRequest:XMLHttpReq

24、uest对象 jQuery.get() 全局函数 jQuery.get(url,data,callback,type) url:请求的地址 data:发送至服务器端的key/value数据会作为QueryString附加到请求的URL中 callback:载入成功时的回调函数 type:服务器返回内容的格式 xml/html/json/script/text/_default2021/7/2328 callback形式如下 function(data,textStatus) /data:返回的内容 可以是XML JSON或者html片段等 /textStatus:请求状态 success/er

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

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

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