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

jQuery选择器

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

1、简单选择器

　　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) 群组选择器  selector1,selector2,selector3,

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

---

2、关系选择器

关系选择器的使用方案分成两种：

第一种：选择符选择

　　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都变
        })

第二种：简写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
        })

---

3、伪类选择器

　　伪类选择器（过滤器）

　　　　写法： 选择器:过滤条件

　　1)位置过滤

　　　　:first  获取第一个元素

　　　　:last  最后一个元素

　　2)下标过滤 　　　　  【涉及到下标值/索引值index的 都从0开始计数】

　　　　:eq(n)   n指下标 匹配一个给定索引值的元素

　　3)奇偶数过滤 

　　　　: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"
        })

---

4、属性选择器

　　[属性attribute]  匹配包含指定属性的元素

　　[attr=value]  指定属性是某个特定值的元素

　　[attr!=value]  匹配所有不含有指定的属性or属性不等于特定值的元素

　　[attr^=value]  属性是以某些值 开头 的元素

　　[attr$=value]  某些值 结尾

　　[attr*=value]  属性是 包含 某些值的元素

　　以上都可以多个连续组合使用[][]..

　　示例：

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