12月20日_jQuery选择器（基本筛选器、属性选择器和表单对象属性）

一、基本筛选器

1. :first

获取匹配的第一个元素
HTML代码：

<div>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

JavaScript代码：

    var p = $('p:first');
    console.log(p);

运行结果：

2. :eq(index)

匹配一个给定索引值的元素
HTML代码：

<ul>
    <li id="p1">li1</li>
    <li id="p2">li2</li>
    <li id="p3">pli3</li>
</ul>

JavaScript代码：

    console.log($('li:eq(0)'));
    console.log($('ul li:eq(1)'));
    console.log($('ul li:eq(2)'));

运行结果

3. :gt(index)

匹配所有大于给定索引值的元素
HTML代码：

<div id="div1">
    <p id="p1">div_p1</p>
    <p id="p2">div_p2</p>
    <p id="p3">div_p3</p>
</div>
<p id="p4">p4</p>

JavaScript代码：

    console.log($('p:gt(1)'));
    console.log($('#div1 p:gt(0)'));

运行结果

4. :lt(index)

匹配所有小于给定索引值的元素
HTML代码：

<div id="div1">
    <p id="p1">div_p1</p>
    <p id="p2">div_p2</p>
    <p id="p3">div_p3</p>
</div>
<p id="p4">p4</p>

JavaScript代码：

    console.log($('p:lt(3)'));
    console.log($('div p:lt(2)'));

运行结果

5. :last

获取最后个元素
HTML代码：

<ul>
    <li id="li1">li1</li>
    <li id="li2">li2</li>
    <li id="li3">li3</li>
    <li id="li4">li4</li>
    <li id="li5">li5</li>
</ul>

JavaScript代码：

    console.log($('li:last'));

运行结果

二、属性选择器

1. [attribute]

匹配包含给定属性的元素
HTML代码：

<div id="d1">
    <div id="d1d1">d1d1</div>
    <div>d1d2</div>
</div>
<div id="d2">d2</div>
<div>d3</div>

JavaScript代码：

    console.log($('div[id]'));

运行结果

2. [attribute=value]

匹配给定的属性是某个特定值的元素
HTML代码：

<form>
    <input type="text" id="username" name="username" value="admin">
    <input type="password" id="pwd" name="pwd" value="123456">
    <button>提交</button>
</form>

JavaScript代码：

    console.log($('input[name="username"]'));
    console.log($('input[name="pwd"]'));

运行结果

3. [attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素
HTML代码：

<div class="mydiv">
    <div class="mydiv_1"></div>
    <div class="mydiv"></div>
    <div id="mydiv_2"></div>
</div>
<div id="mydiv2"></div>
<div></div>

JavaScript代码：

    console.log($('div[class!="mydiv"]'));

运行结果

4. [attribute^=value]

匹配给定的属性是以某些值开始的元素
HTML代码：

<form>
    <input type="text" name="newsinput1" id="newsinput1">
    <input type="text" name="laoinput2" id="laoinput2">
    <input type="text" name="newsinput3" id="newsinput3">
</form>

JavaScript代码：

    console.log($('input[name^="news"]'));

运行结果

5. [attribute$=value]

匹配给定的属性是以某些值结尾的元素
HTML代码：

<div>
    <p id="red_color" class="red_color">p1</p>
    <p id="blue_color" class="blue_color">p2</p>
    <p id="green_color" class="green_color">p3</p>
</div>
<p id="yellow_color" class="yellow_color">span1</p>

JavaScript代码：

    console.log($('div p[class$="color"]'));

运行结果

6. [attribute*=value]

匹配给定的属性是以包含某些值的元素
HTML代码：

<div id="div1" class="btn btn-lg">
    <p id="p1" class="btn-lg s_tab smallp1">p1</p>
    <div class="btn-lg s_tab"></div>
    <p class="smallp2">p2</p>
    <p class="smallp3">p3</p>
    <p class="bigp4">p4</p>
</div>

JavaScript代码：

    console.log($('div[class*="btn-lg"]'));
    console.log($('p[class*="small"]'));

运行结果

三、表单对象属性

1. :checked

匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

2. :selected

匹配所有选中的option元素
HTML代码：

<form>
    <p>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" value="">
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="pwd" value="">
    </p>
    <p>
        <label for="repwd">确认密码：</label>
        <input type="password" id="repwd" name="repwd" value="">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="hobby" value="basktball">篮球
        <input type="checkbox" name="hobby" value="soccer">足球
        <input type="checkbox" name="hobby" value="ping_pong">乒乓球
    </p>
    <p>
        <label>籍贯：</label>
        <select name="province">
            <option value="">请选择</option>
            <option value="sd">山东</option>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>
    </p>
    <button type="button" onclick="record()">提交</button>
</form>

JavaScript代码：

    function record() {
        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 hobby = $('input[name="hobby"]:checked').val();
        var province = $('select[name="province"] option:selected').val();
        if (username == '') {
            alert("用户名不能为空！");
            return;
        }
        if (pwd == ''){
            alert("密码不能为空！");
            return;
        }
        if (repwd == ''){
            alert("请再次输入密码！");
            return;
        }
        if (repwd != pwd){
            alert("两次密码不一致！");
            return;
        }
        if (sex == undefined){
            alert("请选择性别");
            return;
        }
        if (hobby == undefined){
            alert("请选择爱好");
            return;
        }
        if (province == ''){
            alert("请选择籍贯");
            return;
        }
        alert("注册成功！");
    }

运行结果

四、总结

学会了一些常用的基本筛选器、属性选择器和表单对象属性。