JQuery选择器练习

其他 2020-01-11 00:50:53 阅读次数: 0 
<!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>

猜你喜欢

转载自www.cnblogs.com/hello4world/p/12178689.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022