《使用jQuery快速高效制作网页交互特效.pptx》由会员分享，可在线阅读，更多相关《使用jQuery快速高效制作网页交互特效.pptx（46页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、jQueryjQuery选择器选择器第四章第四章回顾及作业点评回顾及作业点评使用使用jQuery如何实现隔行变色效果？如何实现隔行变色效果？$(document).ready()与与window.onload有什有什么区别？么区别？如何实现如何实现DOM对象和对象和jQuery对象间的转化？对象间的转化？提问提问提问提问2/46预习检查预习检查jQuery选择器包括哪几大类？选择器包括哪几大类？类选择器和类选择器和ID选择器有什么区别？选择器有什么区别？如何通过如何通过name属性来查找元素？属性来查找元素？提问提问提问提问3/46本章任务本章任务掌握基本选择器的使用掌握基本选择器的使用掌握层
2、次选择器的使用掌握层次选择器的使用掌握属性选择器的使用掌握属性选择器的使用掌握基本过滤选择器的使用掌握基本过滤选择器的使用掌握可见性过滤选择器的使用掌握可见性过滤选择器的使用4/46本章目标本章目标会使用基本选择器获取元素会使用基本选择器获取元素会使用层次选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用属性选择器获取元素会使用基本过滤选择器获取元素会使用基本过滤选择器获取元素会使用可见性过滤选择器获取元素会使用可见性过滤选择器获取元素5/46jQuery选择器选择器jQuery选择器类似于选择器类似于CSS选择器，用来选取选择器，用来选取网页中的元素网页中的元素$(h3).
3、css(background,#09F);获取并设置网页中所有获取并设置网页中所有元素的背景元素的背景“h3”为选择器语法，必须放在为选择器语法，必须放在$()中中$(“h3”)返回返回jQuery对象对象.css()是为是为jQuery对象设置样式的方法对象设置样式的方法6/46jQuery选择器分类选择器分类jQuery选择器功能强大，种类也很多，分类选择器功能强大，种类也很多，分类如下：如下：类类CSS选择器选择器基本选择器基本选择器层次选择器层次选择器属性选择器属性选择器过滤选择器过滤选择器基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器7/46基本选择器基本选择器2-1名
4、称名称语法构成语法构成描述描述示例示例标签选择器标签选择器element根据给定的标签根据给定的标签名匹配元素名匹配元素$(h2)选取所有选取所有h2元素元素类选择器类选择器.class根据给定的根据给定的class匹配元素匹配元素$(.title)选取所选取所有有class为为title的的元素元素ID选择器选择器#id根据给定的根据给定的id匹匹配元素配元素$(#title)选取选取id为为title的元素的元素基本选择器包括标签选择器、类选择器、基本选择器包括标签选择器、类选择器、ID选选择器、并集选择器、交集选择器和全局选择器择器、并集选择器、交集选择器和全局选择器8/46基本选择器基
5、本选择器2-2名称名称语法构成语法构成描述描述示例示例并集选择器并集选择器selector1,selector2,.,selectorN将每一个选择器将每一个选择器匹配的元素合并匹配的元素合并后一起返回后一起返回$(div,p,.title)选选取所有取所有div、p和拥和拥有有class为为title的元的元素素交集选择器交集选择器element.class或或element#id匹配指定匹配指定class或或id的某元素或的某元素或元素集合元素集合$(h2.title)选取所选取所有拥有有拥有class为为title的的h2元素元素全局选择器全局选择器*匹配所有元素匹配所有元素$(*)选取
6、所有元素选取所有元素9/46标签选择器标签选择器$(h3).css(background,#09F)标签选择器根据给定的标签名匹配元素标签选择器根据给定的标签名匹配元素获取并设置所有获取并设置所有元素的背景颜色元素的背景颜色演示演示示例示例1：基本选择器：基本选择器10/46类选择器类选择器$(.title).css(background,#09F)类选择器根据给定的类选择器根据给定的class匹配元素匹配元素获取并设置所有获取并设置所有class为为title的元素的背景颜色的元素的背景颜色演示演示示例示例1：基本选择器：基本选择器11/46ID选择器选择器$(#box).css(backg
7、round,#09F)ID选择器选择器根据给定的根据给定的id匹配元素匹配元素获取并设置获取并设置id为为box的元素的背景颜色的元素的背景颜色演示演示示例示例1：基本选择器：基本选择器12/46并集选择器并集选择器$(h2,dt,.title).css(background,#09F)并集选择器用来并集选择器用来合并元素集合合并元素集合获取并设置所有获取并设置所有、class为为title的元素的背景颜色的元素的背景颜色演示演示示例示例1：基本选择器：基本选择器13/46交集选择器交集选择器$(h2.title).css(background,#09F)交集选择器可以对交集选择器可以对元素集
8、合根据元素集合根据class或或id再筛选再筛选获取并设置所有获取并设置所有class为为title的的元素的背景颜色元素的背景颜色演示演示示例示例1：基本选择器：基本选择器14/46全局选择器全局选择器$(*).css(color,red)全局选择器可以获取所有元素全局选择器可以获取所有元素改变所有元素的字体颜色改变所有元素的字体颜色演示演示示例示例1：基本选择器：基本选择器15/46层次选择器层次选择器名称名称语法构成语法构成描述描述示例示例后代选择后代选择器器ancestordescendant选取选取ancestor元素里元素里的所有的所有descendant（后代）元素（后代）元素$
9、(#menuspan)选取选取#menu下的下的元素元素子选择器子选择器 parentchild选取选取parent元素下的元素下的child（子）元素（子）元素$(#menuspan)选取选取#menu的子元的子元素素相邻元素相邻元素选择器选择器prev+next选取紧邻选取紧邻prev元素之元素之后的后的next元素元素$(h2+dl)选取紧选取紧邻邻元素之后的元素之后的同辈元素同辈元素同辈元素同辈元素选择器选择器prevsibings选取选取prev元素之后的元素之后的所有所有siblings元素元素$(h2dl)选取选取元素之后所有元素之后所有的同辈元素的同辈元素层次选择器通过层次选择
10、器通过DOM元素之间的层次关系来获取元素元素之间的层次关系来获取元素16/46后代选择器后代选择器$(#menuspan).css(background-color,#09F)后代选择器用来获取元素的后代元素后代选择器用来获取元素的后代元素获取并设置获取并设置#menu下的下的元素的背景颜色元素的背景颜色演示演示示例示例2：层次选择器：层次选择器17/46子选择器子选择器$(#menuspan).css(background-color,#09F)子选择器用来获取元素的子元素子选择器用来获取元素的子元素获取并设置获取并设置#menu下的子元素下的子元素的背景颜色的背景颜色演示演示示例示例2：层
11、次选择器：层次选择器18/46相邻选择器相邻选择器$(h2+dl).css(background-color,#09F)相邻选择器用来选取紧邻目标元素的下一个元素相邻选择器用来选取紧邻目标元素的下一个元素获取并设置紧接在获取并设置紧接在元素后的元素后的元素的背景颜色元素的背景颜色演示演示示例示例2：层次选择器：层次选择器19/46同辈选择器同辈选择器$(h2dl).css(background-color,#09F)同辈选择器用来选取目标元素之后的所有同辈元素同辈选择器用来选取目标元素之后的所有同辈元素获取并设置获取并设置元素之后的所有同辈元素元素之后的所有同辈元素的背景颜色的背景颜色演示演示
12、示例示例2：层次选择器：层次选择器20/46属性选择器属性选择器名称名称语法构成语法构成描述描述示例示例属性选属性选择器择器attribute选取包含给定属性的选取包含给定属性的元素元素$(href)选取含选取含有有href属性的元素属性的元素attribute=value选取等于给定属性是选取等于给定属性是某个特定值的元素某个特定值的元素$(href=#)选选取取href属性值为属性值为“#”的元素的元素attribute!=value选取不等于给定属性选取不等于给定属性是某个特定值的元素是某个特定值的元素$(href!=#)选选取取href属性值不为属性值不为“#”的元素的元素属性选择器通
13、过属性选择器通过HTML元素的属性来选择元素元素的属性来选择元素21/46属性选择器属性选择器名称名称语法构成语法构成描述描述示例示例属性选择器属性选择器attribute=value选取给定属性是以某选取给定属性是以某些特定值开始的元素些特定值开始的元素$(href=en)选选取取href属性值以属性值以en开开头的元素头的元素attribute$=value选取给定属性是以某选取给定属性是以某些特定值结尾的元素些特定值结尾的元素$(href$=.jpg)选取选取href属性值以属性值以.jpg结尾的元素结尾的元素attribute*=value选取给定属性是以包选取给定属性是以包含某些值的
14、元素含某些值的元素$(href*=txt)选取选取href属性值中含属性值中含有有txt的元素的元素selectorselector2selectorN选取满足多个条件的选取满足多个条件的复合属性的元素复合属性的元素$(liidtitle=新闻新闻要点要点)选取含有选取含有id属性和属性和title属性为新属性为新闻要点的闻要点的元素元素22/46根据属性名获取元素根据属性名获取元素$(h2title).css(background-color,#09F)属性选择器可以根据是否包含某属性来选取元素属性选择器可以根据是否包含某属性来选取元素改变含有改变含有title属性的属性的元素的背景颜色元素
15、的背景颜色演示演示示例示例3：属性选择器：属性选择器23/46根据属性值获取元素根据属性值获取元素$(class=odds).css(background-color,#09F)属性选择器可以根据属性的值来选取元素属性选择器可以根据属性的值来选取元素改变改变class属性的值为属性的值为odds的元素的背景颜色的元素的背景颜色演示演示示例示例3：属性选择器：属性选择器属性选择器也支持属属性选择器也支持属性值的模糊匹配性值的模糊匹配24/46多属性条件选择多属性条件选择$(liclasstitle*=y).css(background-color,#09F)属性选择器支持多属性条件复合查找元素属
16、性选择器支持多属性条件复合查找元素改变包含改变包含class属性，且属性，且title属性的值中含有属性的值中含有y的的元素的背景颜色元素的背景颜色演示演示示例示例3：属性选择器：属性选择器25/46学员操作学员操作使用使用jQuery美化英雄联盟简介页美化英雄联盟简介页需求说明需求说明单击单击元素后，根据下图设置元素的背景颜色、文元素后，根据下图设置元素的背景颜色、文本颜色属性本颜色属性练习练习练习练习完成时间完成时间：25分钟分钟26/46学员操作学员操作制作非缘勿扰页面特效制作非缘勿扰页面特效3-1需求说明需求说明讲解需求说明讲解需求说明指导指导指导指导27/46学员操作学员操作制作非缘
17、勿扰页面特效制作非缘勿扰页面特效3-2需求说明需求说明使用标签选择器获取使用标签选择器获取元素，设置字体颜元素，设置字体颜色色使用类选择器获取排版使用类选择器获取排版“导演导演”的元素，加的元素，加粗字体粗字体使用使用ID选择器获取排版选择器获取排版“标签标签”的元素，设的元素，设置背景颜色、字体颜色、间距置背景颜色、字体颜色、间距使用属性选择器获取使用属性选择器获取“收藏收藏”元素，单击它元素，单击它后弹出对话框后弹出对话框讲解需求说明讲解需求说明指导指导指导指导28/46学员操作学员操作制作非缘勿扰页面特效制作非缘勿扰页面特效3-3实现思路实现思路（1）使用）使用$(document).r
18、eady()创建文档加载事件创建文档加载事件（2）按要求使用）按要求使用$(选择器选择器)选取所需元素选取所需元素（3）为获取到的元素添加单击事件，并为事件添加）为获取到的元素添加单击事件，并为事件添加处理事件的方法处理事件的方法（4）使用）使用css()方法或方法或addClass()为所选取的元素添为所选取的元素添加加CSS样式，使用样式，使用addClass()添加样式时，该样式写添加样式时，该样式写在样式表文件中在样式表文件中完成时间完成时间：30分钟分钟指导指导指导指导29/46共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技
19、巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解30/46过滤选择器过滤选择器过滤选择器通过特定的过滤规则来筛选元素过滤选择器通过特定的过滤规则来筛选元素语法特点是使用语法特点是使用“:”，如使用，如使用$(“li:first”)来来选取第一个选取第一个li元素元素主要分类如下：主要分类如下：基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器表单对象过滤选择器表单对象过滤选择器内容过滤选择器、子元素过滤选择器内容过滤选择器、子元素过滤选择器将在后续章节中讲解将在后续章节中讲解参考在线学习平台参考在线学习平台31/46基本过滤选择器基本过滤选择器名称名称语法构成语法构
20、成描述描述示例示例基本过滤选基本过滤选择器择器:first选取第一个元素选取第一个元素$(li:first)选取所选取所有有元素中的第一元素中的第一个个元素元素:last选取最后一个元素选取最后一个元素$(li:last)选取所选取所有有元素中的最后元素中的最后一个一个元素元素:even选取索引是偶数的所选取索引是偶数的所有元素（有元素（index从从0开开始）始）$(li:even)选取索选取索引是偶数的所有引是偶数的所有元素元素:odd选取索引是奇数的所选取索引是奇数的所有元素（有元素（index从从0开开始）始）$(li:odd)选取索选取索引是奇数的所有引是奇数的所有元素元素基本过滤选
21、择器可以选取第一个元素、最后一个元素、基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素索引为偶数或奇数的元素32/46基本过滤选择器基本过滤选择器演示演示示例示例4：基本过滤选择器：基本过滤选择器选取第一个元素选取第一个元素$(li:first)$(li:last)$(li:even)$(“li:odd”)选取最后一个元素选取最后一个元素选取索引为偶数的元素选取索引为偶数的元素选取索引为奇数的元素选取索引为奇数的元素33/46基本过滤选择器基本过滤选择器名称名称语法构成语法构成描述描述示例示例基本过滤选基本过滤选择器择器:eq(index)选取索引等于选取索引等于inde
22、x的元素（的元素（index从从0开开始）始）$(li:eq(1)选取索选取索引等于引等于1的的元素元素:gt(index)选取索引大于选取索引大于index的元素（的元素（index从从0开开始）始）$(li:gt(1)选取索选取索引大于引大于1的的元素元素（注：大于（注：大于1，不包，不包括括1）:lt(index)选取索引小于选取索引小于index的元素（的元素（index从从0开开始）始）$(“li:lt(1)”)选取索引选取索引小于小于1的的元素（注元素（注：小于小于1，不包括，不包括1）基本过滤选择器可以根据索引的值选取元素基本过滤选择器可以根据索引的值选取元素34/46基本过滤选
23、择器基本过滤选择器演示演示示例示例4：基本过滤选择器：基本过滤选择器选取索引值等于选取索引值等于1的元素的元素$(li:eq(1)$(li:gt(1)$(li:lt(1)选取选取索引值大于索引值大于1的元素的元素选取选取索引值小于索引值小于1的元素的元素35/46基本过滤选择器基本过滤选择器名称名称语法构成语法构成描述描述示例示例基本过滤选基本过滤选择器择器:not(selector)选取去除所有与给定选取去除所有与给定选择器匹配的元素选择器匹配的元素$(li:not(.three)选取选取class不是不是three的元素的元素:header选取所有标题元素，选取所有标题元素，如如h1h6$
24、(:header)选取网选取网页中所有标题元素页中所有标题元素:focus选取当前获取焦点的选取当前获取焦点的元素元素$(:focus)选取当选取当前获取焦点的元素前获取焦点的元素基本过滤选择器还支持一些特殊的选择方式基本过滤选择器还支持一些特殊的选择方式36/46基本过滤选择器基本过滤选择器演示演示示例示例4：基本过滤选择器：基本过滤选择器根据选择器反向选择元素根据选择器反向选择元素$(li:not(.three)$(:header)$(:focus)选取所有标题元素选取所有标题元素选取获得焦点的元素选取获得焦点的元素37/46可见性过滤选择器可见性过滤选择器名称名称语法构成语法构成描述描述
25、示例示例可见性过滤可见性过滤选择器选择器:visible选取所有可见的元素选取所有可见的元素$(:visible)选取所选取所有可见的元素有可见的元素:hidden选取所有隐藏的元素选取所有隐藏的元素$(:hidden)选取选取所有隐藏的元素所有隐藏的元素可见性过滤选择器可以通过元素显示状态来选取元素可见性过滤选择器可以通过元素显示状态来选取元素38/46可见性过滤选择器可见性过滤选择器演示演示示例示例5：可见性过滤选择器：可见性过滤选择器$(p:hidden).show();获取隐藏的获取隐藏的元素，使其显示元素，使其显示$(p:visible).hide();获取显示的获取显示的元素，使其
26、隐藏元素，使其隐藏39/46特殊符号的转义特殊符号的转义选择器中的特殊符号需要转义，在如下选择器中的特殊符号需要转义，在如下html代码中代码中aacc$(#id#a);$(#id2);$(#id#a);$(#id2);获取这两个元素的选择器：获取这两个元素的选择器：40/46选择器中的空格选择器中的空格选择器的书写规范很严格，多一个空格或少一个空格，选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果都会影响选择器的效果var$t_a=$(.test:hidden);/带空格的jQuery选择器选取选取class为为“test”的元素内部的隐藏元素的元素内部的隐藏元素var$
27、t_b=$(.test:hidden);/不带空格的jQuery选择器选取隐藏的选取隐藏的class为为“test”的元素的元素41/46学员操作学员操作使用使用jQuery美化近期热门栏目美化近期热门栏目需求说明需求说明页面加载后，列表项的偶数行背景颜色为页面加载后，列表项的偶数行背景颜色为#CCC，其中，其中“宿醉宿醉”所在列表项背景颜色为所在列表项背景颜色为#FF99CC，单击，单击“更多更多”和和“更多排更多排名名”均能显示隐藏的列表内容均能显示隐藏的列表内容练习练习练习练习完成时间完成时间：25分钟分钟42/46共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码
28、规范问题代码规范问题调试技巧调试技巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解43/46总结总结基本选择器基本选择器标签选择器、类选择器、标签选择器、类选择器、ID选择器选择器并集选择器、交集选择器、全局选择器并集选择器、交集选择器、全局选择器层次选择器层次选择器后代选择器、子选择器后代选择器、子选择器相邻选择器、同辈选择器相邻选择器、同辈选择器属性选择器属性选择器属性名过滤、属性值过滤、多属性条件过滤属性名过滤、属性值过滤、多属性条件过滤基本过滤选择器基本过滤选择器可见性过滤选择器可见性过滤选择器44/46作业作业课后作业课后作业教员备课时根据班级情况在此添加内容，应区分教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求必做、选做内容，以满足不同层次学员的需求预习作业预习作业预习目标预习目标了解了解jQuery中常用的事件和动画中常用的事件和动画预习下一章学生用书，完成预习作业预习下一章学生用书，完成预习作业45/4646/46