jQuery基础入门ppt.ppt

《jQuery基础入门ppt.ppt》由会员分享，可在线阅读，更多相关《jQuery基础入门ppt.ppt（96页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、jQuery 基础教程基础教程jQueryjQuery的入门全教程的入门全教程 tbtb内容简介内容简介三三jQuery的由来及简介的由来及简介一一jQuery对象和对象和DOM对象对象二二jQuery选择器选择器三三jQuery中的中的DOM操作操作四四使用使用jQuery创建动画效果创建动画效果三三五五使用使用jQuery完成完成Ajax操作操作六六RIA技术技术vRIA(Rich Internet Applications)富互联网应富互联网应用用,具有高度互动性、丰富用户体验以及功能具有高度互动性、丰富用户体验以及功能强大的客户端。强大的客户端。v常见的常见的RIA技术技术AjaxFl

2、exSliverlightvJavaScript及其框架是实现及其框架是实现RIA的重要的重要工具工具JavaScript框架简介框架简介v随着随着JavaScript、CSS、Ajax等技术的不断等技术的不断进步，越来越多的开发者将一个又一个丰进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可富多彩的程序功能进行封装，供其他人可以调用这些封装好的以调用这些封装好的程序组件（框架）程序组件（框架）v当前流行的当前流行的 JavaScript 库有库有:用用JavaScript语言实现的开语言实现的开源源DHTML工工具包具包Ajax库库AjaxAjaxAjaxAjax库的

3、出现是为了将程库的出现是为了将程库的出现是为了将程库的出现是为了将程序员从解决越来越多序员从解决越来越多序员从解决越来越多序员从解决越来越多的的的的RIARIARIARIA应用的代码泥潭应用的代码泥潭应用的代码泥潭应用的代码泥潭里解救出来里解救出来里解救出来里解救出来,不用去关不用去关不用去关不用去关注底层的实现代码注底层的实现代码注底层的实现代码注底层的实现代码,只只只只需将注意力放到业务需将注意力放到业务需将注意力放到业务需将注意力放到业务需求上需求上需求上需求上.jQuery的优势的优势 v轻量级轻量级（Lightweight）v强大的选择器强大的选择器 v出色的出色的DOM操作封装操作

4、封装 v可靠的事件处理机制可靠的事件处理机制 v出色的浏览器兼容性出色的浏览器兼容性 jQuery 理念理念(宗旨宗旨):写得少写得少,做得多做得多 WRITE LESS,DO MOREjQuery的使用的使用v将将Jquery库嵌入到库嵌入到web页面中：页面中：(有以下两种方法有以下两种方法)1：使用：使用Google在线提供的特定版本库文件在线提供的特定版本库文件()2:JQ网站下载特定版本的网站下载特定版本的JQuery库并将期房到本库并将期房到本 地服务器上地服务器上v下载：下载：http:/提供了最新的提供了最新的jQuery框架下载。通框架下载。通常只需下载最小的常只需下载最小的

5、jQuery包包c（Minified）即可。目前最新的）即可。目前最新的版本版本jquery-1.6.2.min.js文件只有文件只有92 KB v引用：引用：vv将将jQuery框架文件导入后，就可以使用框架文件导入后，就可以使用jQuery的选择器的选择器和各种函数功能了。和各种函数功能了。第一个第一个jQuery程序程序$(document).ready(function()alert(Hello World!););简写简写:$(function()alert(Hello World);引入引入jQuery等待等待DOM文档载入后执行类似于文档载入后执行类似于window.onload

6、弹出一个对话框弹出一个对话框第一个第一个jQuery程序程序(续续)v vv alert(jQuery +jQuery.fn.jquery);/Dom 尚未加载尚未加载,弹出对话框后，才显示页面里弹出对话框后，才显示页面里的内容出现的内容出现v v jQuery(document).ready(/DOM 尚未加载尚未加载,必须使用必须使用 ready 事件事件v function()v alert(jQuery +jQuery.fn.jquery);v/jQuery(选择器选择器)v alert(jQuery(p).text();v alert(Page contains +jQuery(a)

7、.length+个个 elements!);/jQuery(selector1,selector2,selector3).length;v alert(Page contains +jQuery(document.getElementsByTagName(a).length+个个 Elements,And has a+jQuery(document.body).attr(bgcolor)+background);v v );vdemodemo：jquery1.jspjquery1.jspjQueryjQuery对象与对象与DOMDOM对象对象jQuery 对象对象vjQuery 对象就是对象就

8、是通过通过 jQuery 包装包装 DOM 对象后对象后产生的对象产生的对象vjQuery 对象是对象是 jQuery 独有的独有的.如果一个对象是如果一个对象是 jQuery 对象对象,那么它就可以使用那么它就可以使用 jQuery 里的方法里的方法:$(“#tab”).html();vjQuery 对象无法使用对象无法使用 DOM 对象的任何方法对象的任何方法,同同样样 DOM 对象也不能使用对象也不能使用 jQuery 里的任何方法里的任何方法v建议约定建议约定：如果获取的是：如果获取的是 jQuery 对象对象,那么要在那么要在变量前面加上变量前面加上$.var$variable=jQ

9、uery 对象var variable=DOM 对象对象jQuery 对象转成对象转成 DOM 对象对象vjQuery 对象不能使用对象不能使用 DOM 中的方法中的方法,但如果但如果 jQuery 没有封装想要的方法没有封装想要的方法,不得不使用不得不使用 DOM方方法的时候法的时候,有如下两种处理方法有如下两种处理方法:v(1)jQuery 对象是一个数组对象对象是一个数组对象,可以通过可以通过 index 的方法得到对应的的方法得到对应的 DOM对象对象.v$(#msg)0 v(2)使用使用 jQuery 中的中的 get(index)方法得到相应的方法得到相应的 DOM 对象对象 v$

10、(#msg).get(0)DOM 对象转成对象转成 jQuery 对象对象v对于一个对于一个 DOM 对象对象,只需要用只需要用$()把把 DOM 对象包装起来对象包装起来(jQuery 对象就是通过对象就是通过 jQuery 包装包装 DOM 对象后产生的对象对象后产生的对象),就可以获得就可以获得一个一个 jQuery 对象对象.例如：例如：v$(document.getElementById(“msg”)v转换后就可以使用转换后就可以使用 jQuery 中的方法了中的方法了jQuery对象与对象与dom对象的转换举例对象的转换举例v以下几种写法都是正确的：以下几种写法都是正确的：$(#m

11、sg).html();$(#msg)0.innerHTML;$(#msg).eq(0)0.innerHTML;$(#msg).get(0).innerHTML;v如：如：$(#msg)0，$(div).eq(1)0，$(div).get()1，$(td)5这些都是这些都是dom对象，对象，可以使用可以使用dom中的方法，但不能再使用中的方法，但不能再使用jQuery的方法的方法 demo:jquery_dom.jspdemo:jquery_dom.jspjQueryjQuery的选择器的选择器jQuery 选择器选择器v选择器是选择器是 jQuery 的根基的根基,在在 jQuery 中中,对

12、事件处理对事件处理,遍历遍历 DOM 和和 Ajax 操作都依赖于选择器操作都依赖于选择器vjQuery 选择器的优点选择器的优点:简洁的写法简洁的写法完善的事件处理机制完善的事件处理机制基本选择器基本选择器v基本选择器是基本选择器是 jQuery 中最常用的选择中最常用的选择器器,也是最简单的选择器也是最简单的选择器,它通过元素它通过元素 id,class 和标记名来查找和标记名来查找 DOM 元素元素基本选择器示例基本选择器示例v改变改变 id 为为 one 的元素的背景色为的元素的背景色为 红色红色$(#one).css(backgroundColor,red);v改变元素名为改变元素名

13、为 的所有元素的背景色为的所有元素的背景色为#bbffaa，字体颜色为红色，字体颜色为红色$(p).css(color:red,backgroundColor:#bbffaa);v改变第一个改变第一个元素的背景色为红色元素的背景色为红色$(p).eq(0).css(backgroundColor,red);v改变所有改变所有元素和元素和 id 为为 one 的元素的背的元素的背景色为景色为#bbffaa$(h1,#one).css(backgroundColor,#bbffaa);层次选择器层次选择器v如果想通过如果想通过 DOM 元素之间的层次关系来获取特定元素元素之间的层次关系来获取特定元

14、素,例如后代元素例如后代元素,子元素子元素,相邻元素相邻元素,兄弟元素等兄弟元素等,则需要使则需要使用层次选择器用层次选择器v注意注意:(“prev div”)选择器只能选择选择器只能选择“#prev”元素元素后后面的同辈元素面的同辈元素;而而 jQuery 中的方法中的方法 siblings()与前后位与前后位置无关置无关,只要是同辈节点就可以选取只要是同辈节点就可以选取层次选择器示例层次选择器示例v改变改变 内内所有 的背景色为的背景色为#bbffaav$(“body div)v改变改变 内内子 的背景色为的背景色为#bbffaav$(“bodydiv)v改变改变 id 为为 one 的的

15、下一个 的背景色为的背景色为#bbffaav$(#one+div)v改变改变 id 为为 two 的元素后面的的元素后面的所有兄弟的元素的背的元素的背景色为景色为#bbffaav$(#twodiv)v改变改变 id 为为 two 的元素所有的元素所有 兄弟元素的背景色为兄弟元素的背景色为#bbffaa$(#two).siblings(p)过滤选择器过滤选择器v过滤选择器过滤选择器主要是通过特定的过滤规则来主要是通过特定的过滤规则来筛选出所需的筛选出所需的 DOM 元素元素,该选择器该选择器都以都以“:”开头开头v按照不同的过滤规则按照不同的过滤规则,过滤选择器又可分为过滤选择器又可分为基本过滤

16、基本过滤,内容过滤内容过滤,可见性过滤可见性过滤,属性过滤属性过滤,子元素过滤和表单对象属性过滤选择器子元素过滤和表单对象属性过滤选择器.基本过滤选择器基本过滤选择器基本过滤选择器示例基本过滤选择器示例v改变第一个改变第一个 div 元素的背景色为元素的背景色为#bbffaav$(div:first)v改变改变id不为不为 one 的所有的所有p元素的背景色为元素的背景色为#bbffaav$(p:not(#one)v改变索引值为偶数的改变索引值为偶数的 tr元素的背景色为元素的背景色为#bbffaav$(“tr:even)v改变索引值为大于改变索引值为大于 3 且为奇数的且为奇数的 p元素的背

17、景色为元素的背景色为#bbffaav$(“p:gt(3):odd)v改变所有的标题元素的背景色为改变所有的标题元素的背景色为#bbffaav$(:header)v改变当前正在执行动画的所有元素的背景色为改变当前正在执行动画的所有元素的背景色为#bbffaa内容过滤选择器内容过滤选择器v内容过滤选择器的过滤规则主要体现在内容过滤选择器的过滤规则主要体现在它它所包含的子元素所包含的子元素和和文本内容文本内容上上内容过滤选择器示例内容过滤选择器示例v改变含有文本改变含有文本 di 的的 p元素的背景色为元素的背景色为#bbffaav$(p:cotains(di)v改变不包含子元素改变不包含子元素(或

18、者文本元素或者文本元素)的的 div 空空元素的背景色为元素的背景色为#bbffaav改变含有改变含有 class 为为 mini 元素的元素的 p元素的背景元素的背景色为色为#bbffaav$(p:has(.mini)v改变含有子元素改变含有子元素(或者文本元素或者文本元素)的的div元素元素的背景色为的背景色为#bbffaa可见性过滤选择器可见性过滤选择器v可见性过滤选择器是可见性过滤选择器是根据元素的可见和不可见状态来选来选择相应的元素择相应的元素v可见选择器可见选择器:hidden 不仅包含样式属性不仅包含样式属性 display 为为 none 的元素的元素,也包含文本隐藏域也包含文

19、本隐藏域()和和 visible:hidden 之类的元素之类的元素可见性过滤选择器示例可见性过滤选择器示例v改变所有可见的改变所有可见的div元素的背景色为元素的背景色为#bbffaav选取所有不可见的元素选取所有不可见的元素,利用利用 jQuery 中的中的 show()方法将它们显示出来方法将它们显示出来,并设置其背景并设置其背景色为色为#bbffaav选取所有的文本隐藏域选取所有的文本隐藏域,并打印它们的值并打印它们的值属性过滤选择器属性过滤选择器v属性过滤选择器的过滤规则是属性过滤选择器的过滤规则是通过元素的通过元素的属性来获取相应的元素属性来获取相应的元素demo:jquery.j

20、spdemo:jquery.jsp属性过滤选择器示例属性过滤选择器示例v选取下列元素选取下列元素,改变其背景色为改变其背景色为#bbffaav含有属性含有属性title 的的div元素元素.v属性属性title值等于值等于test的的div元素元素.v属性属性title值不等于值不等于test的的div元素元素(没有属性title的也将被选中).v属性属性title值值 以以te开始开始 的的div元素元素.v属性属性title值值 以以est结束结束 的的div元素元素.v属性属性title值值 含有含有es的的div元素元素.v选取有属性选取有属性id的的div元素，然后在结果中选取属性元

21、素，然后在结果中选取属性title值值含有含有“es”的的 div 元素元素.子元素过滤选择器子元素过滤选择器vnth-child()选择器详解如下：选择器详解如下：(1):nth-child(even/odd):能选取每个父元素下的索引值能选取每个父元素下的索引值为偶为偶(奇奇)数的元素数的元素(2):nth-child(2):能选取每个父元素下的索引值为能选取每个父元素下的索引值为 2 的的元素元素(3):nth-child(3n):能选取每个父元素下的索引值是能选取每个父元素下的索引值是 3 的的倍数倍数 的元素的元素(3):nth-child(3n+1):能选取每个父元素下的索引值是能

22、选取每个父元素下的索引值是 3n+1的元素的元素子元素过滤选择器示例子元素过滤选择器示例v选取下列元素选取下列元素,改变其背景色为改变其背景色为#bbffaav每个每个class为为one的的div父元素下的第父元素下的第2个子元素个子元素.v每个每个class为为one的的div父元素下的第一个子元素父元素下的第一个子元素v每个每个class为为one的的div父元素下的最后一个子元素父元素下的最后一个子元素v如果如果class为为one的的div父元素下的仅仅只有一个子元素，父元素下的仅仅只有一个子元素，那么选中这个子元素那么选中这个子元素表单对象属性过滤选择器表单对象属性过滤选择器v此选

23、择器主要对所选择的表单元素进行过滤此选择器主要对所选择的表单元素进行过滤表单对象属性过滤选择器示例表单对象属性过滤选择器示例v利用利用 jQuery 对象的对象的 val()方法改变表单内方法改变表单内可用可用 元素的值元素的值v利用利用 jQuery 对象的对象的 val()方法改变表单内方法改变表单内不可用不可用 元素的值元素的值v利用利用 jQuery 对象的对象的 length 属性获取多选框属性获取多选框选中的个数选中的个数v利用利用 jQuery 对象的对象的 text()方法获取下拉框方法获取下拉框选中的内容选中的内容表单选择器表单选择器练习练习v1.给网页中所有的给网页中所有的

24、 元素添加元素添加 onclick 事件事件v2.是一个特定的表格隔行变色是一个特定的表格隔行变色v3.对多选框进行操作对多选框进行操作,输出选中的多选框的个数输出选中的多选框的个数jQueryjQuery中的中的DOMDOM操作操作jQuery 中的中的 DOM 操作操作vDOM(Document Object Model文档对象模型文档对象模型)：一：一种与浏览器种与浏览器,平台平台,语言无关的接口语言无关的接口,使用该接口可以使用该接口可以轻松地访问页面中所有的标准组件轻松地访问页面中所有的标准组件vDOM 操作的分类操作的分类:DOM Core:DOM Core 并不专属于并不专属于

25、JavaScript,任何一任何一种支持种支持 DOM 的程序设计语言都可以使用它的程序设计语言都可以使用它.它的用途它的用途并非仅限于处理网页并非仅限于处理网页,也可以用来处理任何一种是用标也可以用来处理任何一种是用标记语言编写出来的文档记语言编写出来的文档,例如例如:XMLHTML DOM:使用使用 JavaScript 和和 DOM 为为 HTML 文件文件编写脚本时编写脚本时,有许多专属于有许多专属于 HTML-DOM 的属性的属性CSS-DOM:针对于针对于 CSS 操作操作,在在 JavaScript 中中,CSS-DOM 主要用于获取和设置主要用于获取和设置 style 对象的各

26、种属性对象的各种属性查找节点查找节点v查找节点查找节点:查找元素节点查找元素节点:通过通过 jQuery 选择器完成选择器完成.查找属性节点查找属性节点:查找到所需要的元素之后查找到所需要的元素之后,可以可以调用调用 jQuery 对象对象的的 attr()方法来获取它的各种方法来获取它的各种属性值属性值创建节点创建节点v创建节点创建节点:使用使用 jQuery 的工厂函数的工厂函数$():$(html);会根会根据传入的据传入的 html 标记字符串创建一个标记字符串创建一个 DOM 对象对象,并把并把这个这个 DOM 对象包装成一个对象包装成一个 jQuery 对象返回返回.v注意注意:动

27、态创建的新元素节点不会被自动添加到文档动态创建的新元素节点不会被自动添加到文档中中,而是而是需要使用其他方法将其插入到文档中需要使用其他方法将其插入到文档中;当创建单个元素时当创建单个元素时,需需注意闭合标签和使用标准的注意闭合标签和使用标准的 XHTML 格式格式.例如创建一个例如创建一个元素元素,可以使用可以使用$(“”)或或$(“”),但不能使用但不能使用$(“”)或或$(“”)v创建文本节点就是在创建元素节点时直接把文本内容创建文本节点就是在创建元素节点时直接把文本内容写出来写出来;创建属性节点也是在创建元素节点时一起创创建属性节点也是在创建元素节点时一起创建建插入节点插入节点(1)v

28、动态创建了动态创建了 HTML 元素之后元素之后,还需要将新还需要将新创建的节点插入到文档中创建的节点插入到文档中,即成为文档中某即成为文档中某个节点的子节点个节点的子节点插入节点插入节点(2)v以上方法不但能将新创建的以上方法不但能将新创建的 DOM 元素插入到文元素插入到文档中档中,也也能对原有的能对原有的 DOM 元素进行移动元素进行移动.创建节点和插入节点示例创建节点和插入节点示例vvar newP=$(武广高速铁路即将通车！武广高速铁路即将通车！);vnewP.insertAfter(“#chapter”);/将创建的将创建的newP元元素插入到素插入到ID为为#chapter的元素

29、之后的元素之后 v或者或者vnewP.appendTo(“body”);/插入到插入到body元素里元素里 删除节点删除节点vremove():从从 DOM 中删除所有匹配的元素中删除所有匹配的元素,传入的参数用于根据传入的参数用于根据 jQuery 表达式来筛选表达式来筛选元素元素.当某个节点用当某个节点用 remove()方法删除后方法删除后,该节点所包含的所有后代节点将被同时删该节点所包含的所有后代节点将被同时删除除.这个方法的返回值是一个指向已被删除这个方法的返回值是一个指向已被删除的节点的引用的节点的引用.vempty():清空节点清空节点 清空元素中的所有后代清空元素中的所有后代节

30、点节点(不包含属性节点不包含属性节点).复制节点复制节点vclone():克隆匹配的克隆匹配的 DOM 元素元素,返回返回值为克隆后的副本值为克隆后的副本.但此时复制的新节但此时复制的新节点不具有任何行为点不具有任何行为.vclone(true):复制元素的同时也复制元复制元素的同时也复制元素中的的事件素中的的事件 替换节点替换节点vreplaceWith():将所有匹配的元素都替换为将所有匹配的元素都替换为指定的指定的 HTML 或或 DOM 元素元素vreplaceAll():颠倒了的颠倒了的 replaceWith()方法方法.v注意注意:若在替换之前若在替换之前,已经在元素上绑定了已经

31、在元素上绑定了事件事件,替换后原先绑定的事件会与原先的元替换后原先绑定的事件会与原先的元素一起消失素一起消失包裹节点包裹节点vwrap():将指定节点用其他标记包裹起来将指定节点用其他标记包裹起来.该方法对于需要在文档中插入额外的结构该方法对于需要在文档中插入额外的结构化标记非常有用化标记非常有用,而且不会破坏原始文档的而且不会破坏原始文档的语义语义.vwrapAll():将所有匹配的元素用一个元素来将所有匹配的元素用一个元素来包裹包裹.而而 wrap()方法是将所有的元素进行单方法是将所有的元素进行单独包裹独包裹.vwrapInner():将每一个匹配的元素的将每一个匹配的元素的子内容子内容

32、(包括文本节点包括文本节点)用其他结构化标记包裹起来用其他结构化标记包裹起来属性操作属性操作vattr():获取获取html属性和设置属性属性和设置属性当为该方法传递一个参数时当为该方法传递一个参数时,即为某元素的获取即为某元素的获取指定属性指定属性当为该方法传递两个参数时当为该方法传递两个参数时,即为某元素设置指即为某元素设置指定属性的值定属性的值vjQuery 中有很多方法都是一个函数实现获取和设中有很多方法都是一个函数实现获取和设置置.如如:attr(),html(),text(),val(),height(),width(),css()等等.vremoveAttr():删除指定元素的指

33、定属性删除指定元素的指定属性样式操作样式操作v获取获取 class 和设置和设置 class:class 是元素的一个属性是元素的一个属性,所以获取所以获取 class 和设置和设置 class 都可以使用都可以使用 attr()方方法来完成法来完成.v追加样式追加样式:addClass()v移除样式移除样式:removeClass()-从匹配的元素中删除从匹配的元素中删除全部或指定的全部或指定的 classv切换样式切换样式:toggleClass()-控制样式上的重复切控制样式上的重复切换换.如果类名存在则删除它如果类名存在则删除它,如果类名不存在则添如果类名不存在则添加它加它.v判断是否

34、含有某个样式判断是否含有某个样式:hasClass()-判断元素中判断元素中是否含有某个是否含有某个 class,如果有如果有,则返回则返回 true;否则返否则返回回 false设置和获取设置和获取 HTML,文本和值文本和值v读取和设置某个元素中的读取和设置某个元素中的 HTML 内容内容:html().该该方法可以用于方法可以用于 XHTML,但不能用于但不能用于 XML 文档文档v读取和设置某个元素中的读取和设置某个元素中的文本内容文本内容:text().该方法该方法既可以用于既可以用于 XHTML 也可以用于也可以用于 XML 文档文档.v读取和设置某个元素中的值读取和设置某个元素中

35、的值:val()-该方法类似该方法类似 JavaScript 中的中的 value 属性属性.对于对于文本框文本框,下拉列表下拉列表框框,单选框单选框该方法可返回元素的值该方法可返回元素的值(多选框只能返多选框只能返回第一个值回第一个值).如果为多选下拉列表框如果为多选下拉列表框,则返回一个则返回一个包含所有选择值的数组包含所有选择值的数组val()方法的两个练习方法的两个练习获得焦点没输入值输入值提示：可以借助表单元素的 defaultValue 属性提示：提示：js 中数组的表示方法中数组的表示方法“1”,“2”常用的遍历节点方法常用的遍历节点方法v取得匹配元素的取得匹配元素的所有子元素所

36、有子元素组成的集合组成的集合:children().该方法只考虑子元素而不考虑任该方法只考虑子元素而不考虑任何后代元素何后代元素.v取得匹配元素取得匹配元素后面紧邻的同辈元素的后面紧邻的同辈元素的集合集合(但集合中只有一个元素但集合中只有一个元素):next()v取得匹配元素取得匹配元素前面紧邻的同辈元素的前面紧邻的同辈元素的集合集合(但集合中只有一个元素但集合中只有一个元素):prev()v取得匹配元素前后所有的同辈元素取得匹配元素前后所有的同辈元素:siblings()CSS-DOM 操作操作v获取和设置元素的样式属性获取和设置元素的样式属性:css()v获取和设置元素透明度获取和设置元素

37、透明度:opacity 属性属性v获取和设置元素高度获取和设置元素高度,宽度宽度:height(),width().在设在设置值时置值时,若只传递数字若只传递数字,则默认单位是则默认单位是 px.如需要如需要使用其他单位则需传递一个字符串使用其他单位则需传递一个字符串,例如例如$(“p:first”).height(“2em”);v获取元素在当前视窗中的相对位移获取元素在当前视窗中的相对位移:offset().其返其返回对象包含了两个属性回对象包含了两个属性:top,left.该方法只对可见该方法只对可见元素有效元素有效jQuery 中的事件中的事件-加载加载 DOM v在页面加载完毕后在页面

38、加载完毕后,浏览器会通过浏览器会通过 JavaScript 为为 DOM 元素添加事件元素添加事件.在常规在常规的的 JavaScript 代码中代码中,通常使用通常使用 window.onload 方法方法,在在 jQuery 中使用中使用$(document).ready()方法方法.事件绑定事件绑定点击提示：使用 jQuery 的 is()方法判断元素是否可见v对匹配的元素进行特定的事件绑定对匹配的元素进行特定的事件绑定:bind()v实例实例合成事件合成事件vhover():模拟光标悬停时间模拟光标悬停时间.当光标移动到元当光标移动到元素上时素上时,会触发指定的第一个函数会触发指定的第

39、一个函数,当光标移当光标移出这个元素时出这个元素时,会触发指定的第二个函数会触发指定的第二个函数.vtoggle():用于模拟鼠标连续单击事件用于模拟鼠标连续单击事件.第一次第一次单击元素单击元素,触发指定的第一个函数触发指定的第一个函数,当再一次当再一次单击同一个元素时单击同一个元素时,则触发指定的第二个函数则触发指定的第二个函数,如果有更多个函数如果有更多个函数,则依次触发则依次触发,直到最后一直到最后一个个.vtoggle()的另一个作用的另一个作用:切换元素的可见状态切换元素的可见状态.事件冒泡事件冒泡v事件会按照事件会按照 DOM 层次结构像水泡一样不断层次结构像水泡一样不断向上只止

40、顶端向上只止顶端v解决解决:在事件处理函数中返回在事件处理函数中返回 false,会对事会对事件停止冒泡件停止冒泡.还可以停止元素的默认行为还可以停止元素的默认行为.事件对象的属性事件对象的属性v事件对象事件对象:当触发事件时当触发事件时,事件对象就被创事件对象就被创建了建了.在程序中使用事件只需要为函数添加在程序中使用事件只需要为函数添加一个参数一个参数.该事件对象只有事件处理函数才该事件对象只有事件处理函数才能访问到能访问到.事件处理函数执行完毕后事件处理函数执行完毕后,事件事件对象就被销毁了对象就被销毁了.vevent.pageX,event.pageY:获取到光标相对获取到光标相对于页

41、面的于页面的 x,y 坐标坐标.移除事件移除事件v移除某按钮上的所有移除某按钮上的所有 click 事件事件:$(“btn”).unbind(“click”)v移除某按钮上的所有事件移除某按钮上的所有事件:$(“btn”).unbind();vone():该方法可以为元素绑定处理函数该方法可以为元素绑定处理函数.当处理函当处理函数触发一次后数触发一次后,立即被删除立即被删除.即在每个对象上即在每个对象上,事件事件处理函数只会被执行一次处理函数只会被执行一次.使用使用jQueryjQuery创建动画效果创建动画效果jQuery 中的动画中的动画:隐藏和显示隐藏和显示vhide():在在 HTML

42、 文档中文档中,为一个元素调用为一个元素调用 hide()方法会将该元素的方法会将该元素的 display 样式改为样式改为 none.代码功代码功能同能同 css(“display”,“none”);vshow():将元素的将元素的 display 样式改为先前的显示状样式改为先前的显示状态态.v以上两个方法在不带任何参数的情况下以上两个方法在不带任何参数的情况下,作用是作用是立立即即隐藏或显示匹配的元素隐藏或显示匹配的元素,不会有任何动画不会有任何动画.可以可以通过制定速度参数使元素动起来通过制定速度参数使元素动起来.v以上两个方法会同时减少以上两个方法会同时减少(增大增大)内容的高度内容

43、的高度,宽度宽度和不透明度和不透明度.jQuery 中的动画中的动画(2)vfadeIn(),fadeOut():只改变元素的透明度只改变元素的透明度.fadeOut()会在指定的一段时间内降低元素的会在指定的一段时间内降低元素的不透明度不透明度,直到元素完全消失直到元素完全消失.fadeIn()则相反则相反.vslideDown(),slideUp():只会改变元素的高度只会改变元素的高度.如果一个元素的如果一个元素的 display 属性为属性为 none,当调用当调用 slideDown()方法时方法时,这个元素将由上至下延伸这个元素将由上至下延伸显示显示.slideUp()方法正好相反

44、方法正好相反,元素由下至上缩元素由下至上缩短隐藏短隐藏.jQuery 中的动画中的动画(3)vtoggle():切换元素的可见状态切换元素的可见状态:如果元素时如果元素时可见的可见的,则切换为隐藏则切换为隐藏;如果元素时隐藏的如果元素时隐藏的,则切换为可见的则切换为可见的.vslideToggle():通过高度变化来切换匹配元通过高度变化来切换匹配元素的可见性素的可见性.vfadeTo():把不透明度以渐近的方式调整到把不透明度以渐近的方式调整到指定的值指定的值(0 1 之间之间).练习练习3:品牌列表品牌列表注意注意:两个过滤函数两个过滤函数 is 和和 filter 的使用的使用练习4:超

45、链接和图片提示效果练习5:单行文本框的用户体验练习6:多选框应用练习7:下拉框应用vJQuery 可以通过可以通过$.get()或或$.post()方法来加载方法来加载 xml.vJQuery 解析解析 XML 与解析与解析 DOM 一样一样,可以使用可以使用 find(),children()等函数来解析和用等函数来解析和用 each()方法来进方法来进行遍历行遍历JQuery 加载并解析 XML练习练习8:8:使用使用 JQuery JQuery 实现级联对话框实现级联对话框练习练习9:9:使用使用 JQuery JQuery 实现实现在在 eclipse 中安装中安装 Aptana 插件

46、插件v把下载好的插件里的内容（只保留把下载好的插件里的内容（只保留featuresfeatures和和pluginsplugins这两个文件夹）放在这两个文件夹）放在eclipse eclipse 的的 aptana aptana 文件夹中文件夹中v在在eclipseeclipse文件夹里新建一个文件夹里新建一个linkslinks文件夹，文件夹，里面再建一个里面再建一个aptana.linkaptana.link文件，内容为文件，内容为path=/aptana path=/aptana 让让 Aptana 提示提示 jQueryvDreamweaver CS4和和Aptana都支持都支持jQ

47、uery提示提示 jQuery中的中的“$”及其作用及其作用 v1.“$”用作选择器用作选择器$(document).ready(function()/页面载入后执行页面载入后执行$(h2a).css(color,red);$(h2a).css(textDecoration,none););v则使得本来不支持子选择器的则使得本来不支持子选择器的IE 6也能支持子选择器也能支持子选择器了了,jQuery对象和对象和DOM对象的区别对象的区别v注意用注意用“$”选中的元素（选中的元素（jQuery对象）和用对象）和用DOM方法选中的元素（方法选中的元素（DOM对象）含义并不相对象）含义并不相同同v

48、var one=getElementById(“one”);v$(“#one”)v表现在表现在jQuery对象的方法和属性与对象的方法和属性与DOM对象的并不相同，如对象的并不相同，如vone.onclick()v$(“#one”).click()jQuery中的中的“$”及其作用及其作用2.“$”用作功能函数前缀用作功能函数前缀(1)遍历数组遍历数组v$.each(0,1,2,function(i)document.write(Item#+i+););(2)遍历选择器中的元素遍历选择器中的元素 v$(function()v$(img).each(function(index)vthis.ti

49、tle=这是第这是第+(index+1)+幅图，幅图，路径是：路径是：+this.src;v);v);jQuery中的中的“$”及其作用及其作用v3.用作用作$(document).ready()$(document).ready(function()(#loading).css(display,none);)vjQuery的写法则会使页面仅加载完的写法则会使页面仅加载完DOM结构后就执结构后就执行，即加载完行，即加载完html文档后，还没加载图像等其他文件文档后，还没加载图像等其他文件就执行就执行ready()函数，给图像添加函数，给图像添加“display:none”的的样式，因此样式，因

50、此id为为“loading”的图片不可能被显示。的图片不可能被显示。v所以所以$(document).ready()比比window.onload载入执行载入执行更快更快$(document).ready()比比window.onload的比较的比较v$(document).ready()的优势的优势v在在DOM文档载入后就执行，载入速度更快；文档载入后就执行，载入速度更快；v如果找不到如果找不到DOM中的元素，能够自动容错；中的元素，能够自动容错；v在页面中多个地方使用在页面中多个地方使用ready()方法不会发方法不会发生冲突生冲突 jQuery中的中的“$”及其作用及其作用v4.创建创建