JQuery-档内02章 选择器.pptVIP

jQuery基础教程 第二章 jQuery选择器 什么是选择器 jQuery选择器的优势 jQuery选择器分类 选择器中的注意事项 案例研究 选择器的扩展 1、什么是选择器 使用特定的规则找到符合该规则的元素 jQuery：允许您对元素组或单个元素进行操作 HTML：允许您对 DOM 元素组或单个DOM 节点进行操作。 CSS选择器 标签选择器：以文档元素作为选择符 ID选择器：以文档元素的唯一标识符ID作为选择符 类选择器：以文档元素的class作为选择符 群组选择器：多个选择符应用相同的样式规则 后代选择器：元素E的任意后代元素F 通配选择符：以文档的所有元素作为选择符 CSS选择器 选择器 语法 描述 示例 标签选择器 E{ CSS规则 } 以文档元素作为选择符 td{width:12px;} ID选择器 #ID{ CSS规则 } 以文档元素的唯一标识符ID作为选择符 #note{width:12px;} 类选择器 .className{ CSS 规则 } 以文档元素的class作为选择符 div.note{font-size:9px;} 群组选择器 E1,E2,E3{ CSS规则 } 多个选择符应用相同的样式规则 td,div,a{font-size:9px;} 后代选择器 E F{ CSS规则 } 元素E的任意后代元素F #links a{color:red;} 通配选择符 *{ CSS规则} 以文档的所有元素作为选择符 *{font-size:9px;} jQuery选择器 完全继承CSS的风格 可以非常便捷和快速的找出特定的DOM元素 选择器是jQuery的根基 事件处理、遍历DOM和Ajax操作都依赖于选择器 jQuery的行为规则都必须在获取到该元素后才能生效 与CSS选择器写法相近，但作用效果不同 2、jQuery选择器的优势 简洁的写法 $(#id)代替getElementById $(tagName)代替getElementByTagName 支持CSS1~3的选择器 支持CSS1,CSS2的全部选择器 支持CSS3的部分选择器 独有的选择器 XPath在1.1.3.1版以后废弃，但可以引入插件后使用 完善的处理机制 无需判断选择器是否存在 判断jQuery对象是否存在应使用.length0或者转为DOM对象后判断 3、jQuery选择器分类 基本选择器 通过元素ID，class和标签名等来查找DOM元素 层次选择器 通过DOM元素之间的层次关系来获取特定元素，如后代元素，子元素，相邻元素和同辈元素 过滤选择器 通过特定的过滤规则来筛选出所需的DOM元素，规则与CSS中的伪类选择器语法相同，即以冒号(:)开头 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器 表单选择器 为了使用户能灵活的操作表单，jQuery中专门加入了表单选择器，通过这个选择器能极其方便地获取到表单的某个或某类型的元素 基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $(#test)选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(.test)选取所有class为test的元素 element 根据给定的元素名匹配元素 集合元素 $(div)选取所有的div元素 * 匹配所有元素 集合元素 $(*)选取所有的元素 selector1,selector2, ......, selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $(#test,div,p.myClass)选取id为test，所有div元素和拥有class为myClass的所有p标签元素的一组元素 层次选择器 选择器 描述 返回 示例 $(ancestor descendant) 选取ancestor元素(祖先)里所有descendant(后代)元素 集合元素 $(div span)选取div里所有的span元素 $(parentchild) 选取parent元素下的child子元素 集合元素 $(divspan)选取div元素下元素名是span的子元素 $(prev+next) 选取紧接在prev元素后的next元素 集合元素 $(.one+div)选取class为one的下一个div同辈元素 $(prev~siblings) 选取prev元素之后的所有siblings元素 集合元素 $(#two~div)选取id为two的元素后面的所有div同辈元素 基本过滤选择器 选择器 描述 返回 示例 :first 选取第一个元素 单个元素 $(div:first)选取所有div元素中第一个div元素 :last 选取