<!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. jQuery动态效果实例

    jQuery常见的动态效果: 隐藏/显示效果: 1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素. (2):隐藏/显示的速度: ...

  2. （转）linux多线程，线程的分离与结合

    转自:http://www.cnblogs.com/mydomain/archive/2011/08/14/2138454.htm 线程的分离与结合     在任何一个时间点上,线程是可结合的(joi ...

  3. web api 跨域请求，ajax跨域调用webapi

    1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...

  4. centos 基本操作(输入法安装,adls宽带连接,查找文件,模拟终端)

    centos 基本操作之输入法安装输入法启动终端,切换到超级管理员yum install "@Chinese Support"安装成功后,退出System->Preferen ...

  5. 学习PHP 301跳转的方法

    发布:JB01   来源:脚本学堂     [大 中 小]本文详细介绍了,在php编程中实现301跳转,即301永久重定向的方法,感兴趣的朋友可以参考学习下. 本文转自:http://www.jbxu ...

  6. $_REQUEST变量数组header()函数

    $_SERVER 包含http信息头,路径和服务器端的一些信息,没发送一次HTTP请求,就会创建一个$_SERVER数组Array ( [HTTP_HOST] => localhost [HTT ...

  7. MySql 在大数量的统计中具体的使用技巧

    一.CASE WHEN THEN ELSE END 使用用法. 在用sql语句统计某字段的某种状态的出现的次数,可以考虑用到 CASE WHEN THEN ELSE END 使用用法.当数据量过于庞大 ...

  8. centos下redis安装

    下载redis http://www.redis.cn/download.html 下载php的redis扩展 https://github.com/phpredis/phpredis#install ...

  9. linux安装ruby ruby-devel rubygems bundler

    linux安装ruby ruby-devel rubygems yum install ruby ruby-devel rubygems 安装bundler gem install bundleror ...

  10. SQLSERVER与C#中数据类型的对应关系

    SQLSERVER与C#中数据类型的对应关系 ///<summary> ///数据库中与C#中的数据类型对照 ///</summary> ///<paramname=&q ...