使用jQuery快速高效制作网页交互特效.pptx

jQuery选择器 第四章 回顾及作业点评 使用jQuery如何实现隔行变色效果？ $(document).ready()与window.onload有什 么区别？ 如何实现DOM对象和jQuery对象间的转化？ 提问 2/46 预习检查 jQuery选择器包括哪几大类？ 类选择器和ID选择器有什么区别？ 如何通过name属性来查找元素？ 提问 3/46 本章任务 掌握基本选择器的使用 掌握层次选择器的使用 掌握属性选择器的使用 掌握基本过滤选择器的使用 掌握可见性过滤选择器的使用 4/46 本章目标 会使用基本选择器获取元素 会使用层次选择器获取元素 会使用属性选择器获取元素 会使用基本过滤选择器获取元素 会使用可见性过滤选择器获取元素 5/46 jQuery选择器 jQuery选择器类似于CSS选择器，用来选取 网页中的元素 $(“h3“).css(“background“,“#09F“); 获取并设置网页中所有元素的背景 “h3”为选择器语法，必须放在$()中 $(“h3”)返回jQuery对象 .css()是为jQuery对象设置样式的方法 6/46 jQuery选择器分类 jQuery选择器功能强大，种类也很多，分类 如下： 类CSS选择器 基本选择器 层次选择器 属性选择器 过滤选择器 基本过滤选择器 可见性过滤选择器 7/46 基本选择器2-1 名称语法构成描述示例 标签选择器element根据给定的标签 名匹配元素 $(“h2“ )选取所有 h2元素 类选择器.class根据给定的class 匹配元素 $(“ .title“)选取所 有class为title的 元素 ID选择器#id根据给定的id匹 配元素 $(“ #title“)选取id 为title的元素 基本选择器包括标签选择器、类选择器、ID选 择器、并集选择器、交集选择器和全局选择器 8/46 基本选择器2-2 名称语法构成描述示例 并集选择器selector1,sele ctor2,.,select orN 将每一个选择器 匹配的元素合并 后一起返回 $(“div,p,.title“ )选 取所有div、p和拥 有class为title的元 素 交集选择器element.class 或element#id 匹配指定class 或id的某元素或 元素集合 $(“h2.title“)选取所 有拥有class为title 的h2元素 全局选择器*匹配所有元素$(“*“ )选取所有元素 9/46 标签选择器 $(“h3“).css(“background“,“#09F“) 标签选择器根据给定的标签名匹配元素 获取并设置所有元素的背景颜色 演示示例1：基本选择器 10/46 类选择器 $(“.title“).css(“background“,“#09F“) 类选择器根据给定的class匹配元素 获取并设置所有class为title的元素的背景颜色 演示示例1：基本选择器 11/46 ID选择器 $(“#box“).css(“background“,“#09F“) ID选择器根据给定的id匹配元素 获取并设置id为box的元素的背景颜色 演示示例1：基本选择器 12/46 并集选择器 $(“h2,dt,.title“).css(“background“,“#09F“) 并集选择器用来合并元素集合 获取并设置所有、class为title的元素的背景颜色 演示示例1：基本选择器 13/46 交集选择器 $(“h2.title“).css(“background“,“#09F“) 交集选择器可以对元素集合根据class或id再筛选 获取并设置所有class为title的元素的背景颜色 演示示例1：基本选择器 14/46 全局选择器 $(“*“).css(“color“,“red“) 全局选择器可以获取所有元素 改变所有元素的字体颜色 演示示例1：基本选择器 15/46 层次选择器 名称语法构成描述示例 后代选择 器 ancestor descendant 选取ancestor元素里 的所有descendant（ 后代）元素 $(“#menu span“ ) 选取#menu下的 元素 子选择器 parentchil d 选取parent元素下的 child（子）元素 $(“ #menuspan“ ) 选取#menu的子元 素 相邻元素 选择器 prev+next选取紧邻prev元素之 后的next元素 $(“ h2+dl “ )选取紧 邻元素之后的 同辈元素 同辈元素 选择器 prevsibing s 选取prev元素之后的 所有siblings元素 $(“ h2dl “ )选取 元素之后所有 的同辈元素 层次选择器通过DOM 元素之间的层次关系来获取元素 16/46 后代选择器 $(“#menu span“).css(“background-color“,“#09F“) 后代选择器用来获取元素的后代元素 获取并设置#menu下的元素的背景颜色 演示示例2：层次选择器 17/46 子选择器 $(“#menuspan“).css(“background-color“,“#09F“) 子选择器用来获取元素的子元素 获取并设置#menu下的子元素的背景颜色 演示示例2：层次选择器 18/46 相邻选择器 $(“h2+dl“).css(“background-color“,“#09F“) 相邻选择器用来选取紧邻目标元素的下一个元素 获取并设置紧接在元素后的元素的背景颜色 演示示例2：层次选择器 19/46 同辈选择器 $(“h2dl“).css(“background-color“,“#09F“) 同辈选择器用来选取目标元素之后的所有同辈元素 获取并设置元素之后的所有同辈元素的背景颜色 演示示例2：层次选择器 20/46 属性选择器 名称语法构成描述示例 属性选 择器 attribute选取包含给定属性的 元素 $(“ href“ )选取含 有href属性的元素 attribute=valu e 选取等于给定属性是 某个特定值的元素 $(“ href =#“ )选 取href属性值为“#” 的元素 attribute !=val ue 选取不等于给定属性 是某个特定值的元素 $(“ href !=#“ )选 取href属性值不为 “#”的元素 属性选择器通过HTML元素的属性来选择元素 21/46 属性选择器 名称语法构成描述示例 属性选择器 attribute= value 选取给定属性是以某 些特定值开始的元素 $(“ href=en“ )选 取href属性值以en开 头的元素 attribute$= value 选取给定属性是以某 些特定值结尾的元素 $(“ href$=.jpg“ ) 选取href属性值以. jpg结尾的元素 attribute*= value 选取给定属性是以包 含某些值的元素 $(“ href* =txt“ ) 选取href属性值中含 有txt的元素 selector selector2 selectorN 选取满足多个条件的 复合属性的元素 $(“liidtitle=新闻 要点“ )选取含有id 属性和title属性为新 闻要点的元素 22/46 根据属性名获取元素 $(“h2title“).css(“background-color“,“#09F“) 属性选择器可以根据是否包含某属性来选取元素 改变含有title属性的元素的背景颜色 演示示例3：属性选择器 23/46 根据属性值获取元素 $(“class=odds“).css(“background-color“,“#09F“) 属性选择器可以根据属性的值来选取元素 改变class属性的值为odds的元素的背景颜色 演示示例3：属性选择器 属性选择器也支持属 性值的模糊匹配 24/46 多属性条件选择 $(“liclasstitle*=y“).css(“background-color“,“#09F“) 属性选择器支持多属性条件复合查找元素 改变包含class属性，且title属性的值中含有y的元素的背景颜色 演示示例3：属性选择器 25/46 学员操作使用jQuery美化英雄联盟简介页 需求说明 单击元素后，根据下图设置元素的背景颜色、文 本颜色属性 练习 完成时间：25分钟 26/46 学员操作制作非缘勿扰页面特效3-1 需求说明 讲解需求说明 指导 27/46 学员操作制作非缘勿扰页面特效3-2 需求说明 使用标签选择器获取元素，设置字体颜 色 使用类选择器获取排版“导演”的元素，加粗 字体 使用ID选择器获取排版“标签”的元素，设置 背景颜色、字体颜色、间距 使用属性选择器获取“收藏”元素，单击它后 弹出对话框 讲解需求说明 指导 28/46 学员操作制作非缘勿扰页面特效3-3 实现思路 （1）使用$(document).ready()创建文档加载事件 （2）按要求使用$(选择器)选取所需元素 （3）为获取到的元素添加单击事件，并为事件添加 处理事件的方法 （4）使用css( )方法或addClass()为所选取的元素添 加CSS样式，使用addClass()添加样式时，该样式写 在样式表文件中 完成时间：30分钟 指导 29/46 共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧 共性问题集中讲解共性问题集中讲解 30/46 过滤选择器 过滤选择器通过特定的过滤规则来筛选元素 语法特点是使用“:”，如使用$(“li:first”)来选 取第一个li元素 主要分类如下： 基本过滤选择器 可见性过滤选择器 表单对象过滤选择器 内容过滤选择器、子元素过滤选择器 将在后续章节中讲解 参考在线学习平台 31/46 基本过滤选择器 名称语法构成描述示例 基本过滤选 择器 :first选取第一个元素$(“ li:first“ )选取所 有元素中的第一 个元素 :last选取最后一个元素$(“ li:last“ )选取所 有元素中的最后 一个元素 :even选取索引是偶数的所 有元素（index从0开 始） $(“ li:even“ )选取索 引是偶数的所有 元素 :odd选取索引是奇数的所 有元素（index从0开 始） $(“ li:odd“ )选取索 引是奇数的所有 元素 基本过滤选择器可以选取第一个元素、最后一个元素、 索引为偶数或奇数的元素 32/46 基本过滤选择器 演示示例4：基本过滤选择器 选取第一个元素 $(“li:first“) $(“li:last“) $(“li:even“) $(“li:odd”) 选取最后一个元素 选取索引为偶数的元素 选取索引为奇数的元素 33/46 基本过滤选择器 名称语法构成描述示例 基本过滤选 择器 :eq(index)选取索引等于index 的元素（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 基本过滤选择器 演示示例4：基本过滤选择器 选取索引值等于1的元素 $(“li:eq(1)“) $(“li:gt(1)“) $(“li:lt(1)“) 选取索引值大于1的元素 选取索引值小于1的元素 35/46 基本过滤选择器 名称语法构成描述示例 基本过滤选 择器 :not(selecto r) 选取去除所有与给定 选择器匹配的元素 $(“ li:not(.three)“ ) 选取class不是three 的元素 :header选取所有标题元素， 如h1h6 $(“:header“ )选取网 页中所有标题元素 :focus选取当前获取焦点的 元素 $(“:focus“ )选取当 前获取焦点的元素 基本过滤选择器还支持一些特殊的选择方式 36/46 基本过滤选择器 演示示例4：基本过滤选择器 根据选择器反向选择元素 $(“li:not(.three)“) $(“:header“) $(“:focus“) 选取所有标题元素 选取获得焦点的元素 37/46 可见性过滤选择器 名称语法构成描述示例 可见性过滤 选择器 :visible选取所有可见的元素 $(“:visible“ )选取所 有可见的元素 :hidden选取所有隐藏的元素 $(“:hidden“ ) 选取 所有隐藏的元素 可见性过滤选择器可以通过元素显示状态来选取元素 38/46 可见性过滤选择器 演示示例5：可见性过滤选择器 $(“ p:hidden“).show(); 获取隐藏的元素，使其显示 $(“ p:visible“).hide(); 获取显示的元素，使其隐藏 39/46 特殊符号的转义 选择器中的特殊符号需要转义，在如下html代码中 aa cc $(“#id#a“); $(“#id2“); $(“#id#a“); $(“#id2“);