作品第一课----循环改变DIV颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    button { margin: 0 auto; display: block; }
    ul { overflow: hidden; margin: 3% 0 0 32%; }
    li { width: 100px; height: 100px; margin-right: 50px; background-color: #000; list-style: none; float: left;}

    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button>点击循环改变颜色</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
    $(document).ready(function(){
        $("button").on("click", function(){
            var num = $("li").length;
            for (var i = 0; i < num; i++) {
                $("li").eq(i).css("background-color", "red");
            };
        })
    })
    </script>

</body>
</html>

时间： 2024-08-24 18:02:23

作品第一课----循环改变DIV颜色的相关文章

checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

JS动态，有选择性的改变div颜色

JS代码: <script language="javascript">function check(value){document.getElementById(value).style.background= "black";}</script> div处部分代码: <div id="1" style=" color:#FFF; width:40px; height:40px; float:left;

作品第一课----改变DIV样式属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .btn { margin: 0 auto; padding-left: 30%;} .img { width: 200px; height:

作品第二课----点击DIV显示其内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 33%; margin: 10px 0 28px 34%; border: 1px solid #000; } str

作品第一课----记住密码提示框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { margin-left: 43%; } p { font: 12px/1.5 Tohama; border: 1px solid #

作品第一课----网页换肤

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页换肤</title> <style type="text/css"> body, html { height: 100%; } body { margin:0; } li { list-style: none;width:

作品第一课----获取批量checkbox选中的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>

第一课 1) 控制div属性总结

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>控制div属性</title> 7 <style> 8 #outer { 9 width: 500px; 10 margin: 0 auto; 11 padding: 0; 12 text-align: center; 1

作品第一课----传参

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>传参</title> </head> <body> <input type="text" value="北京"> <input type="text" va