<!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. C语言链表全操作（增，删，改，查，逆序，递增排序，递减排序，链式队列，链式栈）

    一,数据结构——链表全操作: 链表形式: 其中,每个节点(Node)是一个结构体,这个结构体包含数据域,指针域,数据域用来存放数据,指针域则用来指向下一个节点: 特别说明:对于单链表,每个节点(Nod ...

  2. 加载jar文件输出class和method

    package file import java.util.jar.JarEntry import java.util.jar.JarFile import org.junit.Test; class ...

  3. C++中delete和delete[]的使用

    偶然的机会要使用到动态分配整形数组,怎么删除new出来的东西一时有点模糊(也许一直就不知道),于是在VS上试了试(写代码时经常用这种方法去验证模凌两可的东西),总结出来有两点. 1.基本数据类型new ...

  4. c++ primer复习（三）

    1 istream.ostream类型,cin.cout.cerr是istream或ostream类型的具体的对象,<<和>>是操纵符 getline函数的参数是istream ...

  5. 九度OJ 1433 FatMouse -- 贪心算法

    题目地址:http://ac.jobdu.com/problem.php?pid=1433 题目描述: FatMouse prepared M pounds of cat food, ready to ...

  6. vi简单快键命令

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  7. MySQL 查询某时间段范围内的数据 补零

    1.创建基础表 CREATE TABLE num (i INT); INSERT INTO num (i) VALUES (0),(1),(2),(3),(4),(5),(6),(7),(8),(9) ...

  8. mysql 存储引擎 myisam innodb 区别

    虽然MySQL里的存储引擎不只是MyISAM与InnoDB这两个,但常用的就是它俩了.可能有站长并未注意过MySQL的存储引擎,其实存储引擎也是数据库设计里的一大重要点,那么博客系统应该使用哪种存储引 ...

  9. c语言数组的操作

    #include<stdio.h> #include<malloc.h> #include<stdlib.h>//exit() struct Arr//定义了一个数 ...

  10. sqlserver access 多数据库操作

    今天搞了一天的事情, 更新 ACCESS 數據庫 ,要從  SQL SERVER 2008數據庫中  查詢資料.沒找到資料 只能自己做了. 首先查找一下 ,如何 用SQL  語句 select *   ...