第3章： jQuery基本语法、选择器

1、jQuery第三章：第三章： 基本语法、选择器基本语法、选择器目录目录ljQuery的基本语法的基本语法ljQuery对象与对象与DOM对象的相互转换对象的相互转换l使用使用jQuery实现简单特效实现简单特效l选择器选择器基本选择器基本选择器层次选择器层次选择器属性选择器属性选择器基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器jQuery简介简介ljQuery由美国人由美国人John Resig于于2006年创建年创建ljQuery是目前最流行的是目前最流行的JavaScript程序库，它是对程序库，它是对JavaScript对象和函数的封装对象和函数的封装jQuery能做什么

2、能做什么l访问和操作访问和操作DOM元素元素l控制页面样式控制页面样式l对页面事件进行处理对页面事件进行处理l扩展新的扩展新的jQuery插件插件l与与Ajax技术完美结合技术完美结合jQuery的优势的优势l体积小，压缩后只有体积小，压缩后只有100KB左右左右l强大的选择器强大的选择器l出色的出色的DOM封装封装l可靠的事件处理机制可靠的事件处理机制l出色的浏览器兼容性出色的浏览器兼容性l使用隐式迭代简化编程使用隐式迭代简化编程l丰富的插件支持丰富的插件支持jQuery库文件库文件ljQuery库分开发版和发布版库分开发版和发布版l在页面中引入在页面中引入jQuery名称名称大小大小说说

3、明明jquery-1.版本号版本号.js（开发版）（开发版）约约268KB完整无压缩版本，主要用于完整无压缩版本，主要用于测试、学习和开发测试、学习和开发jquery-1.版本版本号号.min.js（发布版）（发布版）约约91KB经过工具压缩或经过服务器经过工具压缩或经过服务器开启开启Gzip压缩，主要应用于压缩，主要应用于发布的产品和项目发布的产品和项目jQuery基本语法基本语法l使用使用jQuery弹出提示框弹出提示框l$(document).ready()与与window.onload的区别的区别 $(document).ready(function() alert(我欲奔赴沙场征战我

4、欲奔赴沙场征战jQuery，势必攻克之！，势必攻克之！); );为页面加载事件绑定方法为页面加载事件绑定方法 window.onload$(document).ready()执行时机执行时机必须等待网页中所有的内容加载必须等待网页中所有的内容加载完毕后（包括图片、完毕后（包括图片、flash、视、视频等）才能执行频等）才能执行网页中所有网页中所有DOM文档结构绘制完文档结构绘制完毕后即刻执行，可能与毕后即刻执行，可能与DOM元素元素关联的内容（图片、关联的内容（图片、flash、视频、视频等）并没有加载完等）并没有加载完编写个数编写个数同一页面不能同时编写多个同一页面不能同时编写多个同一页面能

5、同时编写多个同一页面能同时编写多个DOM模型模型l浏览器浏览器把把HTML文档的元素转换成节点对象，所有节点组文档的元素转换成节点对象，所有节点组成了一个树状成了一个树状结构结构以对象描述文档的方式就是以对象描述文档的方式就是DOM节点对象就被称为节点对象就被称为DOM对象对象节点类型节点类型l元素节点：文档中的所有元素元素节点：文档中的所有元素 l文本节点：元素节点内的文本内容文本节点：元素节点内的文本内容你最喜欢的食品是？你最喜欢的食品是？ l属性节点：元素节点的子节点属性节点：元素节点的子节点 DOM对象和对象和jQuery对象对象lDOM对象：直接使用对象：直接使用JavaScript

6、获取的节点对象获取的节点对象l jQuery对象：使用对象：使用jQuery包装包装DOM对象后产生的对象，对象后产生的对象，它能够使用它能够使用jQuery中的方法中的方法var objDOM=document.getElementById(title); var objHTML=objDOM.innerHTML; $(#title).html( );等同于等同于document.getElementById(title).innerHTML; jQuery语法结构语法结构l语法语法工厂函数工厂函数$()：将：将DOM对象转化为对象转化为jQuery对象对象选择器选择器 selector：获

7、取需要操作的：获取需要操作的DOM 元素元素方法方法action()：jQuery中提供的方法，其中包括绑定事件处理的方中提供的方法，其中包括绑定事件处理的方法法l“$”等同于等同于“ jQuery ”$(selector).action() ; $(document).ready()=jQuery(document).ready()$(function().)=jQuery(function().) jQuery语法结构语法结构-示例示例lilist-style: none; line-height: 22px; cursor: pointer;.currentbackground: #6c

8、f; font-weight: bold; color: #fff;$(document).ready(function()$(li).click(function()$(#current).addClass(current);););jQuery简介简介jQuery语法语法为元素添加类样式为元素添加类样式常用语法举例常用语法举例lcss(属性属性,属性值属性值) 为元素设置为元素设置CSS样式的值样式的值laddClass()为元素添加类样式为元素添加类样式lnext()获得元素其后紧邻的同辈元素获得元素其后紧邻的同辈元素$(document).ready(function() $(h2).

9、click(function() $(h2).css(background- color,#CCFFFF).next().css(display,block););); 什么是受益人什么是受益人?解答：解答：受益人是指人身保险中由被保险人或者受益人是指人身保险中由被保险人或者 .练习练习-制作帮助中心问答特效制作帮助中心问答特效l需求说明需求说明点击标题后，显示回答的内容，同时标题加上背景色点击标题后，显示回答的内容，同时标题加上背景色DOM对象转对象转jQuery对象对象l使用使用$()函数进行转化：函数进行转化：$(DOM对象对象)l注意注意var txtName =document.ge

10、tElementById(txtName); /DOM对象对象var $txtName =$(txtName); /jQuery对象对象jQuery对象命名一般约定以对象命名一般约定以$开头开头在事件中经常使用在事件中经常使用$(this)，this是触发该事件的对象是触发该事件的对象jQuery对象转对象转DOM对象对象ljQuery对象是一个类似数组的对象，可以通过对象是一个类似数组的对象，可以通过index的方的方法得到相应的法得到相应的DOM对象对象l通过通过get(index)方法得到相应的方法得到相应的DOM对象对象var $txtName =$ (#txtName); /jQue

11、ry对象对象var txtName =$txtName0; /DOM对象对象var $txtName =$(#txtName); /jQuery对象对象var txtName =$txtName.get(0); /DOM对象对象$(document).ready(function() var h1 = document.getElementById(title);var $h1 = $(h1);$h1.click(function()alert(非常满意非常满意);););. .请为我们的服务做出评价请为我们的服务做出评价jQuery选择器选择器ljQuery选择器类似于选择器类似于CSS选择

12、器，用来选取网页中的元素选择器，用来选取网页中的元素获取获取并设置网页中所有并设置网页中所有元素的背景元素的背景“h3”为选择器语法，必须放在为选择器语法，必须放在$()中中$(“h3”)返回返回jQuery对象对象css()是为是为jQuery对象设置样式的方法对象设置样式的方法$(h3).css(background,#09F);jQuery选择器分类选择器分类ljQuery选择器功能强大，分类如下选择器功能强大，分类如下类类CSS选择器选择器基本选择器基本选择器层次选择器层次选择器属性选择器属性选择器过滤选择器过滤选择器基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器基本选择

13、器基本选择器l基本选择器基本选择器标签标签选择器、类选择器、选择器、类选择器、ID选择器、并集选择器、交集选择器和全选择器、并集选择器、交集选择器和全局选择器局选择器名称名称语法构成语法构成描述描述示例示例标签选择器标签选择器element根据给定的标签名匹配根据给定的标签名匹配元素元素$(h2 )选取所有选取所有h2元元素素类选择器类选择器.class根据给定的根据给定的class匹配匹配元素元素$( .title)选取所有选取所有class为为title的元素的元素ID选择器选择器#id根据给定的根据给定的id匹配元素匹配元素$( #title)选取选取id为为title的元素的元素并集选

14、择器并集选择器selector1,selector2,.,selectorN将每一个选择器匹配的将每一个选择器匹配的元素合并后一起返回元素合并后一起返回$(div,p,.title )选取所选取所有有div、p和拥有和拥有class为为title的元素的元素交集选择器交集选择器element.class或或element#id匹配指定匹配指定class或或id的某的某元素或元素集合元素或元素集合$(h2.title)选取所有拥选取所有拥有有class为为title的的h2元元素素全局选择器全局选择器*匹配所有元素匹配所有元素$(* )选取所有元素选取所有元素基本选择器基本选择器 id为为box

15、的的div class为为title的的h2 class为为title的的h3 热门排行热门排行 斗地主斗地主 休闲游戏休闲游戏 QQ斗地主是国内同时在线人斗地主是国内同时在线人. $(function() $(h2).click(function() $(h3).css(background-color,#09F); /$(.title).css(background,#09F);/$(#box).css(background,#09F);/$(h2,dt,.title).css(background,#09F); /并集选择器并集选择器/$(h3.title).css(background

16、,#09F); /交集选择器交集选择器/$(*).css(color,red); /全局选择器全局选择器 ););所有所有classclass为为titletitle的的 h3元素元素层次选择器层次选择器l层次选择器通过层次选择器通过DOM 元素之间的层次关系来获取元素元素之间的层次关系来获取元素名称名称语法构成语法构成描述描述示例示例后代选择器后代选择器ancestor descendant选取选取ancestor元素里的元素里的所有所有descendant（后（后代）元素代）元素$(#menu span )选取选取#menu下的下的元元素素子选择器子选择器parentchild选取选取pa

17、rent元素下的元素下的child（子）元素（子）元素$( #menuspan )选选取取#menu的子元素的子元素相邻元素选相邻元素选择器择器prev+next选取紧邻选取紧邻prev元素之后元素之后的的next元素元素$( h2+dl )选取紧邻选取紧邻元素之后的同辈元元素之后的同辈元素素同辈元素选同辈元素选择器择器prevsibings选取选取prev元素之后的所元素之后的所有有siblings元素元素$( h2dl )选取选取元素之后所有的同辈元元素之后所有的同辈元素素层次选择器层次选择器 全部旅游产品分类全部旅游产品分类 北京周边旅游北京周边旅游特价特价 按天数按天数 海边旅游海边旅

18、游 草原草原 景点门票景点门票 名胜名胜 暑期暑期 乐园乐园 山水山水 双休双休 更多分类更多分类l样式与样式与jQuery代码代码层次选择器层次选择器* margin:0; padding:0; line-height:30px;#menu border:2px solid #03C; padding:10px;a text-decoration:none; margin-right:5px;span font-weight:bold; padding:3px;h2 margin:10px 0;$(function() $(h2).click(function() $(#menu span)

19、.css(background-color,#09F); /$(#menuspan).css(background-color,#09F); /$(h2+dl).css(background-color,#09F); /$(h2dl).css(background-color,#09F); ););属性选择器属性选择器l属性选择器通过属性选择器通过HTML元素的属性来选择元素元素的属性来选择元素名称名称语法构成语法构成描述描述示例示例属性属性选择选择器器attribute选取包含给定属性的元素选取包含给定属性的元素$( href )选取含有选取含有href属属性的元素性的元素attribute

20、=value选取等于给定属性是某个选取等于给定属性是某个特定值的元素特定值的元素$( href =# )选取选取href属属性值为性值为“#”的元素的元素attribute !=value选取不等于给定属性是某选取不等于给定属性是某个特定值的元素个特定值的元素$( href !=# )选取选取href属属性值不为性值不为“#”的元素的元素attribute=value选取给定属性是以某些特选取给定属性是以某些特定值开始的元素定值开始的元素$( href=en )选取选取href属性值以属性值以en开头的元素开头的元素attribute$=value选取给定属性是以某些特选取给定属性是以某些特定

21、值结尾的元素定值结尾的元素$( href$=.jpg )选取选取href属性值以属性值以.jpg结尾的元素结尾的元素attribute*=value选取给定属性是以包含某选取给定属性是以包含某些值的元素些值的元素$( href* =txt )选取选取href属性值中含有属性值中含有txt的元素的元素selector selector2 selectorN选取满足多个条件的复合选取满足多个条件的复合属性的元素属性的元素$(liidtitle=新闻要点新闻要点 )选选取含有取含有id属性和属性和title属性为新属性为新闻要点的闻要点的元素元素属性选择器属性选择器 动画列表动画列表 名侦探柯南名侦

22、探柯南 火影忍者火影忍者 死神死神 妖精的尾巴妖精的尾巴 银魂银魂 黑猫警长黑猫警长 仙履奇缘仙履奇缘#box background-color:#FFF; border:2px solid #000; padding:5px;属性选择器属性选择器$(function() $(h2).click(function() $(“h2title”).css(“background-color”,“#09F”); /含有含有title属性的属性的元素元素 /$(class=odds).css(background-color,#09F); /class属性的值为属性的值为odds /的元素的元素 /$

23、(“id!=box”).css(“background-color”,“#09F”); /id属性的值不为属性的值不为box的元素的元素 /$(“title=h”).css(“background-color”,“#09F”); /title属性的值中以属性的值中以h开头的元素开头的元素 /$(title$=jp).css(background-color,#09F); /title属性的值中以属性的值中以jp结尾的元素结尾的元素 /$(title*=s).css(background-color,#09F); /title属性的值中含有属性的值中含有s的元素的元素 /$(liclasstit

24、le*=y).css(background-color,#09F); /包含包含class属性，属性， /且且title属性的值中含有属性的值中含有y的的元素元素 ););属性选择器也支持属性值的模糊匹配属性选择器也支持属性值的模糊匹配过滤选择器过滤选择器l过滤选择器通过特定的过滤规则来筛选元素过滤选择器通过特定的过滤规则来筛选元素l语法特点是使用语法特点是使用“:”，如使用，如使用$(“li:first”)来选取第一个来选取第一个li元素元素l主要分类如下：主要分类如下：基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器表单对象过滤选择器表单对象过滤选择器在后面课程中讲解在后面课程

25、中讲解基本过滤选择器基本过滤选择器l基本过滤选择器可以选取第一个元素、最后一个元素、索基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素引为偶数或奇数的元素名称名称语法构成语法构成描述描述示例示例基本过滤基本过滤选择器选择器:first选取第一个元素选取第一个元素$( li:first )选取所有选取所有元元素中的第一个素中的第一个元素元素:last选取最后一个元素选取最后一个元素$( li:last )选取所有选取所有元元素中的最后一个素中的最后一个元素元素:even选取索引是偶数的所选取索引是偶数的所有元素（有元素（index从从0开开始）始）$( li:even )选

26、取索引是偶选取索引是偶数的所有数的所有元素元素:odd选取索引是奇数的所选取索引是奇数的所有元素（有元素（index从从0开开始）始）$( li:odd )选取索引是奇数选取索引是奇数的所有的所有元素元素基本过滤选择器基本过滤选择器l基本过滤选择器可以根据索引的值选取元素基本过滤选择器可以根据索引的值选取元素名称名称语法构成语法构成描述描述示例示例基本过滤基本过滤选择器选择器:eq(index)选取索引等于选取索引等于index的的元素（元素（index从从0开始）开始）$(li:eq(1) )选取索引等于选取索引等于1的的元素元素:gt(index)选取索引大于选取索引大于index的的元素

27、（元素（index从从0开始）开始）$( li:gt(1) )选取索引大于选取索引大于1的的元素（注：大于元素（注：大于1，不，不包括包括1）:lt(index)选取索引小于选取索引小于index的的元素（元素（index从从0开始）开始）$(“li:lt(1)” )选取索引小于选取索引小于1的的元素（注：小于元素（注：小于1，不包，不包括括1）基本过滤选择器基本过滤选择器l基本过滤选择器还支持一些特殊的选择方式基本过滤选择器还支持一些特殊的选择方式名称名称语法构成语法构成描述描述示例示例基本过滤基本过滤选择器选择器:not(selector)选取去除所有与给选取去除所有与给定选择器匹配的元定

28、选择器匹配的元素素$( li:not(.three) )选取选取class不是不是three的元素的元素:header选取所有标题元素，选取所有标题元素，如如h1h6$(:header )选取网页中所选取网页中所有标题元素有标题元素:focus选取当前获取焦点选取当前获取焦点的元素的元素$(:focus )选取当前获取选取当前获取焦点的元素焦点的元素基本过滤选择器基本过滤选择器$(function() $(h2).click(function()$(li:first).css(background-color,#09F); /第第1个个元素元素/$(li:last).css(backgroun

29、d-color,#09F); /最后一个最后一个元素元素 /$(li:not(.three).css(background-color,#09F); /class不为不为three的的元素元素 /$(li:even).css(background-color,#09F); /索引值为偶数的索引值为偶数的元素元素 /$(li:odd).css(background-color,#09F); /索引值为奇数的索引值为奇数的元素元素 /$(li:eq(1).css(background-color,#09F); /索引值等于索引值等于1的的元素元素 /$(li:gt(1).css(backgroun

30、d-color,#09F); /索引值大于索引值大于1的的元素元素 /$(li:lt(1).css(background-color,#09F); /索引值小于索引值小于1的的元素元素 /$(“:header”).css(“background-color”,“#09F”); /所有标题元素所有标题元素 /$(:focus).css(background-color,#09F); /当前获取焦点的元素当前获取焦点的元素 ););l基本过滤选择器示例基本过滤选择器示例l可见性过滤选择器可以通过元素显示状态来选取元素可见性过滤选择器可以通过元素显示状态来选取元素可见性过滤选择器可见性过滤选择器名称名称语法构成语法构成描述描述示例示例可见性过可见性过滤选择器滤选择器:visible选取所有可见的元选取所有可见的元素素$(:visible )选取所有可见选取所有可见的元素的元素:hidden选取所有隐藏的元选取所有隐藏的元素素$(:hi