jquery选择器按照功能主要分为.docVIP

jQuery 选择器按照功能主要分为选择和过滤. 并且是配合使用的. 可以同时使用组合 成一个选择器字符串. 主要的区别是过滤作用的选择器是指定条件从前面匹配的内容中 筛选, 过滤选择器也可以单独使用, 表示从全部*中筛选. 比如: $(:[title]) 等同于: $(*:[title]) 而选择功能的选择器则不会有默认的范围, 因为作用是选择而不是过滤. 下面的选择器分类中, 带有过滤器的分类表示是过滤选择器, 否则就是选择功能的 选择器. jQuery 选择器分为如下几类: [说明] 1.点击名称会跳转到此方法的 jQuery 官方说明文档. 2.可以在下节中的 jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素 Id 选择 $(divId) 选择 ID 为 divId 的元素 element 根据元素的名称选择, $(a) 选择所有a元素 .class 根据元素的 css 类选择 $(.bgRed) 选择所用 CSS 类为 bgRed 的元素 * 选择所有元素 $(*)选择页面所有元素 selector1, 可以将几个选择器用,分隔开然后再拼成一个 $(#divId, a, .bgRed) selector2, 选择器字符串.会同时选中这几个选择器匹配的 selectorN 内容. [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节jQuery 选择器实验室 进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询. 2.层次选择器 Hierarchy 名称 说明 举例 ancestor 使用form input的形式选中 form 中的所 $(.bgRed div) 选择 CSS 类为 descendant 有 input 元素.即 ancestor(祖先)为 from, bgRed 的元素中的所有div元素. descendant(子孙)为 input. parent child 选择 parent 的直接子节点 child. child 必 $(.myListli) 选择 CSS 类为 须包含在 parent 中并且父类是 parent 元 myList 元素中的直接子节点li对象. 素. prev + next prev 和 next 是两个同级别的元素. 选中在 $(#hibiscus+img)选在 id 为 prev 元素后面的 next 元素. hibiscus 元素后面的 img 对象. prev ~ siblings 选择prev后面的根据siblings过滤的元素 $(#someDiv~[title])选择 id 为 注:siblings 是过滤器 someDiv 的对象后面所有带有 title 属 性的元素 3.基本过滤器 Basic Filters 名称 说明 举例 :first 匹配找到的第一个元素 查找表格的第一行:$(tr:first) :last 匹配找到的最后一个元 查找表格的最后一行:$(tr:last) 素 :not(selector) 去除所有与给定选择器 查找所有未选中的 input 元素: 匹配的元素 $(input:not(:checked)) :even 匹配所有索引值为偶数 查找表格的 1、3、5...行:$(tr:even) 的元素，从 0 开始计数 :odd 匹配所有索引值为奇数 查找表格的 2、4、6 行:$(tr:odd) 的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的 查找第二行:$(tr:eq(1)) 元素 注:index 从 0 开始计数 :gt(index) 匹配所有大于给定索引 查找第二第三行，即索引值是 1 和 2，也就是比 0 值的元素 大:$(tr:gt(0)) 注:index 从 0 开始计数 :lt(index) 选择结果集中索引小于 查找第一第二行，即索引值是 0 和 1，也就是比 2 N 的 elements 小:$(tr:lt(2)) 注:index 从 0 开始计数 :header 选择所有 h1,h2,h3 一类 给页面内所有标题加上背景色: 的 header 标签. $(:header).css(background, #EEE); :animated 匹配所有正在执行动画 只有对不在执行动画效果的元素执行一个动画特效: 效果的元素 $(#run).click(function(){ $(div:not(:animated)).animate({ left: +=20 }, 1000); }); 4. 内容过滤器 Content Filters 名称 说明 举例 :contains(text) 匹配包含给定文本的元素