jQuery学习<三> — — 选择器（上）

一、基本选择器

id选择器：$(“#test”);
注意需要以#开头，才是根据id查询;
将id=test的Don对象存储到jQuery包装集并返回。（返回的是一个jQuery对象）;
标签选择器：$(“input”);
将所有input标签作为Dom对象存储到jQuery包装集并返回。
样式选择器：$(“.class1”);
将所有包含class=”class1”的Dom对象存储到jQuery包装集并返回
全选择器：$(“*”);
将所有标签作为Dom对象存储到jQuery包装集并返回。

<head>
<base href="<%=basePath%>">

<title>My JSP 'ad_selector1.jsp' starting page</title>
    <style type="text/css">
    .class1 {
        font-size: 15px;
    }
    .class2 {
        font-size: 25px;
    }
    </style>

<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    /****************基本选择器*************************/
    //id选择器 获取id=test1的标签
    function doSelector1() {
        var test1 = $("#test1");
        alert(test1.val()); //test1
    }
    //标签选择器 获取所有input标签
    function doSelector2() {
        var input = $("input");
        input.each(function() {
            alert(this.value); 
            //依次：test1，test2，test3，id选择器，标签选择器，class选择器，全选择器
        });
    }
    //class选择器  ：获取class="class1"的标签
    function doSelector3() {
        var class1 = $(".class1");
        class1.each(function() {
            alert(this.value); //依次：test1，test2
        });
    }
    //全选择器：获取所有标签
    function doSelector4() {
        var all = $("*");
        all.each(function() {
            alert(this.value);
        });
    }
</script>
</head>
<body>
    <div id="testDiv1">
        <input class="class1" type="text" id="test1" name="test1" value="test1"> 
        <input class="class1" type="text" id="test2" name="test2" value="test2"> 
        <input class="class2" type="text" id="test3" name="test3" value="test3"> 
        <input type="button" id="test4" name="test4" value="id选择器" onclick="doSelector1()"> 
        <input type="button" id="test5" name="test5" value="标签选择器" onclick="doSelector2()"> 
        <input type="button" id="test6" name="test6" value="类 选择器" onclick="doSelector3()"> 
        <input type="button" id="test7" name="test7" value="全选择器" onclick="doSelector4()">
    </div>
</body>

二、层级选择器

ancestor descendant选择器：$(“div[id=’testDiv2’] input”);
ancestor:任何有效的选择器
descendant:用来匹配最终获取元素的选择器，它必须是前一个选择器的后代元素。子孙元素
将匹配到的Dom对象放进jQuery包装集并返回。
parent > child选择器: $(“div[id=’testDiv2’] > input”);
parent:任何有效的选择器
child:用来匹配最终获取元素的选择器，它必须是前一个选择器的子元素。注意是子元素，不包括孙元素。
将匹配到的Dom对象放进jQuery包装集并返回。
prev + next选择器： $(“#testDiv2-1 + input”);
prev :任何有效的选择器 :
next:一个有效的选择器，并且必须是紧跟在prev元素后面。
将匹配到的Dom对象放进jQuery包装集并返回。
prev ~ siblings选择器 : $(“#test1 ~ input”);
prev :任何有效的选择器
siblings:一个有效的选择器，不需要紧跟prev元素，但是必须是和prev元素同级。
将匹配到的Dom对象放进jQuery包装集并返回。

<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector2.jsp' starting page</title>
    <style type="text/css">
    .class1 {
        font-size: 15px;
    }
    .class2 {
        font-size: 25px;
    }
</style>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    /*******************层级选择器*******************************/
    //ancestor descendant选择器：获取<div id="testDiv2">内所有的input标签，包括下一代下下一代下下下一代...
    function doSelector1(){
        var inputs = $("div[id='testDiv2'] input");
        inputs.each(function(){
                    alert(this.value);
                });
    }
    //parent > child选择器：获取<div id="testDiv2">下一层所有的input标签，只包含下一代，注意和ancestor descendant选择器区别
    function doSelector2(){
        var inputs = $("div[id='testDiv2'] > input");
        inputs.each(function(){
                    alert(this.value);
                });
    }
    //prev + next选择器：获取<div id="testDiv2-1" >后面紧跟的一个input标签，如果紧跟标签不是input，没有返回。
    function doSelector3(){
        var inputs = $("#testDiv2-1 + input");
        inputs.each(function(){
                    alert(this.value);  // test3,
                });
    }
    //prev ~ siblings选择器：获取<div id="test1" >后面所有跟其同级的input标签
    function doSelector4(){
        var inputs = $("#test1 ~ input");
        inputs.each(function(){
                    alert(this.value);  
                });
    }
</script>
</head>
<body>
    <div id="testDiv2">
        <input class="class1" type="text" id="test1" name="test1" value="test1"> 
        <div id="testDiv2-1" >
            <input class="class1" type="text" id="test2" name="test2" value="test2">
        </div>
        <input class="class1" type="text" id="test3" name="test3" value="test3"> <br>  
        <input type="button" id="test4" name="test4" value="ancestor descendant选择器" onclick="doSelector1()">
        <input type="button" id="test5" name="test5" value="parent > child选择器" onclick="doSelector2()">
        <input type="button" id="test6" name="test6" value="prev + next选择器" onclick="doSelector3()">
        <input type="button" id="test7" name="test7" value="prev ~ siblings选择器" onclick="doSelector4()">
    </div>
</body>

三、基本过滤选择器

:first选择器：$(“input:first”);
将匹配到的第一个input 作为Dom对象放进jQuery包装集并返回。
:last选择器：$(“input:last”);
将匹配到的最后一个input 作为Dom对象放进jQuery包装集并返回。
:last选择器：$(“input:not(.class1)”);
将匹配到的class!= “class1” 的input作为Dom对象放进jQuery包装集并返回。
:even选择器：$(“input:even”);
将匹配到的第偶数个input（0、2、4…）作为Dom对象放进jQuery包装集并返回。注意从0开始
:even选择器：$(“input:odd”);
将匹配到的第奇数个input（1、3、5…）作为Dom对象放进jQuery包装集并返回。注意从0开始
:eq选择器：$(“input:eq(1)”);
将匹配到的索引值为1的input作为Dom对象放进jQuery包装集并返回。注意从0开始
:gt选择器：$(“input:gt(5)”);
将匹配到的索引值大于5的input（不包括5，并且从0开始，即第7个input开始获取）作为Dom对象放进jQuery包装集并返回。
:lt选择器：$(“input:lt(3)”);
将匹配到的索引值小于3的input（0、1、2）作为Dom对象放进jQuery包装集并返回。注意从0开始
:header选择器：$(“:header”);
将匹配到的< h1> < 2>这类标题标签作为Dom对象放进jQuery包装集并返回。
:animated选择器(理解中，后期补上)

<head>
<base href="<%=basePath%>">

<title>My JSP 'ad_selector2.jsp' starting page</title>
    <style type="text/css">
    .class1 {
        font-size: 15px;
    }
    .class2 {
        font-size: 25px;
    }
    </style>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    /*******************基本过滤选择器*******************************/
        //获取第一个input标签 
        function doSelector1(){
            var first = $("input:first");
            alert(first.val());
        }
        //获取最后一个input标签
        function doSelector2(){
            var last = $("input:last");
            alert(last.val());
        }
        //获取 去除所有与给定选择器（.class1）匹配的元素后剩下的input元素
        function doSelector3(){
            var test3 = $("input:not(.class1)");
            test3.each(function(){
                        alert(this.value);
                    });
        }
        //获取所有索引值为偶数的元素，从 0 开始计数 （0,2,4...）
        function doSelector4(){
            var test4 = $("div input:even");
            test4.each(function(){
                            alert(this.value);
                        });
        }
        //获取所有索引值为奇数的元素，从 0 开始计数 (1,3,5...)
        function doSelector5(){
            var test5 = $("div input:odd");
            test5.each(function(){
                            alert(this.value);
                        });
        }
        //获取一个给定索引值的元素 （div内第2个input，因为是从0开始）
        function doSelector6(){
            var test6 = $("div input:eq(1)");
            test6.each(function(){
                            alert(this.value);
                        });
        }
        //获取所有大于给定索引值的元素 （索引值大于5的元素，不包括5。从第7个元素开始返回，因为从0开始）
        function doSelector7(){
            var test7 = $("div input:gt(5)");
            test7.each(function(){
                            alert(this.value);
                        });
        }
        //获取所有小于给定索引值的元素 （索引值小于3，不包括3，返回第0，1，2个input元素）
        function doSelector8(){
            var test8 = $("div input:lt(3)");
            test8.each(function(){
                            alert(this.value);
                        });
        }
        //获取如 h1的标题元素
        function doSelector9(){
            var test9 = $(":header");
            test9.each(function(){
                            alert($(this).text());
                        });
        }
        //:animated(理解中)
    </script>

</head>
<body>
    <h1>111</h1>
    <div id="testDiv2">
        <input class="class1" type="text" id="test1" name="test1" value="test1" > 
        <div id="testDiv2-1"  >
            <input class="class1" type="text" id="test2" name="test2" value="test2">
        </div>
        <input class="class1" type="text" id="test3" name="test3" value="test3">  <br>
        <input type="button" id="test4" name="test4" value=":first选择器" onclick="doSelector1()">
        <input type="button" id="test5" name="test5" value=":last选择器" onclick="doSelector2()">
        <input type="button" id="test6" name="test6" value=":not选择器" onclick="doSelector3()">
        <input type="button" id="test7" name="test7" value=":even选择器" onclick="doSelector4()">
        <input type="button" id="test8" name="test8" value=":odd选择器" onclick="doSelector5()"><br>
        <input type="button" id="test9" name="test9" value=":eq选择器" onclick="doSelector6()">
        <input type="button" id="test10" name="test10" value=":gt选择器" onclick="doSelector7()">
        <input type="button" id="test11" name="test11" value=":lt选择器" onclick="doSelector8()">
        <input type="button" id="test12" name="test12" value=":header选择器" onclick="doSelector9()">
        <!-- <input type="button" id="test13" name="test13" value=":animated选择器" onclick="doSelector10()"> -->
    </div>

</body>

jQuery学习<三> — — 选择器（上）

一、基本选择器

二、层级选择器

三、基本过滤选择器

猜你喜欢