JQuery选择器学习总结（二）

1.遍历选择器

（1）:first 第一个控件
$("p:first").css("font-size","30px");

（2）:last 最后一个控件
$("p:last").css("background-color","#666");

（3）:even 偶数个控件
$("p:even").css("color","green");

（4）:odd 奇数个控件
$("p:odd").css("color","blue");

（5）:eq(n) 第n+1个控件

$("p:eq(0)").css("color","pink");

（6）:gt(n) 第n+1个控件之后

$("p:gt(1)").append("这是一个测试！");

（7）:lt(n) 第n个控件之前（n为负数时为倒数）

$("p:lt(-1)").text("这就是一个测试");

（8）:not(表达式) 取反

$("p:not(p:eq(1))").css("background-color","olive");

2.内容选择器：:contains(text)

$("p:contains('四')").text("今天放假");

3.空选择器（不包含子元素或文本的元素）：:empty

$("p:empty").text("我是空的");

4.属性选择器：[属性=’属性值’]

$("[type='button']").css("background","linear-gradient(to bottom,#EB56AA,white)");

5.选中选择器：

（1）:checked
（2）:selected（针对下拉列表）

$("[type='button']").click(function() {
        console.log($("#t1 [name='sex']:checked").val());
        console.log($("#address :selected").val());
    });

html代码：

<p>第一行</p>
   <p>第二行</p>
   <p>第三行</p>
   <p>第四行</p>

   <p></p>
   <p></p>
   <p></p>

   <input type="text"  />
   <input type="button" value="设置" />
   <input type="checkbox" value="sport"/>sport

   <div id="t1">
      <input type="radio" name="sex" value="男" />男
      <input type="radio" name="sex" value="女" />女
   </div>

   <div>
       <select id="address">
            <option>吉林</option>
            <option>北京</option>
            <option>天津</option>
            <option>辽宁</option>
       </select>
   </div>