jQuery选择器（一）

选择器（类、标签选择器）

1、给设置c1的样式字体颜色变红色

1 <body>
2     <input type="button" value="我是一个按钮" id="btn"/>
3     <div class="c1">jquery1</div>
4     <div class="c1">jquery2</div>
5     <div class="c1">jquery3</div>
6     <div>jquery4</div>
7 </body>

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $(".c1").css("color","#f00");
5     });
6 });

2、给所有的div样式字体变蓝色

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("div").css("color","blue");
5     });
6 });

3、隔行换色效果

 1  <input type="button" value="我是一个按钮" id="btn"/>
 2     <table id="tab">
 3         <tr><th>姓名</th><th>学号</th><th>年龄</th><th>班级</th></tr>
 4         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
 5         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
 6         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
 7         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
 8         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
 9         <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr>
10     </table>

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("#tab tr:odd").css("background-color", "#00ffff");
5         $("#tab tr:even").css("background-color", "#ffd800");//偶数 从0开始
6     });
7 });

4、第一列（表格为例）

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("#tab td:nth-child(1),#tab th:nth-child(1)").css("background-color", "#00ffff");
5     });
6 });

5、标签下面的子元素用>表示

1 <input type="button" value="我是一个按钮" id="btn"/>
2      <div id="cid">
3           <a href="">你好1</a>
4          <div class="c2"><a href="">你好2</a></div>
5          <a href="">你好3</a>
6      </div>

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("#cid>a").css("color","#f00");
5     });
6 });

6、属性选择器

设置title属性的a

1 <input type="button" value="我是一个按钮" id="btn"/>
2      <div id="cid">
3           <a href="www.sina.com">你好1</a>
4          <a href="http:www.soso.com">你好2</a>
5          <a href="hhtp://www.baidu.com" title="">你好3</a>
6          <a href="www.baidu.com">你好4</a>
7      </div>

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("#cid a[title]").css("color","#f00");
5     });
6 });

1  <input type="button" value="我是一个按钮" id="btn"/>
2      <div id="cid">
3           <a href="www.sina.com">你好1</a>
4          <a href="http:www.soso.cn">你好2</a>
5          <a href="hhtp://www.baidu.com" title="">你好3</a>
6          <a href="www.baidu.com">你好4</a>
7      </div>

 1 /// <reference path="_references.js" />
 2 $(function () {
 3     $("#btn").click(function () {
 4         $("#cid a[href^=www]").css("color", "#f00");//^=以...开头
 5         $("#cid a[href$=cn]").css("color", "#f00");//$=以...结尾
 6         $("#cid a[href*=baidu]").css("color", "#f00");//*=包含
 7        $("#cid a[href='www.sina.com'").css("color", "#f00");//等于 加单引号
 8 
 9     });
10 });

7、包含选择器 has

1 $(function () {
2     $("#btn").click(function () {
3         $("ul li:has(a)").css("background-color","#f00");
4     });
5 });

8、位置选择器(first last first-child last-child)

first-child:父标签的第一个子标签

1 /// <reference path="_references.js" />
2 $(function () {
3     $("#btn").click(function () {
4         $("p:first").css("color","#f00");
5     });
6 });

/// <reference path="_references.js" />
$(function () {
    $("#btn").click(function () {
        $("p:last").css("color","#0f0");
    });
});

/// <reference path="_references.js" />
$(function () {
    $("#btn").click(function () {
        $("p:first-child").css("color","#0f0");
    });
});

9、trim（）去空格

/// <reference path="_references.js" />
$(function () {
    $("#btn").click(function () {
        var sInput =$.trim( $("#txt").val());
       alert(sInput);
    });
});

去掉中间空格

/// <reference path="_references.js" />
$(function () {
    $("#btn").click(function () {
        var sInput =$.trim( $("#txt").val());
        var aInput = sInput.split('');
        for (var i = 0; i < aInput.length;i++){
            if(aInput[i]==" "){
                sInput = sInput.replace(" ", "");
            }
        }
        alert(sInput);
    });
});