jquery培训教材ppt课件

1、jquery 培训教材罗露第一章 jquery简介 第二章jquery选择器 第三章jquery中的DOM操作 第四章jquery中的事件和动画jQuery 培训教材第一章jQuery 简介JavaScript 库为简化 JavaScript 的开发封装了很多预定义的对象和函数兼容各大阅读器常见的 JavaScript 库PrototypeDojoYUIExt JSMoo ToolsjQuery认识 jQueryjQuery 是一个 JavaScript 库jQuery 极大地简化了 JavaScript 编程jQuery 很容易学习jQuery 的理念：写得更少，做得更多write less

2、, do morejQuery 有优势不污染顶级变量出色的阅读器兼容性链式操作方式隐式迭代行为层与构造层分别跟丰富的插件支持完善的文档开源轻量级强大的选择器出色的 DOM 操作可靠的事件处置机制完善的 Ajax进入 jQuery 世界获得 jQuery 库jqueryjQuery 库位于一个 JavaScript 文件中，其中包含了一切的 jQuery 函数。jquery-版本号.js无紧缩版, 用于测试、学习jquery-版本号.min.js紧缩版, 用于产品、工程)配置：无需安装，只需有库文件即可(库的替代：见备注)网页中引入 jQuery 库：留意： 标签应该位于页面的 部分。在 HTM

3、L5 中，不用在 标签中运用type=text/javascript 。JavaScript 是 HTML5 以及一切现代阅读器中的默许脚步言语！jQuery 根底语法根底语法是：$(selector).action()美圆符号定义 jQuery 又称工厂函数选择器selector“查询和“查找 HTML 元素 action() 执行对元素的操作例如$(this).hide() / 隐藏当前元素$(p).hide() / 隐藏一切段落$(p.test).hide() / 隐藏一切 class=test 的段落$(#test).hide() / 隐藏第 id=test 的元素jQuery 代码风

4、格链式操作风格对于同一对象不超越3个操作，可直接写一行对同一对象的操作较多，建议每行写一个操作添加必要的注释$(has_children).click(function()$(this).addClass(highLight).children(a).show().end().siblings().removeClass(highLight).children(a).hide(););文档就绪函数 $(document).ready()：类似 window.onload定义文档加载完后执行的函数$(document).ready(function()alert(Hello World!););

5、这是为了防止文档在完全加载就绪之前运转 jQuery 代码。假设在文档没有完全加载之前就运转函数，操作能够失败。例如：试图隐藏一个不存在的元素 获得未完全加载的图像的大小文档就绪函数 window.onload 与 $(document).ready() 的对比window.onload$(document).ready()执行时机必须等网页中所有内容加载完后（包括图片）才能执行网页中所有DOM结构绘制完后就执行编写个数不能编写多个window.onload=function();window.onload=function();此时第二个覆盖第一个能同时编写多个$(document).rea

6、dy(function(); $(document).ready(function();两个函数都执行简化写法无$( )jQuery 对象与 DOM 对象DOM 对象：HTML的文档对象模型中的元素对象。可经过 javascript 的以下方法获取jQuery 对象：经jQuery包装后的DOM对象两者拥有的方法不同document.getElementById(test)document.getElementsByTagName(p)$(#test)$(p)jQuery 对象与 DOM 对象相互转换jQuery 对象转成 DOM 对象DOM 对象转成 jQuery 对象var $test =

7、 $(#test);var test = $test0; /jQuery对象是一个数组，可经过索引得到DOM对象或var test = $test.get(0);/用jQuery提供的get(index)方法得到DOM对象var test = document.getElementById(test);var $test = $(test); /用jQuery的工厂方法处理 jQuery 与其它库的冲突jQuery 在其它库之后导入jQuery.noConflict(); 让出$运用权然后用 jQuery 而不用 $jQuery 在其它库之前导入直接用 jQuery 而不用 $，同时，可以运用

8、$()方法作为其它库的快捷方式概略见备注。jQuery 开发工具和插件Dreamweaver为了使 Dreamweaver 支持自动提示需求到httpxtnd.us/dreamweaver/jquery 下载一个插件：jQuery_API.mxp如有需求见：“jquery例子集合文件夹中jQuery_API.mxp在DW中选择 “命令-“扩展管理-“安装扩展EclipsejQueryWTP 插件langtags/jquerywtp 下载Spket 插件：spket 下载jQuery 开发工具和插件AptanaVisual Studio 2021已包含jquery-1.4.1jQuery 培训教

9、材第二章jQuery 选择器什么是 jQuery 选择器方便找出文档中的 DOM 元素可对找出的元素添加相应行为兼容各种阅读器jQuery 选择器的优点写法简约$(#ID)、 $(.class) 、 $(TagName)支持 CSS1CSS3 选择器无需思索特定阅读器能否支持完善的处置机制元素不存在不会出错留意：判别元素能否存在，要判别jQuery 对象的长度能否0，或者转换成 DOM 对象来判别/不能用下面方式判别元素能否存在if($(#test)/可用以下两种方式判别元素能否存在if($(#test).length 0)或if($(#test)0)/javascript 代码，元素不存在会

10、出错document.getElementById(test).style.color=red;/jQuery 代码，元素不存在不出错$(#test).css(color,red);jQuery 选择器的类型根本选择器层次选择器过滤选择器根本过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器表单域对象属性过滤选择器表单项选择择器根本选择器选择器描述返回示例#id根据给定id匹配一个元素单个元素$(#t) 选取id为t的元素.class根据给定类名匹配元素集合元素$(.t) 选取所有class为t的元素element根据给定元素名匹配元素集合元素$(p) 选取所有元素*匹配所

11、有元素集合元素$(*) 选取所有元素selector1, selector2, selector3 ,将每个选择器匹配到的元素合并后一起返回集合元素$(div, span, p.myclass) 选取所有, 和拥有class为myclass的标签的一组元素根本选择器 #id#id 前往值:Array(1)概述:根据给定的ID匹配一个元素。假设选择器中包含特殊字符，可以用两个斜杠本义。参见例如。(2)参数：id String用于搜索的，经过元素的 id 属性中给定的值(3)例如：例一：描画：查找含有特殊字符id=“runbutton的元素。 代码见：“jquery例子集合文件夹中的example

12、s.html根本选择器 .class.class 前往值:Array(1)概述:根据给定的类匹配元素。(2)参数：class String一个用以搜索的类。一个元素可以有多个类，只需有一个符合就能被匹配到。(3)例如：例一：描画：选取class=“font的元素。 代码见：“jquery例子集合文件夹中的examples.html根本选择器 elementelement 前往值:Array(1)概述:根据给定的元素名匹配一切元素(2)参数：element String一个用于搜索的元素。指向 DOM 节点的标签名。(3)例如：例一：描画：查找一个 p 元素。代码见：“jquery例子集合文件夹

13、中的examples.html根本选择器 * 前往值:Array(1)概述:匹配一切元素多用于结合上下文来搜索。(2)例如：例一：描画：找到form下的每一个元素，并设置字体款式。代码见：“jquery例子集合文件夹中的examples.html根本选择器 selector1,selector2,selectorNselector1、selector2、selectorN 前往值:Array (1)概述:将每一个选择器匹配到的元素合并后一同前往。他可以指定恣意多个选择器，并将匹配到的元素合并到一个结果内。(2)参数：selector1 Selector 一个有效的选择器 selector2 S

14、elector 另一个有效的选择器 selectorN(可选) Selector 恣意多个有效选择器(3)例如：例一：描画：找到匹配恣意一个类的元素，并设置字体颜色为红色代码见：“jquery例子集合文件夹中的examples.html层次选择器选择器描述返回示例$(ancestor descendant)选取ancesdor元素里的所有descendant(后代)元素集合元素$(div span) 选取里所有的元素$(parent child)选取parent元素下的直接child元素，而不是所有后代元素集合元素$(div span)选取下子元素$(prev + next)选取紧接在prev

15、元素后的next元素集合元素$(.one + div) 选取class为one的下一个兄弟元素$(prev siblings)选取prev元素之后的所有siblings元素集合元素$(#two div) 选取id为two元素后面的所有兄弟元素后两种选择器较少用由于jQuery中有更简单的方法替代：next() 替代 $(prev + next)nextAll() 替代 $(prev siblings)层次选择器 ancestor descendantancestor descendant 前往值:Array(1)概述:在给定的祖先元素下匹配一切的后代元素(2)参数：ancestor Selec

16、tor 任何有效选择器 descendant Selector 用以匹配元素的选择器，并且它是第一个选择器的后代元素(3)例如：例一：描画：找到form下的每一个元素，并设置字体款式。代码见：“jquery例子集合文件夹中的examples.html层次选择器 parent childparent child 前往值:Array(1)概述:在给定的父元素下匹配一切的子元素(2)参数：parent Selector 任何有效选择器 child Selector 用以匹配元素的选择器，并且它是第一个选择器的子元素(3)例如：例一：描画：匹配表单中一切的子级label元素，并设置字体颜色为红色。代码

17、见：“jquery例子集合文件夹中的examples.html层次选择器 prev + nextpre + next 前往值:Array(1)概述:匹配一切紧接在 prev 元素后的 next 元素(2)参数：pre Selector 任何有效选择器 next Selector 一个有效选择器并且紧接着第一个选择器(3)例如：例一：描画：匹配一切跟在 label 后面的 input 元素，并设置边框为蓝色。代码见：“jquery例子集合文件夹中的examples.html层次选择器 prev siblingsprevsiblings 前往值:Array(1)概述:匹配 prev 元素之后的一切

18、 siblings 元素(2)参数：prev Selector 任何有效选择器 siblings Selector 一个选择器，并且它作为第一个选择器的同辈(3)例如：例一：描画：找到一切与表单同辈的 input 元素，并设置边框为红色。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器选择器描述返回示例:first选取第一个元素单个元素$(div:first) 选取中第一个:last选取最后一个元素单个元素$(div:first) 选取中最后个:not(select)去除与选择器匹配的元素集合元素$(input:not(.myClass):eve

19、n选取索引是偶数的元素集合元素$(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) 选所有.:animated当前正执行动画的元素集合元素$(div:animited) 选取所有正在执行动画的过滤选择器 - 根本过滤选择器 :firstfirst()/:first 前往值

20、:jQuery(1)概述:获取第一个元素(2)例如：例一：描画：获取第一个th元素，并设置背风光为红色。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :lastlast()/:last() 前往值:jQuery(1)概述:获取最后个元素(2)例如：例一：描画：获取最后一个th元素，并设置背风光为红色。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :not(select):not(selector) 前往值:Array(1)概述:去除一切与给定选择器匹配的元素在jQuery 1.3中，曾经支持

21、复杂选择器了例如:not(div a) 和 :not(div,a)(2)参数: selector Selector 用于挑选的选择器(3)例如：例一：描画：只需对不在执行动画效果的元素执行一个动画特效 代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :even:even 前往值:Array(1)概述:匹配一切索引值为偶数的元素，从 0 开场计数(2)例如：例一：描画：表格中偶数行高亮显示。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :odd:odd 前往值:Array(1)概述:匹配一切索引

22、值为奇数的元素，从 0 开场计数(2)例如：例一：描画：表中奇数行不高亮显示。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :eq(index):eq(index) 前往值:Array(1)概述:匹配一个给定索引值的元素(2)参数: index Number 从 0 开场计数(3)例如：例一：描画：在表格中查找第二个th。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :gt(index):gt(index) 前往值:Array(1)概述:匹配一切大于给定索引值的元素(2)参数: index

23、Number 从 0 开场计数(3)例如：例一：描画：在表格中查找索引值大于21的td。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :lt(index):lt(index) 前往值:Array(1)概述:匹配一切大于给定索引值的元素(2)参数: index Number 从 0 开场计数(3)例如：例一：描画：在表格中查找索引值小于2的td。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :header:header 前往值:Array(1)概述:匹配如 h1, h2, h3之类的标题元素(

24、2)例如：例一：描画：给页面内一切标题加上背风光。代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 根本过滤选择器 :animated:animated 前往值:Array(1)概述:匹配一切正在执行动画效果的元素(2)例如：例一：描画：只需对不在执行动画效果的元素执行一个动画特效 代码见：“jquery例子集合文件夹中的examples.html过滤选择器 - 内容过滤选择器选择器描述返回示例:contains(text)选取含有文本内容的元素集合元素$(div:contains(好的):empty选取不包含子元素和文本的空元素集合元素$(div:empty)

25、:has(select)选取含有选择器所匹配元素的元素集合元素$(div:has(p):parent选取含有子元素或文本的元素集合元素$(div:parent)过滤选择器-内容过滤选择器 :contains(text):contains(text) 前往值:Array(1)概述:匹配包含给定文本的元素(2)例如：例一：描画：查找一切包含 123 的 td 元素。代码见：“jquery例子集合文件夹中的examples.html过滤选择器-内容过滤选择器 :empty:empty 前往值:Array(1)概述:匹配一切不包含子元素或者文本的空元素(2)例如：例一：描画：查找一切不包含子元素或者文

26、本的空元素。代码见：“jquery例子集合文件夹中的examples.html过滤选择器-内容过滤选择器 :has(selector):has(selector) 前往值:Array(1)概述:匹配含有选择器所匹配的元素的元素(2)参数: selector Selector 一个用于挑选的选择器(3)例如：例一：描画：给一切包含 a 元素的 div 元素设置div中的字体颜色为红色。 代码见：“jquery例子集合文件夹中的examples.html过滤选择器-内容过滤选择器 :parent:parent 前往值:Array(1)概述:查找一切含有子元素或者文本的 td 元素(2)例如：例一：

27、描画：查找一切含有子元素或者文本的 td 元素HTML 代码: Value 1 Value 2jQuery 代码:$(td:parent)结果： Value 1, Value 2 过滤选择器 - 可见性过滤选择器选择器描述返回示例:hidden选取所有不可见的元素集合元素$(:hidden) 选取所有不可见的元素。包括 , 和 等元素。如果只想选取元素，可以使用$(input:hidden):visible选取所有可见的元素集合元素$(“div:visible”) 选取所有可见的 元素过滤选择器-可见性过滤选择器 :hidden:hidden 前往值:Array(1)概述:匹配一切不可见元素，

28、或者type为hidden的元素(2)例如：例一：描画：查找隐藏的 trHTML 代码: Value 1 Value 2jQuery 代码:$(tr:hidden)结果：Value 1过滤选择器-可见性过滤选择器 :hidden例二：描画：匹配type为hidden的元素HTML 代码: jQuery 代码:$(input:hidden)结果： 过滤选择器-可见性过滤选择器 :visible:visible 前往值:Array(1)概述:匹配一切的可见元素(2)例如：例一：描画：查找一切可见的 tr 元素HTML 代码: Value 1 Value 2jQuery 代码:$(tr:visibl

29、e)结果：Value 2过滤选择器 - 属性过滤选择器选择器描述返回示例attribute选取拥有此属性的元素集合元素$(divid) 选取有id属性的元素attribute=value选取属性值为value的元素集合元素$(divtitle=test)attribute!=value选取属性值不等于value的元素集合元素$(divtitle!=test)attribute=value选取属性值以value开头的元素集合元素$(divtitle=test)attribute$=value选取属性值以value结尾的元素集合元素$(divtitle$=test)attribute*=value

30、选取属性值包含value的元素集合元素$(divtitle*=test)selector1selector2selector3多个属性选择器组成复合选择器集合元素$(dividtitle$=st)过滤选择器-属性过滤选择器 attributeattribute 前往值:Array(1)概述:匹配包含给定属性的元素。留意，在jQuery 1.3中，前导的符号曾经被废除！假设想要兼容最新版本，只需求简单去掉符号即可。(2)参数: attribute String 属性名(3)例如：例一：描画：查找一切 name 属性是 none2 的 input 元素，并设置边框为绿色。 代码见：“jquery例

31、子集合文件夹中的examples.html过滤选择器-属性过滤选择器 attribute=valueattribute=value 前往值:Array(1)概述:匹配给定的属性是某个特定值的元素(2)参数: attribute String 属性名 value (可选) String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以防止冲突。(3)例如：例一：描画：查找一切 name 属性是 none2 的 input 元素，并设置边框为绿色。 代码见：“jquery例子集合文件夹中的examples.html过滤选择器-属性过滤选择器attribute!=valueattr

32、ibute!=value 前往值:Array(1)概述:匹配一切不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not(attr=value)要匹配含有特定属性但不等于特定值的元素，请运用attr:not(attr=value)(2)参数: attribute String 属性名 value (可选) String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以防止冲突。(3)例如：例一：描画：查找一切 name 属性不是 online 的 input 元素代码见：“jquery例子集合文件夹中的examples.html过滤选择器-属性过滤选择器attri

33、bute=valueattribute=value 前往值:Array(1)概述:匹配给定的属性是以某些值开场的元素(2)参数: attribute String 属性名 value (可选) String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以防止冲突。(3)例如：例一：描画：查找一切 name 以 news 开场的 input 元素HTML 代码:过滤选择器-属性过滤选择器attribute=valuejQuery 代码: $(inputname=news)结果： , 过滤选择器-属性过滤选择器attribute$=valueattribute$=value 前

34、往值:Array(1)概述:匹配给定的属性是以某些值结尾的元素(2)参数: attribute String 属性名 value (可选) String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以防止冲突。(3)例如：例一：描画：查找一切 name 以 letter 结尾的 input 元素HTML 代码:过滤选择器-属性过滤选择器attribute$=valuejQuery 代码:$(inputname$=letter)结果： ,过滤选择器-属性过滤选择器attribute*=valueattribute*=value 前往值:Array(1)概述:匹配给定的属性是以

35、包含某些值的元素(2)参数: attribute String 属性名 value (可选) String 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以防止冲突。(3)例如：例一：描画：查找一切 name 包含 man 的 input 元素HTML 代码:过滤选择器-属性过滤选择器attribute*=valuejQuery 代码:$(inputname*=man)结果： , , 过滤选择器-属性过滤选择器 selector1selector2selectorNselector1selector2selectorN 前往值:Array (1)概述:复合属性选择器，需求同时

36、满足多个条件时运用。(2)参数: selector1 Selector 属性选择器 selector2 Selector 另一个属性选择器，用以进一步减少范围 selectorN Selector 恣意多个属性选择器过滤选择器-属性过滤选择器 selector1selector2selectorN(3)例如：例一：描画：找到一切含有 id 属性，并且它的 name 属性是以 man 结尾的HTML 代码:jQuery 代码:$(inputidname$=man)结果：过滤选择器 - 子元素过滤选择器选择器描述返回示例:nth-child (index/even/odd)选取每个父元素下的第in

37、dex个子元素或奇偶元素组成的集合(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) 选取所有class为one的下的最后1个子元素:only-child选取父元素中唯一的子元素集合元素$(div.one :only-child) 选取所有class为one的下的唯一子元素

38、过滤选择器-子元素过滤选择器 :nth-child:nth-child 前往值:Array (1)概述:匹配其父元素下的第N个子或奇偶元素:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开场的，而:eq()是从0算起的！可以运用:：nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(2):nth-child(3n+1)、:nth-child(3n+2)(2)参数: index Number 要匹配元素的序号，从1开场(3)例如：例一：描画：在每个 ul 查找第 2 个li,并设置背景

39、颜色为红色。 代码见：“jquery例子集合文件夹中的examples.html 过滤选择器-子元素过滤选择器 :first-child:first-child 前往值:Array (1)概述:匹配第一个子元素:first 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 (2)例如：例一：描画：在每个 ul 中查找第一个 li,并设置背景颜色为红色。 代码见：“jquery例子集合文件夹中的examples.html过滤选择器-子元素过滤选择器 :last-child:last-child 前往值:Array (1)概述:匹配最后一个子元素:last只匹配一个元素，而此选择符将为每个父

40、元素匹配一个子元素 (2)例如：例一：描画：在每个 ul 中查找最后一个 li,并设置背景颜色为红色。 代码见：“jquery例子集合文件夹中的examples.html过滤选择器-子元素过滤选择器 :only-child:only-child 前往值:Array (1)概述:假设某个元素是父元素中独一的子元素，那将会被匹配假设父元素中含有其他元素，那将不会被匹配。 (2)例如：例一：描画：在 ul 中查找是独一子元素的 li,并设置背景颜色为红色。 代码见：“jquery例子集合文件夹中的examples.html过滤选择器 -表单域对象属性过滤选择器选择器描述返回示例:enabled选取所

41、有可用元素集合元素$(#form1 :enabled) 选取id为form1的表单内所有可用元素:disabled选取所有不可用元素集合元素$(#form2 :disabled) 选取id为form2的表单内所有不可用元素:checked选取所有被选中的元素集合元素$(input:checked) 选取所有被选中的元素:selected选取所有被选中的选项元素集合元素$(select :selected) 选取所有被选中的选项元素过滤选择器-表单域对象属性过滤选择器 :enabled:enabled 前往值:Array (1)概述:匹配一切可用元素 (2)例如：例一：描画：查找一切可用的inp

42、ut元素 代码见：“jquery例子集合文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器 :disabled:disabled 前往值:Array (1)概述:匹配一切不可用元素 (2)例如：例一：描画：查找一切不可用的input元素代码见：“jquery例子集合文件夹中的examples.html过滤选择器-表单域对象属性过滤选择器 :checked:checked 前往值:Array (1)概述:匹配一切选中的被选中元素(复选框、单项选择框等，不包括select中的option) (2)例如：例一：描画：查找一切选中的复选框元素代码见：“jquery例子集合文件夹中

43、的examples.html过滤选择器-表单域对象属性过滤选择器 :selected:selected 前往值:Array (1)概述:匹配一切选中的option元素 (2)例如：例一：描画：查找一切选中的选项元素代码见：“jquery例子集合文件夹中的examples.html表单项选择择器选择器描述返回示例:input选取所有表单元素（ ）集合元素$(:input):text选取所有单行文本框集合元素$(:text):password选取所有密码框集合元素$(:password):radio选取所有单选按钮集合元素$(:radio):checkbox选取所有复选框集合元素$(:checkb

44、ox):submit选取所有提交按钮集合元素$(:submit):image选取所有图像按钮集合元素$(:image):reset选取所有重置按钮集合元素$(:reset):button选取所有按钮集合元素$(:button):hidden选取所有隐藏域集合元素$(:hidden):file选取所有文件域集合元素$(:file)表单项选择择器 :input:input 前往值:Array (1)概述:匹配一切 input, textarea, select 和 button 元素(2)例如：例一：描画：查找一切的input，textarea, select 和 button 元素，并设置背风光

45、为淡蓝色。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :text:text 前往值:Array (1)概述:匹配一切的单行文本框(2)例如：例一：描画：查找id=“form的表单下的一切文本框，并设置边框为紫色。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :password:password 前往值:Array (1)概述:匹配一切密码框(2)例如：例一：描画：查找id=“form的表单下的一切密码框，并设置边框为黄色。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :radio

46、:radio 前往值:Array (1)概述:匹配一切单项选择按钮(2)例如：例一：描画：查找id=“form的表单下的一切单项选择按钮，并设置size=“20。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :checkbox:checkbox 前往值:Array (1)概述:匹配一切复选框(2)例如：例一：描画：查找id=“form的表单下的一切复选框，并设置size=“20。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :submit:submit 前往值:Array (1)概述:匹配一切提交按钮(2)例如：例一：

47、描画：查找id=“form的表单下的一切提交按钮。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :image:image 前往值:Array (1)概述:匹配一切图像域(2)例如：例一：描画：匹配id=“form的表单下的一切图像域。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :reset:reset 前往值:Array (1)概述:匹配一切重置按钮(2)例如：例一：描画：查找id=“form的表单下的一切重置按钮。 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :button:b

48、utton 前往值:Array (1)概述:匹配一切按钮(2)例如：例一：描画：查找id=“form的表单下的一切按钮. 代码见：“jquery例子集合文件夹中的examples.html表单项选择择器 :hidden:hidden 前往值:Array (1)概述:匹配一切不可见元素，或者type为hidden的元素(2)例如：例一：描画：查找隐藏的 trHTML 代码: Value 1 Value 2jQuery 代码:$(tr:hidden)结果：Value 1表单项选择择器 :hidden例二：描画：匹配type为hidden的元素HTML 代码: jQuery 代码:$(input:h

49、idden)结果：表单项选择择器 :file:file 前往值:Array (1)概述:匹配一切文件域(2)例如：例一：描画：查找id=“form的表单下的一切文件域 代码见：“jquery例子集合文件夹中的examples.htmljQuery 培训教材第三章jQuery 中的DOM操作jQuery DOM操作节点操作(文档处置)查找创建插入删除复制交换包裹遍历jQuery DOM操作属性操作属性CSS类(款式操作)HTML文本值CSS DOM操作DOM 操作分类DOM Core中心任何一种支持DOM的言语都可运用它可用来处置任何一种标志言语文档getElementById(), getEl

50、ementsByTagNamegetAttribute(), setAttribute()等HTML-DOM仅用来处置HTML文档，处置HTML更方便CSS-DOM针对CSS的操作/DOM Coredocument.getElementsByTagName(form);element.getAttribute(src);/HTML-DOMdocument.formselement.src/CSS-DOMelement.style.color = red;jQuery 中的DOM操作 - 节点操作查找节点运用选择器查找节点var $li = $(.nm_ul li:eq(1);/ 获取第二个元素

51、节点var li_txt = $li.text();/ 输出第二个元素节点的text创建节点var $li_1 = $();var $li_1 = $(文本);var $li_1 = $(文本);jQuery 中的DOM操作 - 节点操作插入节点 例如：见：“jquery例子集合文件夹中的examples.html方法描述append()向每个匹配的元素内部追加内容appendTo()将所有匹配的元素追加到指定的元素中prepend()向每个匹配的元素内部前置内容prependTo()将所胡匹配的元素前置到指定的元素中after()在每个匹配的元素之后插入内容insertAfter()将所有匹

52、配的元素插入到指定元素的后面before()在每个匹配的元素之前插入内容insertBefore()将所有匹配的元素插入到指定元素的前面jQuery 中的DOM操作 - 节点操作删除节点remove()：删除一切匹配的元素$(ul li:eq(1).remove();empty()：清空一切匹配元素的子节点复制节点$(this).clone().appendTo(body);$(this).clone(true).appendTo(“body);参数 true 表示绑定事件例如：见：“jquery例子集合文件夹中的examples.htmljQuery 中的DOM操作 - 节点操作交换节点re

53、placeWith()$(p).replaceWith(haha);replaceAll()$(haha).replaceAll(p);交换后原来元素的事件也消逝jQuery 中的DOM操作 - 节点操作包裹节点wrap(): 将一切匹配元素单独包裹起来$(p).wrap();wrapAll(): 将一切匹配元素一同包裹起来$(p).wrapAll();wrapInner(): 将一切匹配元素的子内容包裹起来$(p).wrapInner();例如：见：“jquery例子集合文件夹中的wrap.html和wrapInner.htmljQuery 中的DOM操作 - 节点操作遍历节点方法描述chi

54、ldren()取得匹配元素的子元素集合next()取得匹配元素后面紧邻的同辈元素prev()取得匹配元素前面紧邻的同辈元素siblings()取得匹配元素前后所有的同辈元素closest()取得最先匹配元素（首先检查当前元素）jQuery 中的DOM操作 - 属性操作属性操作获取属性的值var p_tl = $(p).attr(title);设置单个属性的值$(p).attr(title, haha);同时设置多个属性$(p).attr(title:haha, name:p1);删除属性$(p).removeAttr(title);jQuery 中的DOM操作 - CSS类(款式操作)款式操作

55、获取款式var style = $(p).attr(class);设置款式$(p).attr(class, highlight);追加款式$(p).addClass(thin);移除款式$(p).removeClass(highlight);jQuery 中的DOM操作 - CSS类(款式操作)款式操作切换款式$(p).toggleClass(test);在添加和移除款式test间切换判别能否含有某个款式if ($(p).hasClass(highlight) 例如：见：“jquery例子集合文件夹中的examples.htmljQuery 中的DOM操作 - HTML、文本和值的操作设置和获

56、取 HTML、文本和值html()方法：类似 innerHTML text()方法：类似 innerTextval()方法：类似于 valuejQuery 中的DOM操作 - CSS-DOM操作CSS-DOM 操作获取 CSS 款式属性的值var color = $(p).css(color);设置 CSS 款式属性的值$(p).css(color, red);$(p).css(color:red, fontSize:30px);获取和设置元素的宽高height()、width()jQuery 中的DOM操作 - CSS-DOM操作CSS-DOM 操作offset() 方法：获取元素在当前视窗的相对偏移position() 方法：获取元素相对于最近一个position 为 relative或absolute的父节点的相对偏移scrollTop() 方法和 scorllLeft() 方法获取和设置元素滚动的上边距和左边距例如：见：“jquery例子集合文件夹中的css-dom位置操作jQuery 培训教材第四章jQuery 中的事件和动画为加载页面绑定事件处置window.onload 与 $(document).ready()的区别前面曾经引见假设希望 jQuery 也在加载完一切页面内容后再执行代码的话，可以用：$(window).load(func