jquery_02 选择器.doc

一切从选择器开始 操作之前，必先选中！！！ 选择器语法： $(expression 表达式 ) jQuery内部提供了9种选择器 基本选择器 层级选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单过滤选择器 表单对象属性过滤选择器 如果CSS3 选择器有基础 ，JQuery选择器 非常好学！！ 基本选择器 基本选择器，是jquery所有选择器的基础，通过元素标签id属性、class属性、标签名称进行选择。 #id 根据id属性查找一个元素 例如：$(#mydiv) .class 根据class属性查找元素 例如：$(.myClass); element 根据元素标签名称查找所有元素 例如： $(div); * 匹配所有元素 例如 $(*); selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回 例如：$(“div, p); $(“#itcast”) 选择id属性为itcast的元素 “.dellink”) 选择class属性为dellink的元素 “p”) 选择标签名称为p的元素 “p,div”) 选择页面所有p和div元素 层次选择器 层次选择器是根据DOM元素的层级关系，通过后代元素、子元素、兄弟元素进行选择 两个元素位置关系 祖先 后代 父元素 子元素 兄弟元素 ancestor descendant 获取ancestor元素下边的所有元素 $(form input) parent child 获取parent元素下边的所有直接child 子元素 $(form input) prev + next 获取紧随pre元素的后一个兄弟元素 $(label + input) prev ~ siblings 获取pre元素后边的所有兄弟元素 $(form ~ input) 空格 ： 后代元素（直接子元素、间接子元素 ） 大于 ： 直接子元素 + 紧随下一个兄弟元素 ~ 所有后边的兄弟元素 【事例代码】 HTML代码： body div class=itcast adiv link/a p info ap link/a /p /div alink/a p class=itcast ap link/a /p alink/a /body 需求： // 1．将class属性值为itcast的元素下所有a元素字体变为红色 // 2．将class属性值为itcast的元素下直接a元素字体变为蓝色 // 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px 脚本代码： 过滤器 过滤器 在基本选择器和层次选择器 选中一批元素后，通过过滤选择器缩小选中范围 ！ 通常语言： 编写 “:” 添加过滤条件 按照不同的过滤规则，过滤选择器被分为七类 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单过滤选择器 表单对象属性过滤选择器 基本过滤选择器 大部分都是根据元素位置 索引，缩小选中范围 :first 选取第一个元素 $(tr:first) :last 选取最后一个元素 $(tr:last) :not(selector) 去除所有与给定选择器匹配的元素 $(input:not(:checked)) :even 选取所有元素中偶数索引的元素，从 0 开始计数 $(tr:even) :odd 选取所有元素中奇数索引的元素 ，从 0 开始计数 $(tr:odd) :eq(index) 选取指定索引的元素 $(tr:eq(1)) :gt(index) 选取索引大于指定index的元素 $(tr:gt(0)) :lt(index) 选取索引小于指定index的元素 $(tr:lt(2)) :header 选取所有的标题元素 如：h1, h2, h3 $(:header) :animated 匹配所有正在执行动画效果的元素 【示例代码】 HTML代码： h1表格信息/h1 h2这是一张商品表/h2 table border=1 width=600 tr th商品编号/th th商品名称/th th售价/th th数量/th /tr tr td001/td td冰箱/td td3000/td td100/td /tr tr td002/td td洗衣机/td td2000/td td50/td /tr tr td003/t