<!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. struts 文件上传下载

    上传 1.编写上传action类 UploadAction.java package jxf.b_upload; import java.io.File; import java.io.IOExcep ...

  2. PAT_1002 写出这个数

    宝宝不开心了.自从回家开始百练就上不去POJ也上不去,今天突然HDU也上不去了,PAT25分的题目都快更新完了.我就按顺序往下面更新了.回学校之后题目质量能高出不少= =. 问题描述: 读入一个自然数 ...

  3. 滑动条 Trackbar［OpenCV 笔记9］

    OpenCV中没有实现按钮的功能,我们可以利用滑动条来实现按钮功能. , ); trackbarname 轨迹条的名字. winname 窗口的名字,轨迹条会依附在这个窗口上. value 一个指向整 ...

  4. UDP协议疑难杂症全景解析

    转载:http://blog.csdn.net/dog250/article/details/6896949 UDP协议疑难杂症全景解析 2011-10-22 19:26 2989人阅读 评论(4)  ...

  5. Linux 经典面试题

    [Linux  经典面试题] 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文 ...

  6. sqlserver批量插入数据问题

    下午做一个批量添加的功能,自动添加的那种,总是没有达到理想情况,后来请教师傅,给了这个批量添加的代码,一改果然好了,敬佩之情油然而生哈.分享下~ insert into t_ShopApplicati ...

  7. phpstorm配置Xdebug进行调试PHP教程

    运行环境: PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 xdebug版本:php_xdebug-2.2.5-5.6-vc11-x86_64.dll ps : php版本和xdeb ...

  8. Ubuntu启动项设置——之update-rc.d 命令使用

    http://blog.csdn.net/typ2004/article/details/38712887 apache2.nginx.redis这些服务安装之后,会随开机启动,当这些服务并不需要时, ...

  9. C语言实现的顺序表

    顺序表是用一段地址连续的存储单元依次存储数据元素的线性结构.顺序表可分为静态存储和动态存储,静态顺序表比较简单,数据空间固定,而动态顺序表可以动态增容,便于存放大量数据,现主要把动态的基本实现一下~此 ...

  10. LDR伪指令与ADR伪指令的区别

    测试代码 ldr r0, _start adr r0, _start ldr r0, =_start nop mov pc, lr _start: nop 设置代码的起始地址为 0x0c008000, ...