jQuery过滤器选择器

阅读量: 260 编辑

jQuery过滤器选择器

一、jQuery过滤选择器写法

// 过滤器选择器
- $("li:first")                          // 标签li的第一个
- $("li:even")                         // 标签li的位置是偶数的
- $("a[href='start.html']")       // href='start.html' 的所有 a 标签
- $("a[href^='/jquery']")         // href以 /jquery 开头的所有 a 标签
    
// form表单选择器
- $(":input")                          // 所有的input标签
- $(":text")                            // 所有的text标签

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    </head>
    <body>

        <ul>
            <li>java</li>
            <li class="abc">python</li>
            <li>javascript</li>
            <li>html</li>
        </ul>

        <form>
            <div>name: <input type="text" value="name"></div>
            <div>password: <input type="password" value="password"></div>
            <div>address: <input type="text" value="address"></div>
        </form>

        <button onclick="doClick()">点击</button>

        <script type="text/javascript">
            function doClick(){
                // alert($('li:first').html())
                //
                // $.each($('li:even'),function () {
                //     alert($(this).html())
                // })
                //
                // alert($('li[class="abc"]').length)

                // :input
                $.each($(':text'),function(){
                    // $(this).val('1111');//赋值&取值
                    alert($(this).val())
                })
            }
        </script>
    </body>
</html>