码迷，mamicode.com
首页 > Web开发 > 详细

JQuery选择器练习

时间：2020-01-11 00:22:24      阅读：142      评论：0      收藏：0      [点我收藏+]

标签：java   visible   asc   文本   打印   个数   radio   密码   选择   

 

<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
    font-family: "微软雅黑"
}
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    width: 40px;
    height: 43px;
    background: #CC66FF;
    border: #000 1px solid;
    font-size: 12px;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    /* $(function(){
        
    }) */
    //让整个页面加载完成
    $(document).ready(function() {
        /* ---------基本选择器练习--------- */
        //改变元素名为 <div> 的所有元素的背景色为 #FF69B4"  id="b1"
        $("#b1").click(function(){
            $("div").css("background-color","#FF69B4");
        })
        //改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
         $("#b2").click(function(){
            $("#one").css("background-color",
                    "#9ACD32");
         });
        //改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
         $("#b3").click(function(){
            $(".mini").css("background-color",
                    "#FF0033");
         });

        //改变所有元素的背景色为 #FDF5E6"  id="b4"
        $("#b4").click(function(){
            $("*").css("background-color",
                    "#FDF5E6");
         });

        //改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"  id="b5"
         $("#b5").click(function(){
            $("span,#two").css("background-color",
                    "#FF1493");
         });
        //改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b6"
         $("#b6").click(function(){
                $("span,#two,#one,.mini").css("background-color",
                        "#006400");
        });
    });
</script>
</head>

<body>
    <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
    <input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
    <input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
    <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
        id="b5" />
    <input type="button"
        value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
        id="b6" />


    <h1>天气冷了</h1>
    <h2>天气又冷了</h2>

    <div id="one">id为one</div>

    <div id="two" class="mini">
        id为two class是 mini
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">动画</div>
    <br>
    <span class="spanone"> span </span>
    <span class="mini"> span class是mini </span>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $().ready(function() {
        /* ---------层级选择器练习--------- */
        //改变 <body> 内所有 <div> 的背景色为 #F08080"  id="b1"
        $("#b1").click(function(){
            $("body div").css("background-color",
                    "#F08080");
        });

        //改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"
        $("#b2").click(function(){
            $("body>div").css("background-color",
                    "#FF0033");
        });
        

        //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"
        $("#b3").click(function(){
            $("#one").next("div").css("background-color",
                    "#0000FF");
        });
        

        //改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32"  id="b4"
        $("#b4").click(function(){
            $("#two").nextAll("div").css("background-color",
                    "#9ACD32");
        });
        //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"  id="b5"
        $("#b5").click(function(){
            $("#two").siblings("div").css("background-color",
                    "#FF6347");
        });
    })
</script>
</head>

<body>
    <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
    <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
    <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
        id="b3" />
    <input type="button"
        value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
    <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
        id="b5" />

    <h1>天气冷了</h1>

    <div id="one">id为one</div>

    <div id="two">
        id为two
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">动画</div>
    <br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function() {
        /* ---------基本过滤选择器练习--------- */
        //改变第一个 div 元素的背景色为 #FF6347"  id="b1"
        $("#b1").click(function(){
            $("div:first").css("background-color",
                    "#FF6347"); 
        });

        //改变最后一个 div 元素的背景色为 #9ACD32" id="b2" 
        $("#b2").click(function(){
            $("div:last").css("background-color",
                    "#9ACD32"); 
        });

        //改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" 
        $("#b3").click(function(){
            $("div:not(.one)").css("background-color",
                    "#FF0033"); 
        });

        //改变索引值为等于 3 的 div 元素的背景色为 #006400"  id="b4" 
        $("#b4").click(function(){
            $("div:eq(3)").css("background-color",
                    "#006400"); 
        });

        //改变索引值为小于 3 的 div 元素的背景色为 #FF69B4"  id="b5"/>
        $("#b5").click(function(){
            $("div:lt(3)").css("background-color",
                    "#FF69B4"); 
        });
        
        //改变索引值为大于 3 的 div 元素的背景色为 #F08080"  id="b6"
        $("#b6").click(function(){
            $("div:gt(3)").css("background-color",
                    "#F08080"); 
        });
        
        //改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
        $("#b7").click(function(){
            $("div:even").css("background-color",
                    "#FF6347"); 
        });
        
        //改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
        $("#b8").click(function(){
            $("div:odd").css("background-color",
                    "#FF1493"); 
        });
        
    })
</script>
</head>

<body>
    <input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" />
    <input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" />
    <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" />
    <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" />
    <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" />
    <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" />
    <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" />

    <h1>天气冷了</h1>

    <div id="one">id为one</div>

    <div id="two">
        id为two
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one" title="aa">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">动画</div>
    <br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>内容选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function() {
        /* ---------内容选择器--------- */
        //改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div>
        $("#b1").click(function(){
            $("div:contains(‘id‘)").css("background-color",
                    "#FF6347"); 
        });
        //改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
        $("#b2").click(function(){
            $("div:empty").css("background-color",
                    "#9ACD32"); 
        });
        

        //改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
        $("#b3").click(function(){
            $("div:has(div)").css("background-color",
                    "#FF0033"); 
        });
        //改变非空div元素的背景色为 #006400" id="b4"
        $("#b4").click(function(){
            $("div:parent").css("background-color",
                    "#006400"); 
        });
        

        //====================================================

        /* ---------可见选择器练习--------- */
        //改变所有可见 div 元素背景色为 #F08080" id="b5"
        $("#b5").click(function(){
            $("div:visible").css("background-color",
                    "#F08080"); 
        });
        //让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
        $("#b6").click(function(){
            $("div:hidden").show().css("background-color",
            "#FF69B4");
        });
        
        
    })
</script>
</head>

<body>
    <input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" />
    <input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" />
    
    <input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" />

    <hr/>
    <hr/>

    <input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" />
    <input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" />

    <h1>天气冷了</h1>

    <div id="one">id为one</div>

    <div id="two">
        id为two
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one" title="aa">
        class是 one
        <div class="mini"></div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover"></div>
    <br>
    <div style="display:none">看不见我...,看不见我....</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function() {
        /* ---------属性选择器练习--------- */
        //改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
        $("#b1").click(function(){
            $("div[id]").css("background-color",
                    "#FF6347"); 
        });
        //改变包含属性title=‘aa‘ 的div 元素的背景色为 #9ACD32" id="b2"
        $("#b2").click(function(){
            $("div[title=‘aa‘]").css("background-color",
                    "#9ACD32"); 
        });
        
        //改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" 
        $("#b3").click(function(){
            $("input[type!=‘button‘]").css("background-color",
                    "#FF0033"); 
        });

        //=================================================

        /* ---------子元素选择器练习--------- */

        //改变div 第二个子元素的背景色为 #006400"  id="b4"
        $("#b4").click(function(){
            $("div:nth-child(2)").css("background-color",
                    "#006400"); 
        });
        //改变div 第一个子元素的背景色为 #FF69B4"  id="b5"
        $("#b5").click(function(){
            $("div:first-child").css("background-color",
                    "#FF69B4"); 
        });

        
    })
</script>
</head>

<body>
    <input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" />
    <input type="button" value=" 改变包含属性title=‘aa‘ 的div 元素的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" />

    <hr/>
    <hr/>

    
    <input type="button" value=" 改变div 第二个子元素的背景色为 #006400"  id="b4" />
    <input type="button" value=" 改变div 第一个子元素的背景色为 #FF69B4"  id="b5" />

    <h1>天气冷了</h1>

    <div id="one">id为one</div>

    <div id="two">
        id为two
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one" title="aa">
        class是 one title为aa
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one" title="bb">
        class是 one title为bb
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">id为mover 动画</div>
    <br>
    <input type="submit"/>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>表单选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function() {
        /* ---------表单选择器练习--------- */
        //改变所有:input 元素的背景色为 #F08080" id="b1"
        $("#b1").click(function(){
            $(":input").css("background-color",
                    "#F08080"); 
        });
        //改变:password 元素的背景色为 #9ACD32" id="b2" 
        $("#b2").click(function(){
            $(":password").css("background-color",
                    "#9ACD32"); 
        });
        //弹出 :radio 元素的个数" id="b3"
        $("#b3").click(function(){
             alert($(":radio").length);
        });
        //弹出所有 :checked 元素的value值" id="b4"
        $("#b4").click(function(){
            //只会获取出第一个元素的内容
             //alert($(":checked").val());
            //麻烦写法
            /* for(var i=0;i<$(":checked").length;i++){
                var js = $(":checked")[i];
                alert(js.value);
            } */
            //jq提供了遍历jq内所有元素的方式：each
            //切记遍历的是js对象
            $(":checked").each(function(){
                //this代表遍历的数组中的js对象
                alert(this.value);
            });
        });
        //弹出所有 :selected 元素的value值" id="b5"
        $("#b5").click(function(){
              alert($(":selected").val());
        });
    })
</script>
</head>

<body>
    <input type="button" value=" 改变所有input 元素的背景色为 #F08080" id="b1" />
    <input type="button" value=" 改变:password 元素的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 打印 :radio 元素的个数" id="b3" />
    <input type="button" value=" 打印所有 :checked 元素的value值" id="b4" />
    <input type="button" value=" 打印所有 :selected 元素的value值" id="b5" />

    <h1>天气冷了</h1>
    用户名：<input type="text" disabled="disabled" name="username" value="被禁用了"/>
    密码：<input type="password" name="password" value="123"/>
    性别：<input type="radio" name="gender" value="man"/> 男
        <input type="radio" name="gender" value="woman" checked="checked" />女
    <br>
    <br>
    爱好：
        <input type="checkbox" name="like" value="lanqiu"  checked="checked" /> 篮球
        <input type="checkbox" name="like" value="taiqiu"/> 台球
        <input type="checkbox" name="like" value="zuqiu"/> 足球
    出生地：
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai" selected="selected">上海</option>
            <option value="guangzhou">广州</option>
        </select>
    简介：
        <textarea name="discription" rows="2" cols="10">请求输入个人描述...</textarea>
        
</body>
</html>

JQuery选择器练习

标签：java   visible   asc   文本   打印   个数   radio   密码   选择   

原文地址：https://www.cnblogs.com/hello4world/p/12178689.html
踩
(0)
赞
(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)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！