JavaScript+jQuery程序设计第11章 jQuery选择器.pptVIP

* * jQuery选择器 jQuery的工厂函数 基本选择器 层级选择器 过滤选择器 属性选择器 表单选择器 jQuery的工厂函数 在jQuery中，无论使用哪种类型的选择器都需要从一个“$”符号和一对“()”开始。 用于获取文档中全部的div $(div) 用于获取文档中ID属性值为username的一个元素 $(#username) 用于获取文档中使用CSS类名为btn_grey的所有元素 $(.btn_grey) 基本选择器 CSS ID选择器 元素选择器 类名选择器 复合选择器 通配符选择器 ID选择器 $(#id); 使用方法 要查询元素的ID属性值 在页面中添加一个ID属性值为testInput的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值。 实例 元素选择器 $(element); 使用方法 要查询元素的标记名 在页面中添加两个div标记和一个按钮，通过单击按钮来获取这两个div，并修改它们的内容。 实例 类名选择器 $(.class); 使用方法 要查询元素所用的CSS类名 在页面中，首先添加两个div标记，并为其中的一个设置CSS类，然后通过jQuery的类名选择器选取设置了CSS类的div标记，并设置其CSS样式。 实例 复合选择器 $(selector1,selector2,selectorN); 使用方法 任意多个选择器 在页面添加3种不同元素并统一设置样式。使用复合选择器筛选div元素和id属性值为span的元素，并为它们添加新的样式。 实例 通配符选择器 所谓的通配符，就是指符号“*”，它代表着页面上的每一个元素，也是说如果使用$(*)将取得页面上所有的DOM元素集合的jQuery包装集。 层级选择器 ancestor descendan选择器 parent child选择器 prev + next选择器 prev ~ siblings选择器 ancestor descendan选择器 $(ancestor descendant); 使用方法 任何有效的选择器 通过jQuery为版权列表设置样式。 实例 ancestor所指定元素的后代元素 $(ul li); 示例 parent child选择器 $(parent child); 使用方法 任何有效的选择器 获取表单中文本框的值。 实例 parent元素的直接子元素 $(form input); 示例 prev + next选择器 $(prev + next); 使用方法 任何有效的选择器 筛选紧跟在lable标记后的p标记并改变匹配元素的背景颜色为淡蓝色。 实例 紧接着prev的选择器 $(div + img); 示例 prev ~ siblings选择器 $(prev ~ siblings); 使用方法 任何有效的选择器 筛选页面中div元素的同辈元素。 实例 prev之后的所有同辈元素 $(div ~ ul); 示例 过滤选择器 CSS 简单过滤器 内容过滤器 可见性过滤器 表单对象的属性过滤器 子元素选择器 简单过滤器 过滤器 说明 示例 :first 匹配找到的第一个元素，它是与选择器结合使用的 $(tr:first) :last 匹配找到的最后一个元素，它是与选择器结合使用的 $(tr:last) :even 匹配所有索引值为偶数的元素，索引值从0开始计数 $(tr:even) :odd 匹配所有索引值为奇数的元素，索引从0开始计数 $(tr:odd) :eq(index) 匹配一个给定索引值的元素 $(tr:eq(1)) :gt(index) 匹配所有大于给定索引值的元素 $(tr:gt(0)) :lt(index) 匹配所有小于给定索引值的元素 $(tr:lt(2)) :header 匹配如 h1, h2, h3……之类的标题元素 $(:header) :not(selector) 去除所有与给定选择器匹配的元素 $(input:not(:checked)) :animated 匹配所有正在执行动画效果的元素 $(:animated ) 简单过滤器 实现一个带表头的双色表格。 实例 内容过滤器 过滤器 说明 示例 contains(text) 匹配包含给定文本的元素 $(li:contains(DOM)) :empty 匹配所有不包含子元素或者文本的空元素 $(td:empty) :has(selector) 匹配含有选择器所匹配元素的元素 $(td:has(p)) :parent 匹配含有子元