jQuery选择器

时间：2018-01-30 00:25:34 阅读：174 评论：0 收藏：0 [点我收藏+]

标签：set round 属性 log function 完整分享 isp blog

1.基本选择器示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function() {
                $("#btn1").click(function() {
                    $("#one").css("background-color", "pink");
                });

                $("#btn2").click(function() {
                    $(".mini").css("background-color", "pink");
                });

                $("#btn3").click(function() {
                    $("div").css("background-color", "pink");
                });

                $("#btn4").click(function() {
                    $("*").css("background-color", "pink");
                });

                $("#btn5").click(function() {
                    $("#two,.mini").css("background-color", "pink");
                });
            });
        </script>

    </head>

    <body>
        <input type="button" id="btn1" value="选择为one的元素" />
        <input type="button" id="btn2" value="选择样式为mini的元素" />
        <input type="button" id="btn3" value="选择所有的div元素" />
        <input type="button" id="btn4" value="选择所有元素" />
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素" />
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">
            
        </span>
    </body>

</html>

View Code

2.层级选择器示例（不完整示例，理解层级选择器方法即可）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn1").click(function() {
                    $("body div").css("background-color", "gold");
                });

                $("#btn2").click(function() {
                    $("body>div").css("background-color", "gold");
                });

                $("#btn3").click(function() {
                    $("#two+div").css("background-color", "gold");
                });

                $("#btn4").click(function() {
                    $("#one~div").css("background-color", "gold");
                });
            });
        </script>

    </head>

    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素" />
        <input type="button" id="btn2" value="选择body中的第一级的孩子" />
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素" />
    </body>

</html>

View Code

3.基本过滤选择器示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>过滤选择器</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div:first").css("background-color","red");
                });
                
                $("#btn2").click(function(){
                    $("body div:last").css("background-color","red");
                });
                
                $("#btn3").click(function(){
                    $("body div:odd").css("background-color","red");
                });
                
                $("#btn4").click(function(){
                    $("body div:even").css("background-color","red");
                });
            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一个div元素"/>
        <input type="button" id="btn2" value="body中的最后一个div元素"/>
        <input type="button" id="btn3" value="选择body中的奇数的div"/>
        <input type="button" id="btn4" value="选择body中的偶数的div"/>
    </body>
</html>

View Code

4.属性选择器示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function() {
                $("#btn1").click(function() {
                    $("div[id]").css("background-color", "red");
                });

                $("#btn2").click(function() {
                    $("div[id=‘one‘]").css("background-color", "red");
                });

            });
        </script>

    </head>

    <body>
        <input type="button" id="btn1" value="选择有id属性的div" />
        <input type="button" id="btn2" value="选择有id属性的值为one的div" />
    </body>

</html>

View Code

jQuery选择器

标签：set round 属性 log function 完整分享 isp blog

原文地址：https://www.cnblogs.com/xuyiqing/p/8379817.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行