JQuery-第02章 选择器

1、jQuery基础教程第二章 jQuery选择器 什么是选择器 jQuery选择器的优势 jQuery选择器分类 选择器中的注意事项 案例研究 选择器的扩展1、什么是选择器 使用特定的规则找到符合该规则的元素 jQuery：允许您对元素组或单个元素进行操作 HTML：允许您对 DOM 元素组或单个DOM 节点进行操作。CSS选择器 标签选择器：以文档元素作为选择符 ID选择器：以文档元素的唯一标识符ID作为选择符 类选择器：以文档元素的class作为选择符 群组选择器：多个选择符应用相同的样式规则 后代选择器：元素E的任意后代元素F 通配选择符：以文档的所有元素作为选择符CSS选择器选择器选择器

2、语法语法描述描述示例示例标签选择器E CSS规则 以文档元素作为选择符tdwidth:12px;ID选择器#ID CSS规则 以文档元素的唯一标识符ID作为选择符#notewidth:12px;类选择器.className CSS 规则 以文档元素的class作为选择符div.notefont-size:9px;群组选择器E1,E2,E3 CSS规则 多个选择符应用相同的样式规则td,div,afont-size:9px;后代选择器E F CSS规则 元素E的任意后代元素F#links acolor:red;通配选择符* CSS规则以文档的所有元素作为选择符*font-size:9px;jQu

3、ery选择器 完全继承CSS的风格 可以非常便捷和快速的找出特定的DOM元素 选择器是jQuery的根基 事件处理、遍历DOM和Ajax操作都依赖于选择器 jQuery的行为规则都必须在获取到该元素后才能生效 与CSS选择器写法相近，但作用效果不同2、jQuery选择器的优势 简洁的写法 $(#id)代替getElementById $(tagName)代替getElementByTagName 支持CSS13的选择器 支持CSS1,CSS2的全部选择器 支持CSS3的部分选择器 独有的选择器 XPath在1.1.3.1版以后废弃，但可以引入插件后使用 完善的处理机制 无需判断选择器是否存在

4、判断jQuery对象是否存在应使用.length0或者转为DOM对象后判断3、jQuery选择器分类基本选择器通过元素ID，class和标签名等来查找DOM元素层次选择器通过DOM元素之间的层次关系来获取特定元素，如后代元素，子元素，相邻元素和同辈元素过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，规则与CSS中的伪类选择器语法相同，即以冒号(:)开头基本过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器表单对象属性过滤选择器表单选择器为了使用户能灵活的操作表单，jQuery中专门加入了表单选择器，通过这个选择器能极其方便地获取到表单的某个或某类型的元素基本选择器选择

5、器选择器描述描述返回返回示例示例#id根据给定的id匹配一个元素单个元素$(#test)选取id为test的元素.class根据给定的类名匹配元素集合元素$(.test)选取所有class为test的元素element根据给定的元素名匹配元素集合元素$(div)选取所有的元素*匹配所有元素集合元素$(*)选取所有的元素selector1,selector2,.,selectorN将每一个选择器匹配到的元素合并后一起返回集合元素$(#test,div,p.myClass)选取id为test，所有元素和拥有class为myClass的所有标签元素的一组元素层次选择器选择器选择器描述描述返回返回示例

6、示例$(ancestor descendant)选取ancestor元素(祖先)里所有descendant(后代)元素集合元素$(div span)选取里所有的元素$(parentchild)选取parent元素下的child子元素集合元素$(divspan)选取元素下元素名是的子元素$(prev+next)选取紧接在prev元素后的next元素集合元素$(.one+div)选取class为one的下一个同辈元素$(prevsiblings)选取prev元素之后的所有siblings元素集合元素$(#twodiv)选取id为two的元素后面的所有同辈元素基本过滤选择器选择器选择器描述描述返回返

7、回示例示例:first选取第一个元素单个元素$(div:first)选取所有元素中第一个元素:last选取最后一个元素单个元素$(div:last)选取所有元素中最后一个元素:not(selector)去除所有给定选择器匹配的元素集合元素$(div:not(.myClass)选取class不是myClass的元素:even选取索引是偶数的所有元素,索引从0开始集合元素$(div:even)选取索引是偶数的元素:odd选取索引是奇数的所有元素,索引从0开始集合元素$(div:odd)选取索引是奇数的元素:eq(index)选取索引等于index的元素单个元素$(div:eq(1)选取索引等于1的

8、元素基本过滤选择器(续)选择器选择器描述描述返回返回示例示例:gt(index)选取索引大于index的元素集合元素$(div:gt(1)选取索引大于1的元素(不包括1):lt(index)选取索引小于index的元素集合元素$(div:gt(1)选取索引小于1的元素(不包括1):header选取所有标题元素,如h1,h2等集合元素$(:header)选取所有,.等元素:animated选取当前正在执行动画的所有元素集合元素$(div:animated)选取正在执行动画的元素:focus选取当前获取焦点的元素集合元素$(:focus)选取当前获取焦点的元素内容过滤选择器选择器选择器描述描述返回

9、返回示例示例:contains(text)选取含有文本内容为text的元素集合元素$(div:contains(我)选取含有文本我的元素:empty选取不包含子元素或者文本的空元素集合元素$(div:empty)选取不包含子元素(包括文本元素)的元素:has(selector)选取含有选择器匹配的元素的元素集合元素$(div:has(p)选取含有元素的元素:parent选取含有子元素或者文本的元素集合元素$(div:parent)选取拥有子元素(包括文本元素)的元素可见性过滤选择器选择器选择器描述描述返回返回示例示例:hidden选取所有不可见的元素集合元素$(:hidden)选取不可见的元素

10、.包括和等元素,如果只想选取元素,可以使用$(input:hidden):visible选取所有可见的元素集合元素$(div:visible)选取所有可见的元素属性过滤选择器选择器选择器描述描述返回返回示例示例attribute选取拥有此属性的元素集合元素$(divid)选取拥有id的元素attribute=value选取属性的值为value的元素集合元素$(divtitle=test)选取属性title为test的元素attribute!=value选取属性的值不等于value的元素集合元素$(divtitle!=test)选取属性title不为test的元素(包含无title属性的)att

11、ribute=value选取属性的值以value开始的元素集合元素$(divtitle=test)选取属性title以test开始的元素attribute$=value选取属性的值以value结束的元素集合元素$(divtitle$=test)选取属性title以test结束的元素attribute*=value选取属性的值含有value的元素集合元素$(divtitle*=test)选取属性title含有test的元素属性过滤选择器(续)选择器选择器描述描述返回返回示例示例attribute|=value选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符-)的元素集合元素$(d

12、ivtitle|=en)选取属性title等于en或以en为前缀的元素attribute=value选取属性用空格分隔的值中包含一个给定值(value)的元素集合元素$(divtitle=uk)选取属性title用空格分隔的值中包含字符uk的元素attribute1attribute2.attributeN用属性选择器合并成一个复合属性选择器,满足多个条件.每选择一次,缩小一次范围集合元素$(dividtitle=test)选取拥有属性id,并且属性title为test的元素子元素过滤选择器选择器选择器描述描述返回返回示例示例:nth-child(index/even/odd)选取每个父元素下

13、的第index个子元素或者奇偶元素(index从1算起)集合元素:eq(index)值匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始,而:eq(index)的index是从0开始:first-child选取每个父元素的第一个子元素集合元素:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素.如:$(ul li:first-child);选取每个中的第一个元素:last-child选取每个父元素的最后一个子元素集合元素:last只返回单个元素,而:last-child选择符将为每个

14、父元素匹配最后一个子元素.如:$(ul li:last-child);选取每个中的最后一个元素:only-child如果某个元素是它父元素的唯一子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配集合元素$(ul li:only-child)在中选取是唯一子元素的元素表单对象属性过滤选择器选择器选择器描述描述返回返回示例示例:enabled选取所有可用的元素集合元素$(#form1:enabled)选取id为form1的表单内所有可用元素:disabled选取所有不可用的元素集合元素$(#form2:disabled)选取id为form2的表单内所有不可用元素:checked选取所有

15、被选中的元素(包含单选框,复选框)集合元素$(input:checked)选取所有被选中的元素:selected选取所有被选中的选项元素(下拉列表)集合元素$(select option:selected)选取所有被选中的选项元素表单选择器选择器选择器描述描述返回返回示例示例:input选取所有,和元素集合元素$(:input)选取所有,和元素:text选取所有的单行文本框集合元素$(:text)选取所有单行文本框:password选取所有的密码框集合元素$(:password)选取所有密码框:radio选取所有的单选框集合元素$(:radio)选取所有单选框:checked选取所有的多选框集

16、合元素$(:checked)选取所有多选框:submit选取所有的提交按钮集合元素$(:submit)选取所有提交按钮:reset选取所有的重置按钮集合元素$(:reset)选取所有重置按钮:image选取所有的图像按钮集合元素$(:image)选取所有的图像按钮:button选取所有的按钮集合元素$(:button)选取所有的按钮:file选取所有的上传域集合元素$(:file)选取所有的上传域:hidden选取所有不可见元素选取所有不可见元素集合元素集合元素参见可见性过滤选择器4、选择器中的注意事项 选择器中含有.,#,(或等特殊字符 W3C规定属性值中不能含有这些特殊字符 真确写法: $(#id#b) /id=id#b 转义特殊字符# $(#id1)/id=id1 转义特殊字符 $(#id.en)/id=id.en 转义特殊字符. 属性选择器的符号问题 j