<!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>

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

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

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 18.libgdx制作预览图,背景移动循环,改变地图颜色

    经过构思,游戏将分为两部分, 1,预览图,只负责展示世界形势 2,根据预览图生成的战役项 现在要记录的是我制作预览图的部分 1.预览图只有实际地图的1/4,首先生成地图(建议不要缩放以前地图,由于误差 ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 吴恩达《深度学习》-第五门课 序列模型(Sequence Models)-第一周 循环序列模型（Recurrent Neural Networks） -课程笔记

    第一周 循环序列模型(Recurrent Neural Networks) 1.1 为什么选择序列模型?(Why Sequence Models?) 1.2 数学符号(Notation) 这个输入数据 ...

  8. NeHe OpenGL教程 第一课：OpenGL窗口

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

随机推荐

  1. SQL VIEW(视图)

    1,视图包含行和列,就像一个真实的表. 2,视图中的字段就是来自一个或多个数据库中的真实的表中的字段. 3,我们可以向视图添加 SQL 函数.WHERE 以及 JOIN 语句,我们也可以提交数据,就像 ...

  2. jquery中的 .html(),.val().text()

    .html(),.text(),.val(),.html()用为读取和修改元素的HTML标签,包括标签内的内容.text()用来读取或修改元素的纯文本内容,去除 html 标签.val()用来读取或修 ...

  3. 计算字符串和文件的MD5值

    //计算字符串的MD5值 public string GetMD5(string sDataIn) { MD5CryptoServiceProvider md5 = new MD5CryptoServ ...

  4. express的基本配置项

    express自动生成的app.js中有一段代码用app.set和app.use对express进行配置,但这些配置都是什么意思,以及都能做哪些配置并没有展开.这一节就专门来讲express的配置.上 ...

  5. 批量执行sql语句

    基本使用 $sqls="sql语句1;sql语句2;sql语句n"; 或 $sqls="insert into xx;";  $sqls.="inse ...

  6. Navicat Premium 未保存的SQL如何找回 ？

    在使用 Navicat Premium 编辑SQL的过程中为防止程序意外崩溃,已经将编辑的SQL都已经备份. 备份存放目录地址:C:\Users\{登录用户名}\Documents\Navicat\M ...

  7. 关于js小数计算的问题

    在js浮点运算中 var a=0.2-0.1; var b=0.3-0.2; console.log(a==b); 答案是什么呢,很多人可能认为是true,包括我在内,但是当我写出来运行了一下,我被答 ...

  8. 移动App双周版本迭代实战--转载备用

    对于移动互联网产品来说,迭代的速度就是生命.我创业时做移动App时是一周一版,而现在是2周1版.相比起小公司,大公司迭代时间虽长,却更为不易,因为大公司流程更多,参与人数更多,需求更多,实现这样的快速 ...

  9. ubuntu13.10 登陆后黑屏，没有菜单栏，可以启动termina，怎么解决？

    最近在学习openGL,自己的电脑是intel集显加nvidia GT630M,本来想应该可以支持到opengl4以上的,可是发现nvidia的显卡由于驱动问题,好像一直没有用到,所以只支持了open ...

  10. Web应用的组件化（一）

    基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...