js项目练习第一课

控制div属性

<style>
    .c1 {
        width:200px;
        height:200px;
        background-color: #000;
        display: block;
        margin: 0 auto;
    }
</style>
<body>
<button class="btn" value="0" >变宽</button>
<button class="btn" value="1" >变高</button>
<button class="btn" value="2" >变色</button>
<button class="btn" value="3" >隐藏</button>
<button class="btn" value="4" >重置</button>
<div class="c1"></div>
<script>
    var cArray = ['400px','400px','#0f0','none','block']
    var sArray = ['width','height','background-color','display','display']
    $(function () {
        $('button').click(function () {
            var val = this.value;
            if(val < 4){
                $('.c1').css(sArray[val],cArray[val]);
            }else{
                $('.c1').attr('style','');
            }
        })
    })


</script>

网页换肤

   <style>
        body{
            background-color:  #7DA5FF;
        }
        a{
            color:#fff;
            font-weight: bolder;
        }
        button{
            width: 30px;
            height: 30px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
        .d1 li{
            background-color:  blue;
        }
    </style>
</head>
<body class="b1">
<div class="container d1">
    <button class="red" value="red"></button>
    <button class="green" value="green"></button>
    <button class="blue" value="blue"></button>
    <ul class="nav nav-pills">
        <li role="presentation" class="table-bordered"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
        var color = {
                'red':'#FF76A0',
                'green':'#658066',
                'blue':'#7DA5FF'
            };
        $('button').click(function () {
            var val = this.value;
            $('body').css('background',color[val]);
            console.log(color[val]);
            $('.d1>ul>li').css('background',val);
        })
    })
</script>

函数接收参数并弹出

    <style>
        div{
            width:30%;
            margin: 15px auto;
        }
        .btn{
            margin: 0 auto;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="container">
        <div><input type="text" class="city form-control"></div>
        <div><input type="text" class="district form-control"></div>
        <div><button class="btn btn-primary pull-right">提交</button></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('button').click(function () {
        var city = $('.city').val();
        var district = $('.district').val();
        alert(city);
        alert(district);
    })
</script>

用循环将三个div变色

<style>
        .d1{
            margin: 10px auto;
            width: 370px;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color:#fff;
            margin: 0 5px;
            display: inline-block;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="container" style="margin: 0 auto; width: 102px;">
        <button class="b1">点我变色</button>
    </div>
    <div class="container d1">
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
    </div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    <script>
        $(".b1").on("click",function () {
            var $divEle = $(".d2");
            console.log($divEle);
            $.each($divEle,function (i) {
                $($divEle[i]).css("background","red");
            })
        })

    </script>

鼠标移入/移出改变样式

<style>
        .d1{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            border: 20px solid #000;
            color: #fff;
            background-color: #000;
        }
        .d2{
            border: 20px solid red;
            color: red;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="d1">
        <p>鼠标移入改变样式,鼠标移出恢复</p>
    </div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    <script>
        var $divEle = $(".d1");
        $divEle.on("mouseover",function () {
            $divEle.addClass("d2");
        })
        $divEle.on("mouseout",function () {
            $divEle.removeClass("d2");
        })
    </script>

记住密码提示框

 <style>
        .d1{
            margin: 0 auto;
            width: 150px;
        }

    </style>
</head>
<body>
    <div class="d1">
        <input type="checkbox" value=""> 两周内自动登录
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        var $divEle = $(".d1");
        var pEle = document.createElement("p");
       $divEle.on("mouseover",function () {

            $(pEle).text("为了您的信息安全,请不要在网吧或公用电脑上使用此功能!").css({"background": "yellow",
                "border": "1px solid red"});
            $divEle.append(pEle);
        })
        $divEle.on("mouseout",function () {
            $divEle.children("p").remove();
        })
    </script>

秒客网

js项目练习第一课

相关文章