jquery培训教材课件.ppt

1、jquery 培训教材-作者：罗露第一章 jquery简介 第二章jquery选择器 第三章jquery中的DOM操作 第四章jquery中的事件和动画jquery培训教材PPT课件jquery培训教材PPT课件jQuery 培训教材第一章jQuery 简介JavaScript 库 为简化 JavaScript 的开发 封装了很多预定义的对象和函数 兼容各大浏览器常见的 JavaScript 库 Prototype Dojo YUI Ext JS Moo Tools jQuery认识 jQuery jQuery 是一个 JavaScript 库 jQuery 极大地简化了 JavaScript

2、 编程 jQuery 很容易学习 jQuery 的理念：写得更少，做得更多（write less,do more）jQuery 有优势 不污染顶级变量 出色的浏览器兼容性 链式操作方式 隐式迭代 行为层与结构层分离 跟丰富的插件支持 完善的文档 开源 轻量级 强大的选择器 出色的 DOM 操作 可靠的事件处理机制 完善的 Ajax进入 jQuery 世界 获得 jQuery 库（http:/）jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jquery-版本号.js（无压缩版,用于测试、学习）jquery-版本号.min.js（压缩版,用于产品、项

3、目)配置：无需安装，只需有库文件即可(库的替代：见备注)网页中引入 jQuery 库：注意注意：标签应该位于页面的 部分。在 HTML5 中，不必在 标签中使用type=text/javascript。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚步语言！jQuery 基础语法 基础语法是：$(selector).action()美元符号定义 jQuery（又称工厂函数）选择器（selector）“查询”和“查找”HTML 元素 action()执行对元素的操作 示例$(this).hide()/隐藏当前元素隐藏当前元素$(p).hide()/隐藏所有段落隐藏所有段落$(p

4、.test).hide()/隐藏所有隐藏所有 class=test 的段落的段落$(#test).hide()/隐藏第隐藏第 id=test 的元素的元素jQuery 代码风格 链式操作风格 对于同一对象不超过3个操作，可直接写一行 对同一对象的操作较多，建议每行写一个操作 添加必要的注释$(has_children).click(function()$(this).addClass(highLight).children(a).show().end().siblings().removeClass(highLight).children(a).hide(););文档就绪函数$(documen

5、t).ready()：类似 window.onload定义文档加载完后执行的函数$(document).ready(function()alert(Hello World!););这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。例如：试图隐藏一个不存在的元素 获得未完全加载的图像的大小文档就绪函数 window.onload 与$(document).ready()的对比window.onload$(document).ready()执行时机必须等网页中所有内容加载完后（包括图片）才能执行网页中所有DOM结构绘制完后就执行编写

6、个数不能编写多个window.onload=function();window.onload=function();此时第二个覆盖第一个能同时编写多个$(document).ready(function();$(document).ready(function();两个函数都执行简化写法无$()jQuery 对象与 DOM 对象 DOM 对象：HTML的文档对象模型中的元素对象。可通过 javascript 的以下方法获取 jQuery 对象：经jQuery包装后的DOM对象 两者拥有的方法不同document.getElementById(test)document.getElementsB

7、yTagName(p)$(#test)$(p)jQuery 对象与 DOM 对象相互转换 jQuery 对象转成 DOM 对象 DOM 对象转成 jQuery 对象var$test=$(#test);var test=$test0;/jQuery对象是一个数组，可通过索引得到对象是一个数组，可通过索引得到DOM对象对象或或var test=$test.get(0);/用用jQuery提供的提供的get(index)方法得到方法得到DOM对象对象var test=document.getElementById(test);var$test=$(test);/用用jQuery的工厂方法的工厂方法解

8、决 jQuery 与其它库的冲突 jQuery 在其它库之后导入 jQuery.noConflict();让出$使用权 然后用 jQuery 而不用$jQuery 在其它库之前导入 直接用 jQuery 而不用$，同时，可以使用$()方法作为其它库的快捷方式详情见备注。jQuery 开发工具和插件 Dreamweaver 为了使 Dreamweaver 支持自动提示需要到http:/xtnd.us/dreamweaver/jquery 下载一个插件：jQuery_API.mxp（如有需要见：“jquery例子集合”文件夹中jQuery_API.mxp）在DW中选择“命令”-“扩展管理”-“安装

9、扩展”Eclipse jQueryWTP 插件 下载 Spket 插件：http:/ 下载jQuery 开发工具和插件 Aptana Visual Studio 2010（已包含jquery-1.4.1）jQuery 培训教材第二章jQuery 选择器什么是 jQuery 选择器 方便找出文档中的 DOM 元素 可对找出的元素添加相应行为 兼容各种浏览器jQuery 选择器的优点 写法简洁$(#ID)、$(.class)、$(TagName)支持 CSS1CSS3 选择器 无需考虑特定浏览器是否支持 完善的处理机制 元素不存在不会出错 注意：判断元素是否存在，要判断 jQuery 对象的长度是

10、否0，或者 转换成 DOM 对象来判断/不能用下面方式判断元素是否存在不能用下面方式判断元素是否存在if($(#test)/可用以下两种方式判断元素是否存在可用以下两种方式判断元素是否存在if($(#test).length 0)或或if($(#test)0)/javascript 代码，元素不存在会出错代码，元素不存在会出错document.getElementById(test).style.color=red;/jQuery 代码，元素不存在不出错代码，元素不存在不出错$(#test).css(color,red);jQuery 选择器的类型 基本选择器 层次选择器 过滤选择器 基本过滤

11、选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单域对象属性过滤选择器 表单选择器jquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择器选择器描述返回示例#id根据给定id匹配一个元素单个元素$(#t)选取id为t的元素.class根据给定类名匹配元素集合元素$(.t)选取所有class为t的元素element根据给定元素名匹配元素集合元素$(p)选取所有元素*匹配所有元素集合元素$(*)选取所有元素selector1,selector2,selector3,将每个选择器匹配到的元素合并后一起返回集合元素$(div,span,p.m

12、yclass)选取所有,和拥有class为myclass的标签的一组元素jquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择器#id#id 返回值:Array(1)概述概述:根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。(2)参数参数：id String用于搜索的，通过元素的 id 属性中给定的值(3)示例示例：例一：描述：查找含有特殊字符id=“runbutton的元素”。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择

13、器 .class.class 返回值:Array(1)概述概述:根据给定的类匹配元素。(2)参数参数：class String一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。(3)示例示例：例一：描述：选取class=“font”的元素。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择器 elementelement 返回值:Array(1)概述概述:根据给定的元素名匹配所有元素(2)参数参数：element String一个用于搜索的元素。指向 DOM 节点的标签名。(

14、3)示例示例：例一：描述：查找一个 p 元素。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择器 *返回值:Array(1)概述概述:匹配所有元素多用于结合上下文来搜索。(2)示例示例：例一：描述：找到form下的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)基本选择器 selector1,selector2,selectorNselector1、selector2、

15、selectorN 返回值:Array (1)概述概述:将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。(2)参数参数：selector1 Selector 一个有效的选择器 selector2 Selector 另一个有效的选择器 selectorN(可选)Selector 任意多个有效选择器(3)示例示例：例一：描述：找到匹配任意一个类的元素，并设置字体颜色为红色代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)层次选择器选择器描述返回示例$(

16、ancestor descendant)选取ancesdor元素里的所有descendant(后代)元素集合元素$(div span)选取里所有的元素$(parent child)选取parent元素下的直接child元素，而不是所有后代元素集合元素$(div span)选取下子元素$(prev+next)选取紧接在prev元素后的next元素集合元素$(.one+div)选取class为one的下一个兄弟元素$(prev siblings)选取prev元素之后的所有siblings元素集合元素$(#two div)选取id为two元素后面的所有兄弟元素后两种选择器较少用后两种选择器较少用因为

17、因为jQuery中有更简单的方法代替：中有更简单的方法代替：next()代替代替$(prev+next)nextAll()代替代替$(prev siblings)jquery培训教材(PPT113页)jquery培训教材(PPT113页)层次选择器 ancestor descendantancestor descendant 返回值:Array(1)概述概述:在给定的祖先元素下匹配所有的后代元素(2)参数参数：ancestor Selector 任何有效选择器 descendant Selector 用以匹配元素的选择器，并且它是第一个选择器的后代元素(3)示例示例：例一：描述：找到form下

18、的每一个元素，并设置字体样式。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)层次选择器 parent childparent child 返回值:Array(1)概述概述:在给定的父元素下匹配所有的子元素(2)参数参数：parent Selector 任何有效选择器 child Selector 用以匹配元素的选择器，并且它是第一个选择器的子元素(3)示例示例：例一：描述：匹配表单中所有的子级label元素，并设置字体颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html

19、jquery培训教材(PPT113页)jquery培训教材(PPT113页)层次选择器 prev+nextpre+next 返回值:Array(1)概述概述:匹配所有紧接在 prev 元素后的 next 元素(2)参数参数：pre Selector 任何有效选择器 next Selector 一个有效选择器并且紧接着第一个选择器(3)示例示例：例一：描述：匹配所有跟在 label 后面的 input 元素，并设置边框为蓝色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)层次选择器 prev sib

20、lingsprevsiblings 返回值:Array(1)概述概述:匹配 prev 元素之后的所有 siblings 元素(2)参数参数：prev Selector 任何有效选择器 siblings Selector 一个选择器，并且它作为第一个选择器的同辈(3)示例示例：例一：描述：找到所有与表单同辈的 input 元素，并设置边框为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器选择器描述返回示例:first选取第一个元素单个元素$(div:fir

21、st)选取中第一个:last选取最后一个元素单个元素$(div:first)选取中最后个:not(select)去除与选择器匹配的元素集合元素$(input:not(.myClass):even选取索引是偶数的元素集合元素$(input:even):odd选取索引是奇数的元素集合元素$(input:odd):eq(index)选取索引=index的元素单个元素$(input:eq(1):gt(index)选取索引index的元素集合元素$(input:gt(1):lt(index)选取索引index的元素集合元素$(input:lt(1):header选取所有标题元素集合元素$(:header

22、)选所有.:animated当前正执行动画的元素集合元素$(div:animited)选取所有正在执行动画的jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :firstfirst()/:first 返回值:jQuery(1)概述概述:获取第一个元素(2)示例示例：例一：描述：获取第一个th元素，并设置背景色为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :lastlast()/:l

23、ast()返回值:jQuery(1)概述概述:获取最后个元素(2)示例示例：例一：描述：获取最后一个th元素，并设置背景色为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :not(select):not(selector)返回值:Array(1)概述概述:去除所有与给定选择器匹配的元素在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a)和:not(div,a)）(2)参数参数:selector Selector 用于筛选的选择器

24、(3)示例示例：例一：描述：只有对不在执行动画效果的元素执行一个动画特效 代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :even:even 返回值:Array(1)概述概述:匹配所有索引值为偶数的元素，从 0 开始计数(2)示例示例：例一：描述：表格中偶数行高亮显示。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :o

25、dd:odd 返回值:Array(1)概述概述:匹配所有索引值为奇数的元素，从 0 开始计数(2)示例示例：例一：描述：表中奇数行不高亮显示。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :eq(index):eq(index)返回值:Array(1)概述概述:匹配一个给定索引值的元素(2)参数参数:index Number 从 0 开始计数(3)示例示例：例一：描述：在表格中查找第二个th。代码见：“jquery例子集合”文件夹中的examples.ht

26、mljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :gt(index):gt(index)返回值:Array(1)概述概述:匹配所有大于给定索引值的元素(2)参数参数:index Number 从 0 开始计数(3)示例示例：例一：描述：在表格中查找索引值大于21的td。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :lt(index):lt(index)返回值:Array(1)概述概

27、述:匹配所有大于给定索引值的元素(2)参数参数:index Number 从 0 开始计数(3)示例示例：例一：描述：在表格中查找索引值小于2的td。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :header:header 返回值:Array(1)概述概述:匹配如 h1,h2,h3之类的标题元素(2)示例示例：例一：描述：给页面内所有标题加上背景色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)

28、jquery培训教材(PPT113页)过滤选择器-基本过滤选择器基本过滤选择器 :animated:animated 返回值:Array(1)概述概述:匹配所有正在执行动画效果的元素(2)示例示例：例一：描述：只有对不在执行动画效果的元素执行一个动画特效 代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-内容过滤选择器内容过滤选择器选择器描述返回示例:contains(text)选取含有文本内容的元素集合元素$(div:contains(好的):empty选取不包含子元素和文本的空元素集合

29、元素$(div:empty):has(select)选取含有选择器所匹配元素的元素集合元素$(div:has(p):parent选取含有子元素或文本的元素集合元素$(div:parent)jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-内容过滤选择器内容过滤选择器 :contains(text):contains(text)返回值:Array(1)概述概述:匹配包含给定文本的元素(2)示例示例：例一：描述：查找所有包含 123 的 td 元素。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jqu

30、ery培训教材(PPT113页)过滤选择器-内容过滤选择器内容过滤选择器 :empty:empty 返回值:Array(1)概述概述:匹配所有不包含子元素或者文本的空元素(2)示例示例：例一：描述：查找所有不包含子元素或者文本的空元素。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-内容过滤选择器内容过滤选择器 :has(selector):has(selector)返回值:Array(1)概述概述:匹配含有选择器所匹配的元素的元素(2)参数参数:selector Selector 一个

31、用于筛选的选择器(3)示例示例：例一：描述：给所有包含 a 元素的 div 元素设置div中的字体颜色为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-内容过滤选择器内容过滤选择器 :parent:parent 返回值:Array(1)概述概述:查找所有含有子元素或者文本的 td 元素(2)示例示例：例一：描述：查找所有含有子元素或者文本的 td 元素HTML 代码:Value 1 Value 2jQuery 代码:$(td:parent)结果：Value 1,Value 2 jq

32、uery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器过滤选择器-可见性过滤选择器可见性过滤选择器选择器描述返回示例:hidden选取所有不可见的元素集合元素$(:hidden)选取所有不可见的元素。包括,和 等元素。如果只想选取元素，可以使用$(input:hidden):visible选取所有可见的元素集合元素$(“div:visible”)选取所有可见的 元素jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-可见性过滤选择器可见性过滤选择器 :hidden:hidden 返回值:Array(1)概述概述:匹配所有不可见元素

33、，或者type为hidden的元素(2)示例示例：例一：描述：查找隐藏的 trHTML 代码:Value 1 Value 2jQuery 代码:$(tr:hidden)结果：Value 1jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-可见性过滤选择器可见性过滤选择器 :hidden例二：描述：匹配type为hidden的元素HTML 代码:jQuery 代码:$(input:hidden)结果：jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-可见性过滤选择器可见性过滤选择器 :visible:visible 返回

34、值:Array(1)概述概述:匹配所有的可见元素(2)示例示例：例一：描述：查找所有可见的 tr 元素HTML 代码:Value 1 Value 2jQuery 代码:$(tr:visible)结果：Value 2jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器选择器描述返回示例attribute选取拥有此属性的元素集合元素$(divid)选取有id属性的元素attribute=value选取属性值为value的元素集合元素$(divtitle=test)attribute!=value选取属性值不等于value的元素集合元素

35、$(divtitle!=test)attribute=value选取属性值以value开头的元素集合元素$(divtitle=test)attribute$=value选取属性值以value结尾的元素集合元素$(divtitle$=test)attribute*=value选取属性值包含value的元素集合元素$(divtitle*=test)selector1selector2selector3多个属性选择器组成复合选择器集合元素$(dividtitle$=st)jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器 attrib

36、uteattribute 返回值:Array(1)概述概述:匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的符号已经被废除！如果想要兼容最新版本，只需要简单去掉符号即可。(2)参数参数:attribute String 属性名(3)示例示例：例一：描述：查找所有 name 属性是 none2 的 input 元素，并设置边框为绿色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器 attribute=valueattribute=value 返回

37、值:Array(1)概述概述:匹配给定的属性是某个特定值的元素(2)参数参数:attribute String 属性名 value(可选)String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。(3)示例示例：例一：描述：查找所有 name 属性是 none2 的 input 元素，并设置边框为绿色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute!=valueattribute!=value 返回值:Arr

38、ay(1)概述概述:匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not(attr=value)要匹配含有特定属性但不等于特定值的元素，请使用attr:not(attr=value)(2)参数参数:attribute String 属性名 value(可选)String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。(3)示例示例：例一：描述：查找所有 name 属性不是 online 的 input 元素代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT1

39、13页)过滤选择器-属性过滤选择器属性过滤选择器attribute=valueattribute=value 返回值:Array(1)概述概述:匹配给定的属性是以某些值开始的元素(2)参数参数:attribute String 属性名 value(可选)String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。(3)示例示例：例一：描述：查找所有 name 以 news 开始的 input 元素HTML 代码:jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute=valuejQue

40、ry 代码:$(inputname=news)结果：,jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute$=valueattribute$=value 返回值:Array(1)概述概述:匹配给定的属性是以某些值结尾的元素(2)参数参数:attribute String 属性名 value(可选)String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。(3)示例示例：例一：描述：查找所有 name 以 letter 结尾的 input 元素HTML 代码:jquery培训教材(P

41、PT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute$=valuejQuery 代码:$(inputname$=letter)结果：,jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute*=valueattribute*=value 返回值:Array(1)概述概述:匹配给定的属性是以包含某些值的元素(2)参数参数:attribute String 属性名 value(可选)String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避

42、免冲突。(3)示例示例：例一：描述：查找所有 name 包含 man 的 input 元素HTML 代码:jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器attribute*=valuejQuery 代码:$(inputname*=man)结果：,jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器 selector1selector2selectorNselector1selector2selectorN 返回值:Array (1)概述概述:复合属性选择器，需要

43、同时满足多个条件时使用。(2)参数参数:selector1 Selector 属性选择器 selector2 Selector 另一个属性选择器，用以进一步缩小范围 selectorN Selector 任意多个属性选择器jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-属性过滤选择器属性过滤选择器 selector1selector2selectorN(3)示例示例：例一：描述：找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的HTML 代码:jQuery 代码:$(inputidname$=man)结果：jquery培训教材(PPT

44、113页)jquery培训教材(PPT113页)过滤选择器-子元素过滤选择器子元素过滤选择器选择器描述返回示例:nth-child(index/even/odd)选取每个父元素下的第index个子元素或奇偶元素组成的集合(index从1起)集合元素$(div.one:nth-child(2)选取所有class为one的下的第2个子元素:first-child选取每个父元素的第一个子元素集合元素$(div.one:first-child)选取所有class为one的下的第1个子元素:last-child选取每个父元素的最后一个子元素集合元素$(div.one:last-child)选取所有cla

45、ss为one的下的最后1个子元素:only-child选取父元素中唯一的子元素集合元素$(div.one:only-child)选取所有class为one的下的唯一子元素jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-子元素过滤选择器子元素过滤选择器 :nth-child:nth-child 返回值:Array (1)概述概述:匹配其父元素下的第N个子或奇偶元素:eq(index)只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:：nth-child(even)、:nth-child(o

46、dd)、:nth-child(3n)、:nth-child(2):nth-child(3n+1)、:nth-child(3n+2)(2)参数参数:index Number 要匹配元素的序号，从1开始(3)示例示例：例一：描述：在每个 ul 查找第 2 个li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.html jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-子元素过滤选择器子元素过滤选择器 :first-child:first-child 返回值:Array (1)概述概述:匹配第一个子元素:first 只匹配一个

47、元素，而此选择符将为每个父元素匹配一个子元素 (2)示例示例：例一：描述：在每个 ul 中查找第一个 li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-子元素过滤选择器子元素过滤选择器 :last-child:last-child 返回值:Array (1)概述概述:匹配最后一个子元素:last只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 (2)示例示例：例一：描述：在每个 ul 中查找最后一个 li,并设置背景颜色为红色。代码见：“jquery例子集

48、合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-子元素过滤选择器子元素过滤选择器 :only-child:only-child 返回值:Array (1)概述概述:如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。(2)示例示例：例一：描述：在 ul 中查找是唯一子元素的 li,并设置背景颜色为红色。代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-表单域对象属性过滤选择

49、器表单域对象属性过滤选择器选择器描述返回示例:enabled选取所有可用元素集合元素$(#form1:enabled)选取id为form1的表单内所有可用元素:disabled选取所有不可用元素集合元素$(#form2:disabled)选取id为form2的表单内所有不可用元素:checked选取所有被选中的元素集合元素$(input:checked)选取所有被选中的元素:selected选取所有被选中的选项元素集合元素$(select:selected)选取所有被选中的选项元素jquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-表单域对象属性过滤选择器表

50、单域对象属性过滤选择器 :enabled:enabled 返回值:Array (1)概述概述:匹配所有可用元素 (2)示例示例：例一：描述：查找所有可用的input元素 代码见：“jquery例子集合”文件夹中的examples.htmljquery培训教材(PPT113页)jquery培训教材(PPT113页)过滤选择器-表单域对象属性过滤选择器表单域对象属性过滤选择器 :disabled:disabled 返回值:Array (1)概述概述:匹配所有不可用元素 (2)示例示例：例一：描述：查找所有不可用的input元素代码见：“jquery例子集合”文件夹中的examples.htmljq