12月20号：jquery 选择器2

1，:first:选择第一个匹配的DOM元素。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3</div>
<br><br>
<button class="btn" onclick="jfirst()">:first</button>
<script>
    function jfirst() {
        var obj = $('div:first');
        console.log(obj);
    }
//结果：选中<div id="div_black" style=" background: #000;color: #fff">div1</div>
</script>

2，:eq(index)：在匹配的集合中选择索引值为index的元素。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3</div>
<br><br>
<button onclick="jeq()">:eq(index)</button>
<script>
    function jeq() {
        var obj = $('div:eq(0)');
        console.log(obj);
    }
//结果：选中<div id="div_black" style=" background: #000;color: #fff">div1</div>
</script>

3，:gt(index)：选择匹配集合中所有大于给定index（索引值）的元素，index: 从0开始计数的索引值。可以为负数，-index: 从0开始计数的索引值。 从最后一个元素开始反向计数。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
</div>
<p>P1</p>
<br><br>
<button onclick="jgt()">:gt(index)</button>
<script>
    function jgt() {
        var obj = $('div:gt(0)');
        console.log(obj);
    }
//选中<div id="div_red" style="background: #ff0000">div2</div><div id="div_green" style="background: green">div3</div>
</script>

4，:lt(index)：选择匹配集合中所有索引值小于给定index参数的元素。index: 从 0 开始计数的索引值。-index: 从0开始计数的索引值。 从最后一个元素开始反向计数。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
</div>
<p>P1</p>
<br><br>
<button onclick="jlt()">:lt(index)</button>
<script>
    function jlt() {
        var obj = $('div:lt(1)');
        console.log(obj);
    }
//选中<div id="div_black" style=" background: #000;color: #fff">div1</div>
</script>

5，:last：选择最后一个匹配的元素。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
    <div id="div_s1">div3_1</div>
</div>
<p>P1</p>
<br><br>
<button onclick="jlast()">:last</button>
<script>
    function jlast() {
        var obj = $('div:last');
        console.log(obj);
    }
    //选中<div id="div_s1">div3_1</div>
</script>

6，[attribute]：attribute: 一个属性名 ，选择所有具有指定属性的元素，该属性可以是任何值。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div class="myclass" id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
    <div id="div_s1">div3_1</div>
</div>
<p>P1</p>
<br><br>
<button onclick="jattr()">attribute</button>
<script>
    function jattr() {
        var obj = $('div[class]');
        console.log(obj);
    }
    //选中<div class="myclass" id="div_red" style="background: #ff0000">div2</div>
</script>

7，[attribute=value]：attribute: 一个属性名.value: 一个属性值。选择指定属性是给定值的元素。

• [attribute!='value']： (不等于)选择不存在指定属性
• [attribute^='value']：（指定字符开头）选择指定属性是以给定字符串开始的元素
• [attribute$='value']：（指定字符结尾）选择指定属性是以给定值结尾的元素
• [attribute*='value']：（模糊匹配）选择给定的属性是以包含某些值的元素

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div class="myclass" id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
    <div id="div_s1">div3_1</div>
</div>
<p>P1</p>
<br><br>
<button onclick="jattr()">attribute</button>
<script>
    function jattr() {
        var obj = $('div[class="myclass"]');
        console.log(obj);
    }
    //选中<div class="myclass" id="div_red" style="background: #ff0000">div2</div>
</script>

8，:first-child：选择所有父级元素下的第一个子元素。

<div id="div_black" style=" background: #000;color: #fff">div1</div>
<div class="myclass" id="div_red" style="background: #ff0000">div2</div>
<div id="div_green" style="background: green">div3
    <div id="div_s1">div3_1</div>
    <p class="p2">p2</p>
    <p class="p3">p3</p>
</div>
<p>P1</p>
<br><br>
<button onclick="first_child()">first-child</button>
<script>
    function first_child() {
        var obj = $('div div:first-child');
        console.log(obj);
    }
    //选中的是<div id="div_s1">div3_1</div>
    //如果obj = $('div p:first-child');这样定义 则选取不到任何元素，因为p标签不是第一个
</script>

9，:checked：匹配所有勾选的元素。适用于复选框 （checkbox） ，单选框（radio button）

10，:selected：匹配所有选中的option元素

<form>
    <div>
        <label>用户名</label>
        <input type="text" name="username">
    </div>
    <div>
        <label>密码</label>
        <input type="password" name="pwd">
    </div>
    <div>
        <label>再输一次</label>
        <input type="password" name="repwd">
    </div>
    <div>
        <label>性别</label>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女
    </div>
    <div>
        <label>籍贯</label>
        <select name="province">
            <option value="anhui">安徽</option>
            <option value="zhejiang">浙江</option>
            <option value="henan">河南</option>
            <option value="fujian" selected>福建</option>
        </select>
    </div>
    <div>
        <label>用户状态</label>
        <input type="checkbox" name="status" value="0">禁用
    </div>
    <button type="button" onclick="save()">保存</button>
</form>
<script>
function save() {
    var username = $('input[name="username"]').val();
    var pwd = $('input[name="pwd"]').val();
    var repwd = $('input[name="repwd"]').val();
    var sex = $('input[name="sex"]:checked').val();
    var select = $('select option:selected').text();
    var status = $('input[name="status"]:checked').val();
    if (username == ''){
        alert('请填写用户名');
        return;
    }
    if (pwd != repwd || pwd ==''){
        alert('两次密码不一致！');
        return;
    }
    if (sex == undefined){
        alert('请选择性别！');
        return;
    }
    if(status == undefined) {
        alert('请选择用户状态');
        return;
    }
     alert('用户名：' + username + ' 密码：' + pwd + ' 性别：'+ sex + ' 籍贯：' + select + ' 用户状态：' + status)
}
</script>