jQuery培训课程第一课时(共68张)

1、jQuery 基础教程基础教程基于基于WebWeb标准的网页设计与制作配套课件标准的网页设计与制作配套课件 V1.0 V1.0 内容简介内容简介jQuery的原理的原理一一jQuery对象和对象和DOM对象对象二二jQuery选择器选择器三三三三jQueryjQuery的原理的原理jQuery的历史的历史v jQuery是由美国人是由美国人 John Resig 创建，它是轻量级创建，它是轻量级js库这是库这是其他的其他的js库所不及的。库所不及的。 2005年年8月月22日，日，John Resig提出提出Behaviour框架的三种框架的三种改良建议（支持层级选择符、支持事件绑定、消除冗改

2、良建议（支持层级选择符、支持事件绑定、消除冗余关键字）余关键字） 2006年年1月月14日日jQuery正式发布正式发布 2006年年1月月25日，首个日，首个jQuery插件发布插件发布 2006年年2月月26日，日，jQuery AJAX插件发布插件发布v jQuery是一种新的是一种新的JavaScript库。库。 jQuery是继是继prototype只有又一个优秀的只有又一个优秀的js框架框架 其宗旨是：其宗旨是：WRITE LESS, DO MORE,(写更少的写更少的代码，做更多的事情。代码，做更多的事情。)jQuery的原理的原理v jQuery是为了改变是为了改变javasc

3、ript的编码方式而设计的，它把的编码方式而设计的，它把面向对象面向对象思想发挥的淋漓尽致思想发挥的淋漓尽致v 它那么它是如何实现它的声明的呢它那么它是如何实现它的声明的呢?这里这里,用以下的一段简用以下的一段简短的使用流程短的使用流程: 查找查找(创建创建)jQuery对象对象:$(”selector”); 调用调用jQuery对象的方法完成我们需要完成的工作对象的方法完成我们需要完成的工作:$(”selector”).doOurWork();jQuery就是以这种可以说是最简单的编码逻辑来改变就是以这种可以说是最简单的编码逻辑来改变js编编码方式的码方式的.这两个步骤是这两个步骤是jQue

4、ry的编码逻辑核心的编码逻辑核心,要实现要实现这种简洁编码方式这种简洁编码方式,创建创建jQuery对象这一环节至关重要对象这一环节至关重要.因此因此,jQuery的的dom元素查找能力相当强悍。元素查找能力相当强悍。*jQuery() = $()jQuery的优势的优势 v轻量级轻量级 （Lightweight）v强大的选择器强大的选择器 v出色的出色的DOM操作封装操作封装 v可靠的事件处理机制可靠的事件处理机制 v出色的浏览器兼容性出色的浏览器兼容性v完善的完善的AJAXv链式操作方式链式操作方式v行为层和结构层分离行为层和结构层分离v丰富的插件支持和完善的文档丰富的插件支持和完善的文档

5、原理：写得少原理：写得少, 做得多做得多JavaScript框架简介框架简介v随着随着JavaScript、CSS、Ajax等技术的不断等技术的不断进步，越来越多的开发者将一个又一个丰进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可富多彩的程序功能进行封装，供其他人可以调用这些封装好的以调用这些封装好的程序组件（框架）程序组件（框架）v当前流行的当前流行的 JavaScript 库有库有: jQuery的使用的使用v下载：下载：http:/提供了最新的提供了最新的jQuery框架下载。通常只需下载最小的框架下载。通常只需下载最小的jQuery包包（Minified）即可

6、。目前最新的版本）即可。目前最新的版本jquery-2.0.3.min.js文件只有文件只有81.6 KB *历史版本：历史版本：jQuery 1.0、jQuery 1.1、jQuery 1.1.3、jQuery 1.2、jQuery 1.2.6 、 jQuery 1.3 、 jQuery 1.3.2 、 jQuery 1.4、 jQuery1.5 、 jQuery 1.6 、 jQuery 1.7 、 jQuery 1.7.1 、 jQuery 1.7.2jQuery 1.10.2、jQuery 2.0.3v引用：引用：v将将jQuery框架文件导入后，就可以使用框架文件导入后，就可以使用j

7、Query的选择器和各种函数功能了。的选择器和各种函数功能了。 第一个第一个jQuery程序程序 $(document).ready(function() alert(Hello World!););引入引入jQuery等待等待DOM文档载入后执行类文档载入后执行类似于似于window.onload弹出一个对话框弹出一个对话框jQueryjQuery对象与对象与DOMDOM对象对象jQuery 对象对象vjQuery 对象就是对象就是通过通过 jQuery 包装包装 DOM 对象后对象后产生的对象产生的对象vjQuery 对象是对象是 jQuery 独有的独有的. 如果一个对象是如果一个对象是

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

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

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

11、.innerHTML;$(#msg).get(0).innerHTML;v如：如：$(#msg)0，$(div).eq(1)0，$(div).get()1，$(td)5这些都是这些都是dom对对象，可以使用象，可以使用dom中的方法，但不能再使用中的方法，但不能再使用jQuery的方法的方法 jQueryjQuery的选择器的选择器jQuery 选择器选择器v 选择器是选择器是 jQuery 的根基的根基, 在在 jQuery 中中, 对事件处理对事件处理, 遍历遍历 DOM 和和 Ajax 操作都依赖于选择器操作都依赖于选择器v jQuery 选择器的优点选择器的优点: 简洁的写法简洁的写法

12、 完善的事件处理机制完善的事件处理机制基本选择器基本选择器v基本选择器是基本选择器是 jQuery 中最常用的选择中最常用的选择器器, 也是最简单的选择器也是最简单的选择器, 它通过元素它通过元素 id, class 和标记名来查找和标记名来查找 DOM 元素元素基本选择器示例基本选择器示例v改变改变 id 为为 one 的元素的背景色为的元素的背景色为 红色红色$(#one).css(backgroundColor,red);v改变元素名为改变元素名为 的所有元素的背景色为的所有元素的背景色为 # bbffaa，字体颜色为红色，字体颜色为红色$(p).css(color:red,backgr

13、oundColor:#bbffaa);v改变第一个改变第一个元素的背景色为红色元素的背景色为红色$(p).eq(0).css(backgroundColor,red);v改变所有改变所有元素和元素和 id 为为 one 的元素的背的元素的背景色为景色为 # bbffaa$(h1,#one).css(backgroundColor,#bbffaa);层次选择器层次选择器v如果想通过如果想通过 DOM 元素之间的层次关系来获取特定元素元素之间的层次关系来获取特定元素, 例如后代元素例如后代元素, 子元素子元素, 相邻元素相邻元素, 兄弟元素等兄弟元素等, 则需要使则需要使用层次选择器用层次选择器v

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

15、为为 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 改变当前正在执行动画的所有元素的背景色为改变当前正在执行动画的所有元素的背景色为 # bbffaav $(:animated)内容过滤选择器内容过滤选择器v内容过滤选择器的过滤规则主要体现在内容过滤选择器的过滤规则主要体现在它它所包含的子元素所包含的子元素和和文本内容文本内容上上内容过滤选择器示例内容过滤选择器示例v改变含有文本改变含有文本 di 的的 p元素的背景色为元素的背景色为 # bbffaav$(p:cotains(di)v改变不包含子元

18、素改变不包含子元素(或者文本元素或者文本元素) 的的 div 空空元素的背景色为元素的背景色为 # bbffaa$(p:empty)v改变含有改变含有 class 为为 mini 元素的元素的 p元素的背景元素的背景色为色为 # bbffaav$(p:has(.mini)v改变含有子元素改变含有子元素(或者文本元素或者文本元素)的的div元素元素的背景色为的背景色为 # bbffaa $(p:parent)可见性过滤选择器可见性过滤选择器v可见性过滤选择器是可见性过滤选择器是根据元素的可见和不可见状态根据元素的可见和不可见状态来选来选择相应的元素择相应的元素v可见选择器可见选择器 :hidde

19、n 不仅包含样式属性不仅包含样式属性 display 为为 none 的元素的元素, 也包含文本隐藏域也包含文本隐藏域 ()和和 visible:hidden 之类的元素之类的元素可见性过滤选择器示例可见性过滤选择器示例v改变所有可见的改变所有可见的div元素的背景色为元素的背景色为 # bbffaav$(“div:visible).css(background-color,#bbffaa);v选取所有不可见的元素选取所有不可见的元素, 利用利用 jQuery 中的中的 show() 方法将它们显示出来方法将它们显示出来, 并设置其背景并设置其背景色为色为 # bbffaav选取所有的文本隐藏

20、域选取所有的文本隐藏域, 并打印它们的值并打印它们的值怎么显示？怎么显示？属性过滤选择器属性过滤选择器v属性过滤选择器的过滤规则是属性过滤选择器的过滤规则是通过元素的通过元素的属性来获取相应的元素属性来获取相应的元素属性过滤选择器示例属性过滤选择器示例v选取下列元素选取下列元素,改变其背景色为改变其背景色为 # bbffaav含有属性含有属性title 的的div元素元素 $(divtitle)v属性属性title值等于值等于test的的div元素元素 $(“divtitle=text”)v属性属性title值不等于值不等于test的的div元素元素(没有属性没有属性title的也将的也将被选

21、中被选中).v属性属性title值值 以以te开始开始 的的div元素元素.v属性属性title值值 以以est结束结束 的的div元素元素.v属性属性title值值 含有含有es的的div元素元素.v选取有属性选取有属性id的的div元素，然后在结果中选取属性元素，然后在结果中选取属性title值值含有含有“es”的的 div 元素元素.怎么显示？怎么显示？子元素过滤选择器子元素过滤选择器v nth-child() 选择器详解如下：选择器详解如下： nth-child(even/odd): 能选取每个父元素下的索引值为能选取每个父元素下的索引值为偶偶(奇奇)数的元素数的元素 nth-chil

22、d(2): 能选取每个父元素下的索引值为能选取每个父元素下的索引值为 2 的元素的元素 nth-child(3n): 能选取每个父元素下的索引值是能选取每个父元素下的索引值是 3 的倍的倍数数 的元素的元素 nth-child(3n + 1): 能选取每个父元素下的索引值是能选取每个父元素下的索引值是 3n + 1的元素的元素子元素过滤选择器示例子元素过滤选择器示例v选取下列元素选取下列元素,改变其背景色为改变其背景色为 # bbffaav每个每个class为为one的的div父元素下的第父元素下的第2个子元素个子元素.v每个每个class为为one的的div父元素下的第一个子元素父元素下的第

23、一个子元素v每个每个class为为one的的div父元素下的最后一个子元素父元素下的最后一个子元素v如果如果class为为one的的div父元素下的仅仅只有一个子元素，父元素下的仅仅只有一个子元素，那么选中这个子元素那么选中这个子元素$(“divclass=one:only-child)表单对象属性过滤选择器表单对象属性过滤选择器v此选择器主要对所选择的表单元素进行过滤此选择器主要对所选择的表单元素进行过滤表单对象属性过滤选择器示例表单对象属性过滤选择器示例v利用利用 jQuery 对象的对象的 val() 方法改变表单内方法改变表单内可用可用 元素的值元素的值$(“input:enabled

24、”).val(Hello World);v利用利用 jQuery 对象的对象的 val() 方法改变表单内方法改变表单内不可用不可用 元素的值元素的值v利用利用 jQuery 对象的对象的 length 属性获取多选框属性获取多选框选中的个数选中的个数v利用利用 jQuery 对象的对象的 text() 方法获取下拉框方法获取下拉框选中的内容选中的内容表单选择器表单选择器v此选择器主要对所选择的表单元素进行过滤此选择器主要对所选择的表单元素进行过滤练习练习v1. 给网页中所有的给网页中所有的 元素且元素内容中包含元素且元素内容中包含“段落段落”字样添加字样添加 onclick 事件事件v2.

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

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

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

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

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

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

31、向已被删除的节点的引用的节点的引用.vempty(): 清空节点清空节点 清空元素中的所有后清空元素中的所有后代节点代节点(不包含属性节点不包含属性节点).复制节点复制节点vclone(): 克隆匹配的克隆匹配的 DOM 元素元素, 返回返回值为克隆后的副本值为克隆后的副本. 但此时复制的新节但此时复制的新节点不具有任何行为点不具有任何行为.vclone(true): 复制元素的同时也复制元复制元素的同时也复制元素中的的事件素中的的事件 替换节点替换节点vreplaceWith(): 将所有匹配的元素都替换为将所有匹配的元素都替换为指定的指定的 HTML 或或 DOM 元素元素vreplace

32、All(): 颠倒了的颠倒了的 replaceWith() 方法方法.v注意注意: 若在替换之前若在替换之前, 已经在元素上绑定了已经在元素上绑定了事件事件, 替换后原先绑定的事件会与原先的元替换后原先绑定的事件会与原先的元素一起消失素一起消失包裹节点包裹节点vwrap(): 将指定节点用其他标记包裹起来将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构该方法对于需要在文档中插入额外的结构化标记非常有用化标记非常有用, 而且不会破坏原始文档的而且不会破坏原始文档的语义语义.vwrapAll(): 将所有匹配的元素用一个元素来将所有匹配的元素用一个元素来包裹包裹. 而而 wra

33、p() 方法是将所有的元素进行方法是将所有的元素进行单独包裹单独包裹.vwrapInner(): 将每一个匹配的元素的将每一个匹配的元素的子内子内容容(包括文本节点包括文本节点)用其他结构化标记包裹起用其他结构化标记包裹起来来属性操作属性操作vattr(): 获取获取html属性和设置属性属性和设置属性 当为该方法传递一个参数时当为该方法传递一个参数时, 即为某元素的获即为某元素的获取指定属性取指定属性 当为该方法传递两个参数时当为该方法传递两个参数时, 即为某元素设置即为某元素设置指定属性的值指定属性的值vjQuery 中有很多方法都是一个函数实现获取和设中有很多方法都是一个函数实现获取和设

34、置置. 如如: attr(), html(), text(), val(), height(), width(), css() 等等.vremoveAttr(): 删除指定元素的指定属性删除指定元素的指定属性样式操作样式操作v获取获取 class 和设置和设置 class : class 是元素的一个属性是元素的一个属性, 所以获取所以获取 class 和设置和设置 class 都可以使用都可以使用 attr() 方方法来完成法来完成.v追加样式追加样式: addClass() v移除样式移除样式: removeClass() - 从匹配的元素中删除从匹配的元素中删除全部或指定的全部或指定的

35、classv切换样式切换样式: toggleClass() - 控制样式上的重复切控制样式上的重复切换换.如果类名存在则删除它如果类名存在则删除它, 如果类名不存在则添如果类名不存在则添加它加它.v判断是否含有某个样式判断是否含有某个样式: hasClass() - 判断元素中判断元素中是否含有某个是否含有某个 class, 如果有如果有, 则返回则返回 true; 否则返否则返回回 false设置和获取设置和获取 HTML, 文本和值文本和值v读取和设置某个元素中的读取和设置某个元素中的 HTML 内容内容: html() . 该该方法可以用于方法可以用于 XHTML, 但不能用于但不能用于

36、 XML 文档文档v读取和设置某个元素中的读取和设置某个元素中的文本内容文本内容: text(). 该方法该方法既可以用于既可以用于 XHTML 也可以用于也可以用于 XML 文档文档.v读取和设置某个元素中的值读取和设置某个元素中的值: val() - 该方法类似该方法类似 JavaScript 中的中的 value 属性属性. 对于对于文本框文本框, 下拉列下拉列表框表框, 单选框单选框该方法可返回元素的值该方法可返回元素的值(多选框只能多选框只能返回第一个值返回第一个值).如果为多选下拉列表框如果为多选下拉列表框, 则返回一则返回一个包含所有选择值的数组个包含所有选择值的数组val()

37、方法的两个练习方法的两个练习获得获得焦点焦点没输没输入值入值输入值输入值提示：可以借助表单元素的提示：可以借助表单元素的 defaultValue 属性属性提示：提示：js 中数组的表示方法中数组的表示方法“1”, “2”常用的遍历节点方法常用的遍历节点方法v取得匹配元素的取得匹配元素的所有子元素所有子元素组成的集合组成的集合: children(). 该方法只考虑子元素而不考虑任该方法只考虑子元素而不考虑任何后代元素何后代元素.v取得匹配元素取得匹配元素后面紧邻的同辈元素的后面紧邻的同辈元素的集合集合(但集合中只有一个元素但集合中只有一个元素): next()v取得匹配元素取得匹配元素前面紧

38、邻的同辈元素的前面紧邻的同辈元素的集合集合(但集合中只有一个元素但集合中只有一个元素): prev()v取得匹配元素前后所有的同辈元素取得匹配元素前后所有的同辈元素: siblings()CSS-DOM 操作操作v获取和设置元素的样式属性获取和设置元素的样式属性: css()v获取和设置元素透明度获取和设置元素透明度: opacity 属性属性v获取和设置元素高度获取和设置元素高度, 宽度宽度: height(), width(). 在设在设置值时置值时, 若只传递数字若只传递数字, 则默认单位是则默认单位是 px. 如需要如需要使用其他单位则需传递一个字符串使用其他单位则需传递一个字符串,

39、例如例如 $(“p:first”).height(“2em”);v获取元素在当前视窗中的相对位移获取元素在当前视窗中的相对位移: offset(). 其返其返回对象包含了两个属性回对象包含了两个属性: top, left. 该方法只对可见该方法只对可见元素有效元素有效jQuery 中的事件中的事件 - 加载加载 DOM v在页面加载完毕后在页面加载完毕后, 浏览器会通过浏览器会通过 JavaScript 为为 DOM 元素添加事件元素添加事件. 在常规在常规的的 JavaScript 代码中代码中, 通常使用通常使用 window.onload 方法方法, 在在 jQuery 中使用中使用$(

40、document).ready() 方法方法.事件绑定事件绑定点击点击提示：提示： 使用使用 jQuery 的的 is() 方法判断元素是否可见方法判断元素是否可见v对匹配的元素进行特定的事件绑定对匹配的元素进行特定的事件绑定: bind()v实例实例合成事件合成事件vhover(): 模拟光标悬停时间模拟光标悬停时间. 当光标移动到元当光标移动到元素上时素上时, 会触发指定的第一个函数会触发指定的第一个函数, 当光标移当光标移出这个元素时出这个元素时, 会触发指定的第二个函数会触发指定的第二个函数.vtoggle(): 用于模拟鼠标连续单击事件用于模拟鼠标连续单击事件. 第一次第一次单击元素

41、单击元素, 触发指定的第一个函数触发指定的第一个函数, 当再一次当再一次单击同一个元素时单击同一个元素时, 则触发指定的第二个函则触发指定的第二个函数数, 如果有更多个函数如果有更多个函数, 则依次触发则依次触发, 直到最直到最后一个后一个.vtoggle() 的另一个作用的另一个作用: 切换元素的可见状态切换元素的可见状态.移除事件移除事件v移除某按钮上的所有移除某按钮上的所有 click 事件事件: $(“btn”).unbind(“click”)v移除某按钮上的所有事件移除某按钮上的所有事件: $(“btn”).unbind();vone(): 该方法可以为元素绑定处理函数该方法可以为元素绑定处理函数. 当处理函当处理函数触发一次后数触发一次后, 立即被删除立即被删除. 即在每个对象上即在每个对象上, 事件事件处理函数只会被执行一次处理