jQuery选择器 简单选择器、关系选择器、伪类选择器、属性选择器

jQuery选择器

可在 http://jquery.cuishifeng.cn/ jQuery API中文文档中查看对应信息

简单选择器

• 1、id选择器    #id

      var $box = $("#box");

• 2、类名选择器   .class

      var $boxs = $(".box");

• 3、标签选择器     div等标签名
      比如 $(“div”);
• 4、通配符选择器    *
     注意事项：

        // 1.通配选择器不能直接用
        $("*").css({
            backgroundColor : "#f99"
        })  //错误
        // 2.通配选择器都是限定范围进行使用的
        $(".list *").css({
            backgroundColor : "#f99"
        })

• 5、群组选择器 seletor1,selector2,selector3,

     $("#box,.box,.list *")

---

关系选择器

关系选择器的使用方案分成两种:
1、第一种：选择符选择

1. 后代选择器 selector children

2. 直接子集选择器 selector>children

3. 兄弟选择器
   selector+next 下一个
   selector~next 下面所有

   示例：

		 $(".box div").css({
            background : "pink"
            // 所以的子 儿子、孙子...都变
        })
        $(".box>div").css({
            background : "skyblue"
            // 只有 儿子变
        })
        $(".box+.pox").css({
            height : "+=100"
            // box下的第一个pox改变
        })
        $(".box~.pox").css({
            background : "yellowgreen"
            // box下的所有pox都变
        })

2、第二种：简写API选择
1）父

• parent() 父级元素
• parents() 父亲们
              如果不加上一个限制条件的话会一直向外寻找父级,直到html
              如果()里写上限制，只在那个限制上有效
• parentsUtill() 到哪个父级为止，范围内的所有父级都有效

2）子

• children() 只有儿子
• find(必须有条件) 所有与指定表达式匹配的元素

3）兄

• prev() 紧邻的前一个同辈元素的元素集合。
  只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
• prevAll() 查找当前元素之前所有的同辈元素
• prevUntil() 当前元素之前->到匹配的那个元素为止(左右都不包含)

4）弟

• next() 后面紧邻的第一个同辈
• nextAll()查找当前元素之后所有的同辈元素
• nextUntil()查找当前元素之后的-直到遇到匹配的那个同辈元素为止(左右不包含)

示例： 父

        // 1.$(".son").parent()返回值就是son的父级元素
        // $(".son").parent().css({
        //     background : "pink"
        // })
        // // 2.parents()父亲们
        // $(".son").parents().css({
        //     borderWidth : 10
        // })
        // // 父级之中的 box
        // $(".son").parents(".box").css({
        //     borderWidth : 10
        // })
        // // 3.parentsUtil()到哪个父级为止，左右不包含
        $(".son").parentsUntil(".box").css({
            borderWidth : 10
        })

---

伪类选择器

伪类选择器（过滤器）
          写法： 选择器:过滤条件
1、位置过滤
      :first   获取第一个元素
      :last   最后一个元素
2、下标过滤           涉及到下标值/索引值index的 都从0开始计数
     :eq(n)    n指下标 匹配一个给定索引值的元素
3、奇偶数过滤 ps.可以直接实现隔行变色
     :odd   匹配所有索引值为奇数的元素
     :even   所有索引值为偶数的元素
4、范围过滤
      :lt(n)   <n 所有小于给定索引值n的元素(不包含n呐)
      :gt(n)   >n 所有大于给定索引值的元素
5、内容过滤
      :contains(text)    匹配包含指定文本的元素
6、:has() 判定某个元素之中是否存在某些内容
示例：

        // 位置过滤
        $("div:first").css({
             backgroundColor : "skyblue"
        });
        $("div:last").css({
             backgroundColor : "skyblue"
        })
        // 范围过滤
        $("div:lt(3)").css({
             backgroundColor : "yellowgreen"
        })
        $("div:gt(3)").css({
             backgroundColor : "blue"
        })

---

属性选择器

[属性attribute]   匹配包含指定属性的元素
[attr=value]    指定属性是某个特定值的元素
[attr!=value]    匹配所有不含有指定的属性or属性不等于特定值的元素
[attr^=value]    属性是以某些值 开头 的元素
[attr$=value]    某些值 结尾
[attr*=value]    属性是 包含 某些值的元素
以上都可以多个连续组合使用[][]…

示例:

        $("div[data=hello][class=active]").css({
            backgroundColor : "red"
        })