jquery选择器

一 基本选择器
1.id选择器
语法：$(#id名称) 匹配指定id名称
把id名称为box1的盒子背景颜色设置为红色

<div id="box1">box1</div>
    <div id="box2">box2</div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("#box1").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图

2.元素选择器
语法：$(标签名) 匹配指定标签名
把div盒子背景颜色设置为红色

	<div>box1</div>
    <span>box2</span>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("div").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

3.类型选择器
语法：$(.class名) 匹配指定的class名的标签
把class名为box1的背景颜色设置为红色

<div class="box1">box1</div>
    <div class="box2">box2</div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $(".box1").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

4.通配符选择器
语法：$(*) 匹配所有的元素
因为是通配符选择器所以会获取到body标签所以这个页面背景颜色都会变红

<div class="box1">box1</div>
    <div class="box2">box2</div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("*").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

5.组合选择器
语法：$(选择器1,选择器2,…) 即可匹配多个元素，里面的选择器可以是标签名，id名，class名中间使用英文逗号隔开
将id名weibox1，class名为box4和span标签的背景颜色设置为红色

<div id="box1">box1</div>
    <div class="box2">box2</div>
    <span class="box3">box3</span>
    <div class="box4">box4</div>
    <p class="box5">box5</p>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("#box1,.box4,span").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

二，层级选择器
1.语法：$((父级)选择器1 选择器2) 在指定父元素下匹配所有的后代元素
找到body下面class为box4的元素背景颜色为红色

<div id="box1">box1</div>
    <div class="box2">box2</div>
    <span class="box3">box3</span>
    <div class="box4">box4</div>
    <p class="box5">box5</p>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("body .box4").css({
            backgroundColor:'red',
        })
    });

效果图：

2.语法：$((父级)选择器1>选择器2) 在指定父元素下匹配所有的子元素
找到body下面class为box2的元素背景颜色为红色

<div id="box1">box1</div>
    <div class="box2">box2</div>
    <span class="box3">box3</span>
    <div class="box4">box4</div>
    <p class="box5">box5</p>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("body>.box2").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：
。
3.语法：$((选择器1+选择器2) 匹配所有紧挨着在 选择器1元素后的选择器2元素
匹配box2后面的box3元素的背景颜色设置为红色

<div id="box1">box1</div>
    <div class="box2">box2</div>
    <span class="box3">box3</span>
    <div class="box4">box4</div>
    <p class="box5">box5</p>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $(".box2+.box3").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

三.伪类选择器
1.:first 获取第一个元素

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("li:first").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

2.:last 获取最后一个元素

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("li:last").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

3.:even 匹配所有索引值为偶数的元素，从 0 开始

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("li:even").css({
            backgroundColor:'red',
        })
    });
    </script>

效果图：

4.:odd 匹配所有索引值为奇数的元素，从 0 开始

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
       $(function () {
        $("li:odd").css({
            backgroundColor:'red',
        })
    });
    </script>