认识jQuery选择器并应用基本选择器和基本过滤选择器

选择器的分类：

一、通过css选择器选取元素

1.基本选择器

2.层次选择器

3.属性选择器

二、通过过滤选择器选择元素

1.基本过滤选择器

2.可见性过滤选择器

3.表单对象过滤选择器

4.内容过滤选择器、子元素过滤选择器……

（一）基本选择器

1.标签选择器：

（1）语法构成：element

（2）描述：根据给定的标签名匹配元素

（3）示例：$(“h2” )选取所有h2元素

2.类选择器：

（1）语法构成：.class

（2）描述：根据给盯的class匹配元素

（3）示例：$(" .title")选取所有class为title的元素

3.ID选择器：

（1）语法构成：#id

（2）描述：根据给定的id匹配元素

（3）示例：$(" #title")选取id为title的元素

4.并集选择器：

（1）语法构成：selector1,selector2,…,selectorN

（2）描述：将每一个选择器匹配的元素合并后一起返回

（3）示例：$(“div,p,.title” )选取所有div、p和拥有class为title的元素

4.全局选择器：

（1）语法构成：*

（2）描述：匹配所有元素

（3）示例：$("*" )选取所有元素

<script type="text/javascript" src="JS/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //全局选择器
            $("*").css("font-size","30px");
            //标签选择器
            $("p").css("color","blue");
            //id选择器:id属性赋值要求唯一
            $("#a").css("font-weight","bold");
            //（类选择器）class选择器：class属性赋值允许重复
            $(".b").css("font-style","italic");
            //并集选择器：或者关系   ,
            $("#a,.b").css("background-color","yellow");
            //交集选择器：并且关系
            $("p#a").css("text-indent","2em");
        })
    </script>

（二）基本过滤选择器

eq()：

1.语法：:eq(index)

2.描述：选取索引等于index的元素（index从0开始）

3.示例：$(“li:eq(1)” )选取索引等于1的

• 元素

gt()：

1.语法：:gt(index)

2.描述：选取索引大于index的元素（index从0开始）

3.示例：$(" li:gt(1)" )选取索引大于1的

• 元素（注：大于1，不包括1）

lt()：

1.语法：:lt(index)

2.描述：选取索引小于index的元素（index从0开始）

3.示例：$(“li:lt(1)” )选取索引小于1的

• 元素（注：小于1，不包括1）

header：

1.语法：:header

2.描述：选取所有标题元素，如h1~h6

3.示例：$(":header" )选取网页中所有标题元素

focus：

1.语法：:focus

2.描述：选取当前获取焦点的元素

3.示例：$(":focus" )选取当前获取焦点的元素

animated：

1.语法：:animated

2.描述：选择所有动画

3.示例：$(":animated" )选取当前所有动画元素

<script type="text/javascript" src="JS/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*//li:first:第一个li
            $("li:first").css();
            //li:last:最后一个li
            $("li:last").css();
            //li:eq(2):下标为2的li
            $("li:eq(2)").css();
            //li:gt(2):下标大于2的li
            $("li:gt(2)").css();
            //li:lt(2):下标小于2的li
            $("li:lt(2)").css();
            //li:even:下标为偶数的li
            $("li:even").css();
            //li:odd:下标为奇数的li
            $("li:odd").css();*/
            //获取所有的标题  h1-h6
            $("body :header").css("color","red");
        })
    </script>