04-经典循环

循环语句 while
循环语句 for
嵌套、调试

内容

while

【案例】输出以下图形：

**********

程序的三大结构 (1) 顺序结构：从上往下执行 (2) 选择结构 (3) 循环结构：重复执行某段代码

【练习】在页面上输出 1，2，3，。。。 100

【案例】打印100以内7的倍数

a % 7 == 0

思路： 7， 14， 21 下一个7的倍数 = 上一个7的倍数 + 7

【练习】打印100以内的奇数

【案例】打印100以内所有偶数的和

【练习】求出 1+2+3 + .. + 100 的和

break 和 continue

break 终止： switch, while

continue: 跳过当前循环中以下的所有代码

【练习】小明本周上5天班，每天做同样的工作：输出"hello world"，但是星期二小明不想上班，请假一天；(continue)

小明本周上5天班，每天做同样的工作：输出"hello world"，但是星期4的早上，小明收到消息中了500W，他就直接提出了辞职，没有上班了。（break）

debug: 找出bug的过程：

暴力调试
在线调试

Chrome 中的在线调试步骤 F12 打开在线调试工具，如下图所示：

断点: 程序暂停的位置，此时断点这行代码不执行单步: 一次只执行一行代码全速执行：运行到下一个断点或者无断点时结束程序

【案例】

**********
**********
**********
**********

for循环

固定次数：起始值，终止值，增量 1 100 1 ==> 循环100次 1 100 2 ==> 循环50次 1 5 1 ==> 循环5次

语法： for (var i = 起始值; i <= 终止值; i++ ) { 循环的内容 }

【练习】输出1，2，。。。100 的数字 (使用for)

一个新入职，月工资为2000元的员工，每年涨工资5%，到退休时的月工资是多少？（年龄22-60）

打印100–200之间所有能被3或者7整除的数 8K 计算100的阶乘 9K

打印图形

【案例】

**********

【案例】

**********
**********
**********
**********

*
**　
***
****
*****

【练习】打印10行的斜三角形 (demo11-打印图形.html)

行号星星数目 1 1 2 2 3 3

星星数目 == 行号 (规律是对的) 5 5

    *
   **
  ***
 ****
*****

【练习】打印10行的斜三角形

行号星星数空格数 1 1 4 2 2 3 3 3 2

空格数与行号的关系

空格数 = 5-行号

*
***
*****
***
*

【案例】(难)输出100-200之间所有的素数 15K

素数, 也称为质数：只能被1与自身整除的数字。

如果2~n-1 之间有一个数能整除n，那么n就不是质数

do-while循环

// 先执行循环体，再判断条件 do { document.write(i + ", "); i++; } while (i <= 5);

do-while 不管条件如何，总会执行第一次。

语法：

do { 循环语句(if, while,for, do-while) } while( 表达式 );

练习+扩展

99乘法表

求1+2!+3!+...+20!的值

求100-999之间的水仙花数。abc =a^3+b^3+c^3 求s=a+aa+aaa+aaaa+….+aa...a的值，其中a是一个数字。例如2+22+222+2222

经典问题

参考文件经典

打印出1-100里所有的偶数
打印出1-100里所有的奇数
求出1-1/2+1/3-1/4…..1/100的和
输出20-80之间能被3整除的整数，每5个一行
打印出1000-2000年中所有的闰年，并以每行四个数的形式输出
输出九九乘法表

11 = 1 21 = 2 2*2 = 4 ...

05-字符串篇

String 对象
Math 对象

内容

String 对象

【案例】过滤敏感词

知识点

字符串对象定义
取出字符串中的字符

ASCII码规定 0~127 之间的字符（数字、英文字母、键盘）

(只占1字节)

中文字符字符表： gb2312 规定 6000多个常用字符的编码

1111 1111(2) ==> 255(10) 1111 1111 1111 1111(2) ==> 65535(10)

中文字符占2个字节

GBK 标准：增加少数民族的文字字符中文字符占2个字节

GB2312, GBK 统称为多字节编码

想把全世界所有的符号都存下来，2个字节（65535）即可都存下来，所以，标准组织规定，所有字符都用 2个字节进行编码统称为 Unicode 编码

Unicode-4 编码，用4个字节来字符，数量很庞大了，可以存下整个银河系的字符。用于以后扩展用

为了节约存储空间和网络流量，推出 UTF-8 编码

即通过一种算法计算字符的编码，可以存所有的中文、英文、世界上的符号，这种算法算出来的空间比 Unicode 编码少

ASCII码与字符编码
字符串查找

var s1 = "1ab23***abc123";

// 查找 s1 中是否包含 ab

// 返回：从前往后 找，第一个找到的下标
// var r = s1.indexOf("ab");

// 返回：从后往前 找，第一个找到的下标
var r = s1.lastIndexOf("ab");

// 如果找不到，返回 -1，否则返回相应的下标

alert(r);

字符串替换 (了解正则表达式)


var s1 = "abc";

// 把 b 替换成 #
var s2 = s1.replace("b", "#");

// 【注意】 replace 函数并不会将 s1 替换掉，s1 依然还是原来的内容
alert(s1);

// 输出替换后的结果
alert(s2);

字符串分割 (demo7-字符串分割.html)
字符串截取 (demo7-字符串分割.html)

案例实战

【案例】加密解密

// 获取对应字符的 ASCII 编码
var code = str.charCodeAt(i);

// ASCII 码 转换成 字符
var c = String.fromCharCode(code);

// ------------------

var arr1 = [1, 2, 3];

// map 数组的方法
// 遍历数组中的所有元素
// 可以通过修改返回值，将数组中的元素重新改个形式
var arr2 = arr1.map(function (a) {
    return "<span>" + a;
});

// ------------------

// 按照 "" 联结数组中所有的元素
// 返回拼接之后的字符串
var result = arr2.join("");

【加密后的优化】通过数学运算进行加密

string 与 new String 的区别

var str = "abc";

// 这里 str 是一个字符串类型的变量
// 那么： 
// 为什么字符串类型的变量，可以使用 字符串对象中的方法
// 其实这一个方法，内部还是创建一个字符串的对象
str.charAt(1);

也就是说， str.charAt(1) 等价于
var t = new String(str);
t.charAt(1);
// 最后将 t 释放掉

【案例】用户名验证

长度在6~14位
不能有空格
只允许输入数字、大小写字母、下划线

【案例】计算商品总价

基本的 html + css 结构, 图片为 s1.jpg

<style>
.pshow{padding:15px;overflow:hidde;}
.pshow h1{font-size:18px;}
.pshow img{float:left;margin-right:20px;width:300px;border:1px solid #ddd;}
#subPrice{color:#c00;font-weight:bold;}
#qty{width:60px;}
</style>

<div class="pshow">
    <h1>Nike 耐克官方 NIKE AIR MAX 90 ESSENTIAL 男子运动鞋 537384</h1>
    <img src="s1.jpg">
    <p id="price">价格：599.98元</p>
    <p>数量：<input type="number" id="qty" min="1" max="100"></p>
    <p>总价：<span id="subPrice"></span></p>
</div>

(demo8-价格计算.html)

【案例】过滤敏感词

Math对象

知识点

Math.round(3.6) // 4 //四舍五入
Math.random() //返回0-1之间的随机数
Math.max(num1, num2) //返回较大的数
Math.min(num1, num2) //返回较小的数
Math.abs(num) //绝对值
Math.ceil(19.3) //20 向上取整
Math.floor(11.8) //11 向下取整
Math.pow(x,y) //x的y次方
Math.sqrt(num) //开平方

案例实战

【案例】4位随机字母数字组合的验证码

【练习】写出勾股定理的公式设三角形的直角为X Y 斜边为Z

输入 x, y, 求 z 值

x^2 + y^2 === z^2

z = sqrt(x^2 + y^2)

经典问题

随机验证码，再多考虑小写字母的情况

注册页面的简单数据校验，（14K）名字只能包含数字、字母和下划线，数字不可以开头，长度不低于6，不高于20 密码必须一致 昵称一栏要将敏感词(tmd, fuck 等)过滤，在提交表单时自动替换非法字符，并弹出警告信息 所有输入框不能为空，并数据合法，点击提交才可以正确提交表单数据
已知字符串“a,a,b,c,c,d,f,g,j,j”编程实现以下功能。(13K) 统计每个字符出现的次数，结果显示 a 2、b 1、c 2、d1 去掉重复的字符，使结果显示 abcd

06-函数大纲

函数
堆栈
递归

内容

函数概念

洗碗机、遥控器

洗碗机

洗碗洗碗洗碗洗碗 ...

洗衣机

开始洗衣开始洗衣开始洗衣 ...

遥控器

按按钮按按钮按按钮按按钮 ...

函数就像生活中的各种工具一样，是一个功能，用于解决某一类问题。

计算机为什么发明函数？

重复使用一段代码
方便代码管理
便于控制程序的执行时间

【演示】函数的好处

写函数

做为一个程序开发人员，我们不仅要学会使用工具（函数），还得学会制作工具（函数）！

【案例】输出10颗星星

【练习】请将打印10次 “我不会武功” 封装成一个函数 (demo1-写函数.html)

【练习】写一个函数，弹出一个数字的正负 (demo2-参数.html)

【案例】计算两数字之和 (demo2-参数.html)

【练习】带饭：传入钱和饭的类别（面条或盖饭）面条： 80一碗，炸酱面盖饭： 120一碗，鱼香肉丝

先判断买什么，再判断钱够不够！如果钱够，买回相应的饭菜如果钱不够，返回不够钱的信息

要求：用 return 返回买的菜 (demo2-参数.html)

事件驱动

函数到底什么时候能执行？

js 是事件驱动的程序的, 例如当 onclick、ondblclick、onfocus、onblur 执行

堆栈结构

函数到底是如何实现的呢？

【扩展】值传递与引用传递的区别对象的空间是在内存中“堆”区域分配的。

函数调用时，如果传递的数据是 number 类型的，那么，函数中的形参会开辟一个空间，直接将这个值存下来这种方式称为 “值传递”。

函数调用时，如果传递的数据是 Object 类型，那么，函数中的形参会指向这个 Object 的空间【Object的空间只有唯一一份】这种方式称为“引用传递”

作用域

局部变量与全局变量

// 在函数内部定义的变量，都是局部变量 // 函数外部定义的变量，称为全局变量

递归

为什么叫递归？

老故事：从前有座山...

问自己在电影院中的座位号？假设你在一个电影院，你想知道自己坐在哪一排，但是前面人很多，你懒得去数了，于是你问前一排的人「你坐在哪一排？」，这样前面的人 (代号 A) 回答你以后，你就知道自己在哪一排了――只要把 A 的答案加一，就是自己所在的排了。不料 A 比你还懒，他也不想数，于是他也问他前面的人 B「你坐在哪一排？」，这样 A 可以用和你一模一样的步骤知道自己所在的排。然后 B 也如法炮制。直到他们这一串人问到了最前面的一排，第一排的人告诉问问题的人「我在第一排」。最后大家就都知道自己在哪一排了。

天下有奇族人姓计，长生不老。一日其孙问其父：吾之18代祖名何？其父不明，父问其父其父不明，父问其父其父不明，父问其父其父不明，父问其父 ... 晌后，其18代祖回其子：你猜然其回其子：你猜然其回其子：你猜然其回其子：你猜然其回其子：你猜 …… 终，计姓末代孙知其18代祖名“你猜”

此乃，递归

在世界中心贝拿勒斯（在印度北部）的圣庙里，一块黄铜板上插着三根宝石针。印度教的主神梵天在创造世界的时候，在其中一根针上从下到上地穿好了由大到小的64片金片，这就是所谓的汉诺塔。不论白天黑夜，总有一个僧侣在按照下面的法则移动这些金片：一次只移动一片，不管在哪根针上，小片必须在大片上面。僧侣们预言，当所有的金片都从梵天穿好的那根针上移到另外一根针上时，世界就将在一声霹雳中消灭，而梵塔、庙宇和众生也都将同归于尽。

假如每秒钟一次，共需多长时间呢？一个平年365天有31536000 秒，闰年366天有31622400秒，平均每年31556952秒，计算一下： 18446744073709551615秒

这表明移完这些金片需要5845.54亿年以上，而地球存在至今不过45亿年，太阳系的预期寿命据说也就是数百亿年

【案例】计算 5! （解释： 5! 读作 5的阶乘，意思是： 5*4*3*2*1）

(PPT 效果演示)

【案例】菲波那切数列有一对兔子，长到第三个月，开始，每月生一对兔子，小兔子出生后，长到第三个月，每月都生一对兔子。假设兔子都不死，问任意月后，共有兔子多少对。

月份一月兔二月兔三月兔总数 0： 1 0 0 1 1： 0 1 0 1 2： 1 0 1 2 3： 1 1 1 3 4： 2 1 2 5 5： 3 2 3 8 ...

总数：有什么规律？ f(n) = f(n-1) + f(n-2)

1, 1, 2, 3, 5, 8, 13, 21, 34, ...

【练习】实现函数，求出任意月的斐波那契数。

经典问题

编写函数，求一个正数的n次方
编写函数，求4个数的平均值
判断日期是否正确, 需考虑闰年的情况
输出斐波那契额数列数列的前20项(递归或非递归)
函数调用时，传递任意多的数字，计算这任意多数字之和

07-日期

日期对象
定时
日期处理

内容

日期对象

获取年月日 / 设置
获取星期几
获取时分秒

    // 得到 div 的元素
    var oDiv = document.getElementById("div1");

    // 定义一个空字符串的变量 str
    var str = "";

    // 日期对象，如果()为空，代表获取当前这一时刻的时间
    var obj = new Date();

    // 得到日期对象中的小时数
    str += obj.getHours();

    // 字符串后 加上 "："
    str += ":";
    str += obj.getMinutes();

    str += ":";
    // 获取日期对象中的秒数
    str += obj.getSeconds();

    oDiv.innerHTML = str;

案例

将当前日期格式化输出为 “2015年08月24日星期五”格式

定时

开启定时器, 定时的时间是毫秒
var timer = null;

timer = setInterval( function () {
    // 这里的代码会定时执行
}, 1000);

// 停止计时器
clearInterval(timer);

练习

让圆圈移动 left: 300px
让自动移动
能停止

案例

运动

    <style>
      #div1 { width: 100px; height: 100px; background: red; border-radius: 50px; position: absolute; top: 50px; left: 100px;}
    </style>

<button id="btn"> 移动 </button>
    <div id="div1"> </div>

轮播图

功能：

定时更新
鼠标移动到图后，停止滚动

日期处理

Date.parse("2015-08-24") 转换格式默认支持2015-08-24或2015/08/24 如果需要支持其他格式，只能手动处理
new Date(time) 创建一个日期对象，并指定时间可以指定毫秒数或者修改time属性， var d = new Date(); d.setTime(56521211021);
getTime()/setTime() getTime获取某个日期自1970年以来的毫秒数 setTime修改日期的毫秒数，对应的日期时间也会修改

案例

[案例] 倒计时

经典问题

封装日期处理的函数库(重要！) 判断某年份是否为闰年将日期格式化输出 “2015-08-24” 获得某个月份的天数将字符串转换为日期（选做）判断两个日期相差的天数获得N天以后的日期
页面上完成这几项功能

09-dom/bom大纲

window 对象
回到顶部实现
修改窗口

内容

BOM介绍

JavaScript 有3个组成部分

ECMAScript 规定了语法规则
BOM Broswer Object Model 浏览器对象模型
DOM Document Object Model 操作网页上的元素

什么是 BOM

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性. JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM 缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。

(1) 可以通过 BOM 进行浏览器的一些操作：打开窗口，跳转到另外一个网页等 (2) 运行的一个环境

window是BOM的核心, window对象表示浏览器窗口的一个实例, 每个浏览器窗口都有一个window对象与之对应. window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的.

对象创建

1. 使用 new 运算符创建 Object 
var box = new Object();        //new方式  
box.name =‘张三’;     //创建属性字段    
box.age = 18;       //创建属性字段

2. 使用字面量方式创建 Object 
var box = {               //字面量方式 
      name :‘张三',   //创建属性字段,最后加逗号 
      age : 18 
};

3. 属性字段也可以使用字符串形式 
   var box={ 
    'name' : '张三',  //也可以用字符串形式 
    'age' : 28
   };

4.  使用字面量及传统赋值方式 
var box={};      //字面量方式声明空的对象
box.name='张三';   //点符号给属性赋值
box.age= 18;

5.  两种属性输出方式 
alert(box.age);      //点表示法输出 
alert(box['age']);   //中括号表示法输出，注意引号

对象练习

1, 创建一个人的对象, 添加属性: 姓名年龄爱好薪资期望, 并有一个打印自身信息的方法, 可以输出自身信息;

2, 创建一个锤子对象, 有属性:宽,高,重; 方法:可以锤钉子

3, 有一辆50km/h车,跑在一条1000km路上，问多少小时跑完？

window对象

window对象的子对象

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM) history(重要): 历史对象,包含窗口的浏览历史，可以实现后退 location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面 frames: 框架对象，可以获取页面框架内容 screen: 包含有关客户端显示屏幕的信息 navigator: 导航对象, 包含所有有关访问者浏览器的信息

部分方法

alert(text): 弹出提示框(警告框) confirm(): 创建一个需要用户确认的对话框 prompt(text,defaultInput) :创建一个对话框要求用户输入信息 open(url,name,[options]) : 打开一个新窗口并返回新 window 对象 setInterval(): 设置定时器 clearInterval() : 移除定时器 setTimeOut() : 设置延时器 clearTimeOut(): 移出延时器

close(): 关闭窗口 print(): 调出打印对话框

location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和document.location等效。

location 对象的属性

Location对象的方法

案例

图片切换

轮播图片切换

定时更新
鼠标移动到图后，停止滚动

延迟关闭显示

单击显示按钮立即显示单击隐藏按钮后，隔5秒后消失

功能：

移动到显示按钮，显示内容块移出显示按钮，隔5秒后隐藏内容块

移入内容块之后，清空延迟执行的定时器移除内容块之后，隐藏内容块

    <style>
#box{display:none;margin:10px 0;padding:10px;border:1px solid #ddd;font-size:30px;}
    </style>

<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div id="box">#box</div>

小广告

// 创建小窗口
var myWindow = window.open("", "", "width=200px; height=200px");
// 向小窗口中写入内容
myWindow.document.write("LoL !!!");

// 将窗口移动到 (x, y) 坐标
myWindow.moveTo(_x, _y);
// 在窗口大小基础上，x坐标增加 _x, y坐标增加 _y
myWindow.moveBy(_x, _y);

// 将窗口大小修改成 width = x, height = y;
myWindow.resizeTo(_x, _y);
// 在窗口大小基础上，宽度增加 _x, 高度 增加_y
myWindow.resizeBy(_x, _y);

回到顶部

// 当滚动时，会执行此函数
window.onscroll = function () {
}

// IE 中获取滚动条距离顶部的距离
document.documentElement.scrollTop;

// chrome, firefox 中获取滚动条距离顶部的距离
document.body.scrollTop

解决兼容的办法

document.documentElement.scrollTop || document.body.scrollTop || 0;

#top{display:none;position:fixed;right:0;bottom:0;padding:10px;background-color:#f00;color:#fff;}

<input type="text" id="pos">
<button id="toTop">返回指定滚动条位置</button>

大纲

DOM简介
节点关系
节点的属性

课堂内容

DOM（文档对象模型）

Document Object Model 文档对象模型

DOM就是Document Object Model，DOM 是 W3C（万维网联盟）的标准。 W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML-页面结构 css-页面样式 javascript –页面行为操作.

DOM，每一个标签 -> 对象

三个名称都是指同一个内容，只是说法不一样而已

标签 <span> <div>     (css 中)
元素 <div id="div1">  (js 中)
节点 <div> <span>     (DOM 中)

DOM 中的三个字母: D（文档Document）可以理解为整个Web加载的网页文档； O（对象Object）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是 document 对象； M（模型Model）可以理解为网页文档的树型结构。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素

节点种类

元素节点 nodeType ==1 属性节点 nodeType ==2 文本节点 nodeType ==3

获取节点

id getElementById
获取相同名称的节点列表 name getElementsByName 某些低版本浏览器会有兼容性问题
获取相同class属性的节点列表 class getElementsByClassName IE8以下不能用


// 解决 IE 下不同获取同一 className 的办法

// 思路
// 1. 首先获取网页上所有的节点
// 2. 筛选节点中 class == className 的节点
// 3. 用数组存储满足条件的节点，并返回
function m1(a) {

    var allNode = document.getElementsByTagName("*");

    var arr = [];

    for (var i = 0; i < allNode.length; i++) {
        // 每一个节点有个内部的属性 className
        // 代表当前节点的 class 的值

        // node.onclick
        // node.style
        // node.class // ==> 因为 class 是个关键字，
        // 获取节点的 class 的值， className

        if (allNode[i].className == a) {
            arr.push(allNode[i]);
        }
    }

    return arr;

}

tagname getElementsByTagName

    <h1>DOM结构</h1>
    <ul id="list">
        <li><a href="http://www.baidu.com" class="baidu" id="baidu">百度</a></li>
    </ul>
    <table id="dataList">
        <tbody>
            <tr>
                <td>Data11</td>
                <td>Data12</td>
            </tr>
            <tr>
                <td>Data21</td>
                <td>Data22</td>
            </tr>
        </tbody>
    </table>

    <form>
        <input type="text" name="username" id="username">
        <input type="text" name="password" id="password">
    </form>

案例

单击输出按钮的内容

// 为什么没有写在文档加载之后，为什么 allBtn 不为空
// 因为 getElementsByTagName 方法在得不到元素的情况下，
// 依然会返回一个对象, 只不过这个对象其中的元素个数为 0
// alert(allBtn);

// 下标为 i 的对象： 内置了很多属性 和 很多方法。但我们可以往这个对象中新增属性，例如
// 在下标为 i 的按钮对象 中新增了一个属性 xxx，并将其中的值设置为 i
allBtn[i].xxx = i;

通过绑定函数的的方法，来获取点击按钮的下标

function bind(obj, pos) {
    obj.onclick = function() {
        alert(pos);
    }
}

bind(allBtn[i], i);

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>

tab标签切换

#tab span{display:inline-block;padding:5px 15px;background-color:#ddd;margin:0 3px;border:1px solid #ddd;border-bottom:none;}
.content{padding:15px;border:1px solid #ddd;font-size:24px;background-color:#efefef;}

<div id="tab"><span>辣条</span><span>豆腐</span><span>方便面</span><span>桂林米粉</span></div>
<div class="content">我喜欢吃辣条</div>
<div class="content">吃完豆腐池辣条</div>
<div class="content">喜欢去超市捏方便面</div>
<div class="content">桂林米粉哪里最正宗</div>

节点之间的关系

子节点: childNodes

父节点: parentNode

兄弟节点: nextSibling previousSibling

        // 百度元素的上一个【元素】节点
        // 不支持 IE8及以下
        // baidu.previousElementSibling.style.color = "red";

        // 【解决】IE 兼容的问题
        // 只要当前节点不是元素节点，那么一直往上找
        while (google.nodeType != 1) {
            google = google.previousSibling;
        }

隔行变色

<style>
.red{background:red;}
</style>

<ul id="ul01">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

父节点的应用

<style>
  a {cursor: pointer;}
</style>

<h1> 今日头条 </h1>

<ul id="ul1">
    <li>我机巡航南海释放重大信号 轰6曾突破日美封锁链  <a>&times;</a></li>
    <li>少林寺自家门口遇假僧：陪NBA球星韦德拜佛的不是我们... <a>&times;</a></li>
    <li>李克强谈互联网+物流：既是发展新经济，又能提升传统.. <a>&times;</a></li>
    <li>这位85后技术男，要实现APP之间的深度链接  <a>&times;</a></li>
    <li>国内两大白帽子关闭 引猜测  <a>&times;</a></li>
</ul>

手风琴

<style>
        .hide{display:none;}

        #div1{border:1px solid #ddd;padding:1px;}
        #div1 h4{margin:1px;background-color:#ddd;padding:15px;}
        #div1 .content{display:none;height:120px;padding:15px;}
</style>

    <div id="div1">
        <h4>标题1</h4>
        <div class="content">#内容1</div>
        <h4>标题2</h4>
        <div class="content">#内容2</div>
        <h4>标题3</h4>
        <div class="content">#内容3</div>
        <h4>标题4</h4>
        <div class="content">#内容4</div>
        <h4>标题5</h4>
        <div class="content">#内容5</div>
    </div>

经典问题

将今天课堂代码写一遍
广告窗口自动关闭, 倒计时5秒后关闭窗口 (分别使用定时器和延时器)
顶部悬浮,当滚动条滚动到较下方时, 留言信息一直显示在顶部
获取浏览地址后的参数并转换成对象格式 ?name=green&age=18&school=千锋&class=h5开发&lesson=javascript
全选和反选checked

    <table id="dataList">
        <thead>
            <th><input type="checkbox" name="all" id="all"></th>
            <th>爱好</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>篮球</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>足球</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>羽毛球</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>爬山</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>游泳</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>购物</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>看电影</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>旅游</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>音乐</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby"></td>
                <td>画画</td>
            </tr>
        </tbody>
    </table>

BOM归类

BOM:

核心的对象 window

弹出输入框： var res = window.prompt("好汉留下你的大名") 确认框： var res = window.confirm("确定?")

定时重复执行： var res = window.setInterval(函数, 时间); 清除重复执行 window.clearInterval(res);

延时执行： var res = setTimeout(函数, 时间) 清除延时： clearTimeout(res)

打开窗口： var res = window.open(地址, 名称，选项) 让窗口移动： res.moveTo(x, y); moveBy 让窗口变大变小： res.resizeTo(x, y); resizeBy

// 非IE 滚动条距离顶部的距离 document.body.scrollTop

// IE 滚动条距离顶部的距离 document.documentElement.scrollTop;

// 兼容写法 var t = document.body.scrollTop || document.documentElement.scrollTop;

滚动时触发函数 window.onscroll = function() {}

页面加载完成执行函数 window.onload = function() {}

浏览器的版本 window.navigator.appName window.navigator.userAgent

获取当前完整地址： location.href 获取地址中查询字符串： location.seach

刷新： location.reload() location.reload(true)

前进： history.forward(); 后退： history.back(); 记录条数： history.length

DOM

通过id获取节点对象： var obj = document.getElementById("id"); 通过标签名获取所有节点对象： var all = document.getElementsByTagName("div"); 通过name来获取所有节点对象： var all = document.getElementByName("username");

this

10-dom节点大纲

节点属性
节点操作

内容

tab标签切换

#tab span{display:inline-block;padding:5px 15px;background-color:#ddd;margin:0 3px;border:1px solid #ddd;border-bottom:none;}
.content{padding:15px;border:1px solid #ddd;font-size:24px;background-color:#efefef;}

<div id="tab"><span>辣条</span><span>豆腐</span><span>方便面</span><span>桂林米粉</span></div>
<div class="content">我喜欢吃辣条</div>
<div class="content">吃完豆腐池辣条</div>
<div class="content">喜欢去超市捏方便面</div>
<div class="content">桂林米粉哪里最正宗</div>

节点之间的关系

子节点: childNodes

父节点: parentNode

兄弟节点: nextSibling previousSibling

        // 百度元素的上一个【元素】节点
        // 不支持 IE8及以下
        // baidu.previousElementSibling.style.color = "red";

        // 【解决】IE 兼容的问题
        // 只要当前节点不是元素节点，那么一直往上找
        while (google.nodeType != 1) {
            google = google.previousSibling;
        }

父节点的应用

<style>
  a {cursor: pointer;}
</style>

<h1> 今日头条 </h1>

<ul id="ul1">
    <li>我机巡航南海释放重大信号 轰6曾突破日美封锁链  <a>&times;</a></li>
    <li>少林寺自家门口遇假僧：陪NBA球星韦德拜佛的不是我们... <a>&times;</a></li>
    <li>李克强谈互联网+物流：既是发展新经济，又能提升传统.. <a>&times;</a></li>
    <li>这位85后技术男，要实现APP之间的深度链接  <a>&times;</a></li>
    <li>国内两大白帽子关闭 引猜测  <a>&times;</a></li>
</ul>

手风琴

<style>
        .hide{display:none;}

        #div1{border:1px solid #ddd;padding:1px;}
        #div1 h4{margin:1px;background-color:#ddd;padding:15px;}
        #div1 .content{display:none;height:120px;padding:15px;}
</style>

    <div id="div1">
        <h4>标题1</h4>
        <div class="content">#内容1</div>
        <h4>标题2</h4>
        <div class="content">#内容2</div>
        <h4>标题3</h4>
        <div class="content">#内容3</div>
        <h4>标题4</h4>
        <div class="content">#内容4</div>
        <h4>标题5</h4>
        <div class="content">#内容5</div>
    </div>

节点属性

box.attributes;      // 节点中所有属性
box.getAttribute('data-index')  // 获取元素节点属性的值

box.setAttribute('data-index',2); // 设置节点的属性
box.removeAttribute('title') // 移除节点属性

网页换肤

css 样式表在 css 文件夹

<link id="link" href="css/css1.css" rel="stylesheet" type="text/css" />

<dl id="message">
    <form>
        <dt>
            <strong>可以换肤的提交框：</strong>
            <input type="button" value="皮肤1" data-css="css1" />
            <input type="button" value="皮肤2" data-css="css2" />
        </dt>
        <dd>输入姓名：<input class="text" type="text" /></dd>
        <dd>输入密码：<input class="text" type="password" /></dd>
        <dd>请您留言：<textarea></textarea></dd>
        <dd class="center"><input class="btn" type="submit" value="提交" /></dd>
    </form>
</dl>

style CSS内联样式属性值

要获取节点 css 的样式值：

IE中可通过节点对象.currentStyle 来得到所对应的样式对象

var d = document.getElementById("div1");

// 这是div节点的 css 样式中的 width 值
d.currentStyle.width;

// 这是div节点的 css 样式中的 height 值
d.currentStyle.height;

如果需要获取 css 样式值， Firefox 和 chrome 中，

可通过 window.getComputedStyle(d, null) 的方式来得到所对应的样式对象


var d = document.getElementById("div1");

// 这是div节点的 css 样式中的 width 值
window.getComputedStyle(d, null).width

// 这是div节点的 css 样式中的 height 值
window.getComputedStyle(d, null).height

兼容代码：

var d = document.getElementById("div1");

var obj = d.currentStyle || getComputedStyle(d, null);

// 这是div节点的 css 样式中的 width 值
obj.width;

// 这是div节点的 css 样式中的 height 值
obj.height;

进度条

<style>
    #progress{
        position: relative;
        margin: auto;
        top: 200px;
        display: block;
        width: 200px;
        height: 20px;
        border-style: dotted;
        border-width: thin;
        border-color: darkgreen;
    }
    #filldiv{
        position:absolute;
        top: 0px;
        left: 0px;
        width: 0px;
        height: 20px;
        background: blue;
    }
    #percent{
        position: absolute;
        top: 0px;
        left: 200px;

    }
</style>

<div id="progress">
    <div id="filldiv"></div>
    <span id="percent">0</span>
</div>

节点操作方法

DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点

createElement() //创建一个元素节点
createTextNode()  //创建一个文本节点
box.appendChild(node)  //把node节点插入到box内部最后的位置
box.insertBefore(newNode, existNode)  //把newNode节点插入到exsitNode的前面
box.removeChild(node) // 在box内移除节点
box.replaceChild(p,h1); // h1替换成p

box.cloneNode(true) // 克隆节点

添加表格

    <style>
        table{margin-top:20px;width:100%;border:1px solid #ddd;border-collapse: collapse;}
        td{padding:5px 15px;border:1px solid #ddd;}

        /*css3隔行变色*/
        /*table tr:nth-child(odd){
            background-color:#efefef;
        }*/
        .odd{background-color:#fc0;}
    </style>

行：<input type="text" id="row"> 列：<input type="text" id="col"><button>生成表格</button>

表格行复制

node.cloneNode(true);

设置为 true，如果您需要克隆节点及其属性，以及后代设置为 false，如果您只需要克隆节点及其后代

经典问题

简易日历单击某个按钮，显示数组中对应的信息

<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }

</style>

    var arr=['快过年了，大家可以商量着去哪玩吧～',
        '大家好好学习吧222222~~~',
        '大家好好学习吧222222333~~~',
        '大家好好学习吧222444222~~~',
        '大家好好学习555吧222222~~~',
        '大家好好学习吧666222222~~~',
        '大家好好学习吧227772222~~~',
        '大家好好学习吧28888822222~~~',
        '大家好好学习吧99999222222~~~',
        '大家好好学习10000000吧222222~~~',
        '大家好好学习吧111111222222~~~',
        '大家好好学习吧22222200000000000~~~']

<div id="tab" class="calendar">

    <ul id="ul">
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>

    <div class="text" id="txt">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪玩吧～</p>
    </div>

</div>

评分效果

【扩展】表格即时编辑(需要用到事件冒泡知识)

点击表格内容，可以编辑文本。当光标离开编辑框后，可以将编辑后的内容保存下来

mcya / JavaScriptExperience

04-10篇 主要内容（循环+字符串+函数+date+obj+bom+dom） #4

04-经典循环

内容

while

break 和 continue

for循环

打印图形

do-while循环

练习+扩展

经典问题

参考文件 经典

05-字符串篇

内容

String 对象

知识点

案例实战

Math对象

知识点

案例实战

经典问题

06-函数大纲

内容

函数概念

计算机为什么发明函数？

写函数

事件驱动

堆栈结构

作用域

递归

经典问题

07-日期

内容

日期对象

案例

定时

案例

日期处理

案例

经典问题

09-dom/bom大纲

内容

BOM介绍

什么是 BOM

对象创建

对象练习

window对象

window对象的子对象

部分方法

location对象

案例

图片切换

延迟关闭显示

小广告

回到顶部

大纲

课堂内容

DOM（文档对象模型）

节点种类

获取节点

案例

单击输出按钮的内容

tab标签切换

节点之间的关系

隔行变色

父节点的应用

手风琴

经典问题

BOM归类

10-dom节点大纲

内容

tab标签切换

节点之间的关系

父节点的应用

手风琴

节点属性

网页换肤

进度条

节点操作方法

添加表格

04-10篇主要内容（循环+字符串+函数+date+obj+bom+dom） #4

参考文件经典