锋利的jquery学习笔记 第二章

第2章 jquery选择器 jquery中的选择器完全继承了CSS的风格，利用jquery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为。 jquery的行为规则都必须在获取到元素后才能生效。 $("#tt")获取的永远是对象。 jquery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 是jquery中最常用的选择器，也是最简单的选择器，它通过元素id,class和标签名等来查找DOM元素。 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 element根据给定的元素名匹配元素 集合元素 $("p")选取所有的

元素 * 匹配所有元素 集合元素 $("*")选取所有的元素 selector1,selector2,... 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myclass")选取所有

,和拥有class为myclass的

标签的一组元素 层次选择器 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。 选择器 描述 返回 示例 $("aa bb") 选取aa元素里的所有bb(后代)元素 集合元素 $("div span")选择div里的所有span $("parent>child") 选取parent元素下的child（子）元素 集合元素 $("div>span")选取

元素下元素名的子元素 $("prev+next") 选取紧接在prev元素后的next元素 集合元素 $(".one+div")选取class为one的下一个

元素 $("prev~siblings") 选取prev元素之后的所有siblings元素 集合元素 $("#two~div")选取id为two的元素后面的所有

兄弟元素 $(".one+div"); == $(". one").next("div") $("#prev~div") == $("#prev").nextAll("div") $("#prev~siblings") 约等于 $("#prev").siblings(); 过滤选择器 是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。 基本过滤选择器 选择器 描述 返回 示例 :first 选取第1个元素 单个元素 $("div:first")选取所有

元素中第1个

元素 :last 选取最后一个元素 单个元素 $("div:last")选取所有

元素中最后一个

元素 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myclass)")选取class不是myclass的元素 :even 选取索引是偶数的所有元素，索引从0开始 集合元素 $("input:even")选取索引是偶数的元素 :odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:odd")选取索引是奇数的元素 :eq(index) 选取索引等于index的元素（index从0开始） 单个元素 $("input:eq(1)")选取索引等于1的元素 :gt(index) 选取索引大于index的元素（index从0开始） 集合元素 $("input:gt(1)")选取索引大于1的元素（大于1,而不包括1） :lt(index) 选取索引小于index的元素 集合元素 $("input:lt(1)")选取索引小于1的元素（小于1,而不包括1） :header 选取所有的标题元素，例如h1,h2,h3等等 集合元素 $(":header")选取网页中所有的

,

等 :animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated")选取正在执行动画的

元素 内容过滤选择器 它的过滤规则主要体现在它所包括的子元素或文本内容上。 选择器 描述 返回 示例 :contains(text) 选取含有文本内容的"text"的元素 集合元素 $("div:contains('我')")选取含有文本“我”的

元素 :empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素（包括文本元素）的

空元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有

元素的

元素 :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素（包括文本元素）的

元素 可见性过滤选择器 是根据元素的可见和不可见状态来选择相应的元素。 选择器 描述 返回 示例 :hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。 :visible 选取所有可见的元素 集合元素 $("div:visible")选取所有可见的

元素 注：选择器:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域()和visibility:hidden之类的元素。 属性过滤选择器 它的过滤规则是通过元素的属性来获取相应的元素。 选择器 描述 返回 示例 [attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的

元素 [attribute=value] 选取属性的值为value的元素 集合元素 $("div[title=test]")选取属性title为"test"的

元素 [attribute!=value] 选取属性的值不等于value的元素 集合元素 $("div[title!=test]")选取属性title不等于"test"的div元素（没有属性title的

元素也会被选取） [attribute^=value] 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")选取属性title以"test"开始的

元素 [attribute$=value] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性title以"test"结束的

元素 [attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性title含有"test"的

元素 [selector1][selector2][selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 集合元素 $("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的

元素 子元素过滤选择器 选择器 描述 返回 示例 :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） 集合元素 :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 :first-child 选择每个父元素的第1个子元素 集合元素 :first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。$("ul li:first-child")选取每个ul中的第1个li元素 :last-child 选取每个父元素的最后一个子元素 复合元素 :only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其它元素，则不会被匹配 集合元素 $("ul li:only-child")在

• 中选取是惟一子元素的
• 元素 :nth-child()选择器是很常用的子元素过滤选择器。 :nth-child(even)能选取每个父元素下的索引值是偶数的元素。 :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。 :nth-child(2)能选取每个父元素下的索引值等于2的元素。 :nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，（n从0开始） :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。 表单对象属性过滤选择器 选择器 描述 返回 示例 :enabled 选取所有可用元素 集合元素 $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 :disabled 选取所有不可用元素 集合元素 $(“#form2 :disabled”)选取id为form2的表单内的所有不可用元素 :checked 选取所有被选中的元素（单选，复选） 集合元素 $(“input:checked”)选取所有被选中的元素 :selected 选取所有被选中的选项元素（下拉列表） 集合元素 $(“select :selected”)选取所有被选中的选项元素 表单选择器 利用这个选择器，能极方便地获取到表单的某个或者某类型的元素。 选择器 描述 返回 示例 :input 选取所有的<select><button>元素 集合元素 $(“:input”) :text 选取所有的单行文本框 集合元素 $(“:text”) :passowrd 选取所有的密码框 集合元素 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的图像按钮 :reset 选取所有的重置按钮 :button 选取所有的按钮 :file 选取所有的上传域 :hidden 选取所有不可见元素 选择器中的一些注意事项 1. 选择器中含有”.”,”#”,”(“,”)”等特殊字符 根据w3C的规定，属性值中是不能含有这些特殊字符的。 使用转义符转义 2. 选择器中含有空格 选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。 例子中用到的几个jquery方法 Show()：显示隐藏匹配元素。 Css(name,value)：给元素设置样式。 Text(string)：设置所有匹配元素的文本内容。 Filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。 addClass(class)：为匹配的元素添加指定的类名。 removeClass(class)：从匹配的元素中删除指定的类。 小结 本章详细讲解了jqeury中的各种类型的选择器。选择器是行为与文档内容之间连接的纽带，选择器的最终目的就是能够轻松地找到文档中的元素。