1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     button { margin: 0 auto; display: block; }
  8.     ul { overflow: hidden; margin: 3% 0 0 32%; }
  9.     li { width: 100px; height: 100px; margin-right: 50px; background-color: #000; list-style: none; float: left;}
  10.  
  11.     </style>
  12.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  13. </head>
  14. <body>
  15.     <button>点击循环改变颜色</button>
  16.     <ul>
  17.         <li></li>
  18.         <li></li>
  19.         <li></li>
  20.     </ul>
  21.     <script type="text/javascript">
  22.     $(document).ready(function(){
  23.         $("button").on("click", function(){
  24.             var num = $("li").length;
  25.             for (var i = 0; i < num; i++) {
  26.                 $("li").eq(i).css("background-color", "red");
  27.             };
  28.         })
  29.     })
  30.     </script>
  31.  
  32. </body>
  33. </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. 淘宝可以传照片搜索商品,verygood.雅客VC多味水果糖

    奶奶喜欢吃点硬糖.在当地买了些说是不好.到是一个亲戚买的一种糖比较满意(好久了都快融化了). 但是我只有照片,能知道品牌,在jd没这样一样的商品了. 还好借助淘宝的传照片功能,找到了.

  2. 无责任共享 Coursera、Udacity 等课程视频

    本文转载自网络,原作者不详. (本文是用 markdown 写的,访问 https://www.zybuluo.com/illuz/note/71868 获得更佳体验) 程序语言 interactiv ...

  3. error signing assembly unknown error

    用VS2010 编译 C#工程,出现 Cryptographic failure while signing assembly 'Assembly.dll' -- 'Unknown error (80 ...

  4. ZEngine游戏框架需求稿

    早在2013就开始接触cocos2dx游戏框架,觉得的使用框架对于游戏开发者来说有些不方便.我便想在cocos2dx的框架基础之上实现ZEngine库,方便开发者编辑动画,以及着重于对游戏逻辑的处理. ...

  5. HttpUtility.HtmlEncode

    HttpUtility.HtmlEncode用来防止站点受到恶意脚本注入的攻击 public string Welcome(string name, int numTimes = 1) {     r ...

  6. 上传文件到服务器端后进一步推送到sftp服务器

    扩展安装 要想sftp服务端发送文件,就需要php脚本具有作为ssh客户端的能力,所以需先为php安装如下扩展 openssl openssl-dev libssh php ssh 扩展 按照下面的命 ...

  7. Checbox的操作含已选、未选及判断代码

    Checbox的操作包括已选.未选.判断等等,下面有个不错的示例,使用jquery完成,感兴趣的朋友可以参考下 $("#chk1").attr("checked" ...

  8. js 小数格式化函数

    直接上代码,参数number为待格式化整数或小数,fix是要保留有效位数,过亿以亿结尾,过万以万结尾,toFixed函数记得,免得再查 function shorten_number (number, ...

  9. IT全称

    1.jar,war,ear(摘自:http://blog.sina.com.cn/s/blog_54bb7b950100wnbb.html) Jar文件(扩展名为. Jar)包含Java类的普通库.资 ...

  10. python中enumerate的使用

    在python的应用中,当我们使用一个数组或者列表的时候既要遍历索引又要遍历元素的时候通常的做法是这样的: >>> lsi = [1,2,3,4,5,6,7,8,9] >> ...