使用jQuery快速高效制作网页交互特效TP.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 基本选择器包括标签选择器 类选择器 ID选择器 并集选择器 交集选择器和全局选择器 8 46 基本选择器2 2 9 46 标签选择器 h3 css background 09F 标签选择器根据给定的标签名匹配元素 获取并设置所有元素的背景颜色 10 46 类选择器 title css background 09F 类选择器根据给定的class匹配元素 获取并设置所有class为title的元素的背景颜色 11 46 ID选择器 box css background 09F ID选择器根据给定的id匹配元素 获取并设置id为box的元素的背景颜色 12 46 并集选择器 h2 dt title css background 09F 并集选择器用来合并元素集合 获取并设置所有 class为title的元素的背景颜色 13 46 交集选择器 h2 title css background 09F 交集选择器可以对元素集合根据class或id再筛选 获取并设置所有class为title的元素的背景颜色 14 46 全局选择器 css color red 全局选择器可以获取所有元素 改变所有元素的字体颜色 15 46 层次选择器 层次选择器通过DOM元素之间的层次关系来获取元素 16 46 后代选择器 menuspan css background color 09F 后代选择器用来获取元素的后代元素 获取并设置 menu下的元素的背景颜色 17 46 子选择器 menu span css background color 09F 子选择器用来获取元素的子元素 获取并设置 menu下的子元素的背景颜色 18 46 相邻选择器 h2 dl css background color 09F 相邻选择器用来选取紧邻目标元素的下一个元素 获取并设置紧接在元素后的元素的背景颜色 19 46 同辈选择器 h2 dl css background color 09F 同辈选择器用来选取目标元素之后的所有同辈元素 获取并设置元素之后的所有同辈元素的背景颜色 20 46 属性选择器 属性选择器通过HTML元素的属性来选择元素 21 46 属性选择器 22 46 根据属性名获取元素 h2 title css background color 09F 属性选择器可以根据是否包含某属性来选取元素 改变含有title属性的元素的背景颜色 23 46 根据属性值获取元素 class odds css background color 09F 属性选择器可以根据属性的值来选取元素 改变class属性的值为odds的元素的背景颜色 属性选择器也支持属性值的模糊匹配 24 46 多属性条件选择 li class title y css background color 09F 属性选择器支持多属性条件复合查找元素 改变包含class属性 且title属性的值中含有y的元素的背景颜色 25 46 学员操作 使用jQuery美化英雄联盟简介页 需求说明单击元素后 根据下图设置元素的背景颜色 文本颜色属性 练习 26 46 学员操作 制作非缘勿扰页面特效3 1 需求说明 指导 27 46 学员操作 制作非缘勿扰页面特效3 2 需求说明使用标签选择器获取元素 设置字体颜色使用类选择器获取排版 导演 的元素 加粗字体使用ID选择器获取排版 标签 的元素 设置背景颜色 字体颜色 间距使用属性选择器获取 收藏 元素 单击它后弹出对话框 指导 28 46 学员操作 制作非缘勿扰页面特效3 3 实现思路 1 使用 document ready 创建文档加载事件 2 按要求使用 选择器 选取所需元素 3 为获取到的元素添加单击事件 并为事件添加处理事件的方法 4 使用css 方法或addClass 为所选取的元素添加CSS样式 使用addClass 添加样式时 该样式写在样式表文件中 指导 29 46 共性问题集中讲解 常见问题及解决办法代码规范问题调试技巧 共性问题集中讲解 30 46 过滤选择器 过滤选择器通过特定的过滤规则来筛选元素语法特点是使用 如使用 li first 来选取第一个li元素主要分类如下 基本过滤选择器可见性过滤选择器表单对象过滤选择器内容过滤选择器 子元素过滤选择器 将在后续章节中讲解 参考在线学习平台 31 46 基本过滤选择器 基本过滤选择器可以选取第一个元素 最后一个元素 索引为偶数或奇数的元素 32 46 基本过滤选择器 选取第一个元素 li first li last li even li odd 选取最后一个元素 选取索引为偶数的元素 选取索引为奇数的元素 33 46 基本过滤选择器 基本过滤选择器可以根据索引的值选取元素 34 46 基本过滤选择器 选取索引值等于1的元素 li eq 1 li gt 1 li lt 1 选取索引值大于1的元素 选取索引值小于1的元素 35 46 基本过滤选择器 基本过滤选择器还支持一些特殊的选择方式 36 46 基本过滤选择器 根据选择器反向选择元素 li not three header focus 选取所有标题元素 选取获得焦点的元素 37 46 可见性过滤选择器 可见性过滤选择器可以通过元素显示状态来选取元素 38 46 可见性过滤选择器 p hidden show 获取隐藏的元素 使其显示 p visible hide 获取显示的元素 使其隐藏 39 46 特殊符号的转义 选择器中的特殊符号需要转义 在如下html代码中 aacc id a id 2 id a id 2 获取这两个元素的选择器 40 46 选择器中的空格 选择器的书写规范很严格 多一个空格或少一个空格 都会影响选择器的效果 var t a test hidden 带空格的jQuery选择器 选取class为 test 的元素内部的隐藏元素 var t b test hidden 不带空格的jQuery选择器 选取隐藏的class为 test 的元素 41 46 学员操作 使用jQuery美化近期热门栏目 需求说明页面加载后 列表项的偶数行背景颜色为 CCC 其中 宿醉 所在列表项背景颜色为 FF99CC 单击 更多 和 更多排名 均能显示隐藏的列表内容 练习 42 46 共性问题集中讲解 常见问题及解决办法代码规范问题调试技巧 共性问题集中讲解 43 46 总结 基本选择器标签选择器 类选择器 ID选择器并集选择器 交集选择器 全局选择器层次