TP04理论解说.ppt

基本过滤选择器 演示示例4：基本过滤选择器 选取索引值等于1的元素 $(li:eq(1)) $(li:gt(1)) $(li:lt(1)) 选取索引值大于1的元素 选取索引值小于1的元素 32/41 基本过滤选择器 名称 语法构成 描述 示例 基本过滤选择器 :not(selector) 选取去除所有与给定选择器匹配的元素 $( li:not(.three)?)选取class不是three的元素 :header 选取所有标题元素，如h1~h6 $(:header?)选取网页中所有标题元素 :focus 选取当前获取焦点的元素 $(:focus?)选取当前获取焦点的元素 基本过滤选择器还支持一些特殊的选择方式 33/41 基本过滤选择器 演示示例4：基本过滤选择器 根据选择器反向选择元素 $(li:not(.three)) $(:header) $(:focus) 选取所有标题元素 选取获得焦点的元素 34/41 可见性过滤选择器 名称 语法构成 描述 示例 可见性过滤选择器 :visible 选取所有可见的元素 $(:visible?)选取所有可见的元素 :hidden 选取所有隐藏的元素 $(:hidden?) 选取所有隐藏的元素 可见性过滤选择器可以通过元素显示状态来选取元素 35/41 可见性过滤选择器 演示示例5：可见性过滤选择器 $(?p:hidden).show(); 获取隐藏的p元素，使其显示 $(?p:visible).hide(); 获取显示的p元素，使其隐藏 36/41 特殊符号的转义 选择器中的特殊符号需要转义，在如下html代码中 div id=id#aaa/div div id=id[2]cc/div $(#id#a); $(#id[2]); $(#id\\#a); $(#id\\[2\\]); 获取这两个元素的选择器： 37/41 选择器中的空格 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果 var $t_a = $(.test :hidden); //带空格的jQuery选择器 选取class为“test”的元素内部的隐藏元素 var $t_b = $(.test:hidden); //不带空格的jQuery选择器 选取隐藏的class为“test”的元素 38/41 总结 基本选择器 标签选择器、类选择器、ID选择器 并集选择器、交集选择器、全局选择器 层次选择器 后代选择器、子选择器 相邻选择器、同辈选择器 属性选择器 属性名过滤、属性值过滤、多属性条件过滤 基本过滤选择器 可见性过滤选择器 39/41 作业 课后作业 教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求 预习作业 预习目标 了解jQuery中常用的事件和动画 预习下一章学生用书，完成预习作业 40/41 jQuery选择器 第四章 回顾及作业点评 使用jQuery如何实现隔行变色效果？ $(document).ready()与window.onload有什么区别？ 如何实现DOM对象和jQuery对象间的转化？ 提问 2/41 预习检查 jQuery选择器包括哪几大类？ 类选择器和ID选择器有什么区别？ 如何通过name属性来查找元素？ 提问 3/41 本章任务 掌握基本选择器的使用 掌握层次选择器的使用 掌握属性选择器的使用 掌握基本过滤选择器的使用 掌握可见性过滤选择器的使用 4/41 本章目标 会使用基本选择器获取元素 会使用层次选择器获取元素 会使用属性选择器获取元素 会使用基本过滤选择器获取元素 会使用可见性过滤选择器获取元素 5/41 jQuery选择器 jQuery选择器类似于CSS选择器，用来选取网页中的元素 $(h3).css(background,#09F); 获取并设置网页中所有h3元素的背景 “h3”为选择器语法，必须放在$()中 $(“h3”)返回jQuery对象 .css()是为jQuery对象设置样式的方法 6/41 jQuery选择器分类 jQuery选择器功能强大，种类也很多，分类如下: 类CSS选择器 基本选择器 层次选择器 属性选择器 过滤选择器 基本过滤选择器 可见性过滤选择器 7/41 基本选择器2-1 名称 语法构成 描述 示例 标签选择器 element 根据给定的标签名匹配元素 $(h2?)选取所有h2元素 类选择器 .class 根据给定的class匹配元素 $( .title)选取所有class为title的元素 ID选择器 #id 根据给定的id匹配元素 $( #title)选取id为title的元素 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器 8/41 基本