python_14(js)
第1章 图片方法
1.1 设置背景图：
1.2 背景图问题：
1.3 background-repeat; noa-repe
1.4 background-attachment: fixed
1.5 background-position
1.6 background-position-x
1.7 截取局部
1.7.1 透明色
第2章 定位
2.1 定义形式
2.2 实际应用
2.3 position: relative
2.4 position:absolute
2.4.1 测试是否以原来位置为参考点
2.4.2 添加滚动条
2.5 嵌套盒子（子绝父相）
2.5.1 验证是否以父辈盒子为对照点
2.6 z-index: 10;
2.7 hover选择器
2.8 固定定位
2.9 jquery
2.10 前端框架库
2.11 固定返回头部
2.12 固定导航栏
2.12.1 解决方法z-index
第3章 Javascript
3.1 Javascript简介
3.2 JavaScript和CMAScript的关系
3.3 javaScript中的需要定义的变量
3.4 JavaScript语言
3.5 JavaScrit的组成
第4章 js基本方法
4.1 用法
4.2 alter语句
4.3 语法规则
4.4 console.log("")
4.5 prompt（）
4.6 alert和prompt的区别：
4.7 直接量数字和字符串
4.8 变量和赋值
4.9 变量的命名规范
4.10 变量的类型
4.10.1 数值型：number
4.10.2 typeof()
4.10.3 字符串型：string
4.10.4 连字符和加号的区别
4.11 变量值的传递（赋值）
4.12 变量格式转换
4.12.1 用户的输入
4.12.2 parseInt()：字符串转数字
4.12.3 parseInt()还具有以下特性：
第5章 数据类型
5.1 概要
number
5.2 string
5.3 boolean
5.4 null
5.5 undefined
5.6 引用数据类型
第6章 数学运算符
6.1 赋值运算符
6.2 算数运算符
6.3 特殊情况
第7章 数据类型转换
7.1 将数值类型转换成字符串类型
7.1.1 隐士转换
7.2 强行转换
7.3 parseInt字符串转换数值
7.4 任意类型转换boolean
第8章 流程控制
8.1 if/if-else/if-else if-else
8.2 逻辑&& ||
8.3 switch
8.4 while循环
8.5 for 循环
8.5.1 练习
8.5.2 双重for循环
第9章 常用内置对象
9.1 数组Array
9.1.1 数组的创建方式
9.1.2 数组的常用方式
9.1.3 数组的合并concat()
9.1.4 join()
9.1.5 toString()
9.1.6 slice(start,end);
9.1.7 pop
9.1.8 push()
9.1.9 reverse()
9.1.10 sort对数组排序
9.1.11 判断是否为数组：isArray()
9.2 字符串String
9.2.1 字符串方法：
9.2.2 chartAt()
9.2.3 concat
9.2.4 replace(a,b)
9.2.5 indexof()
9.2.6 slice(start，end)
9.2.7 split('a',1)
9.2.8 substr(statr,end) 左闭右开
9.2.9 toLowerCase()转小写
9.2.10 toUpperCase()转大写
9.3 Date日期对象
9.3.1 方法
9.4 Math 内置对象
9.5 常用对象
9.5.1 Math.ceil()
9.5.2 Math.floor 向下取整，'地板函数'
9.5.3 Math.max
9.5.4 随机数 Math.random()
第10章 函数
10.1 函数写法
10.2 定义函数
10.3 函数调用
10.4 函数参数
第11章 伪数组 arguments
11.1 清空数组的几种方式：
11.2 浏览器特性
11.2.1 字符串加数字
11.2.2 not a number
11.2.3 特殊情况
11.2.4 先++后赋值
第12章 DOM事件操作
12.1 javaScript组成
12.2 事件
12.3 代码书写步骤如下：（重要）
12.4 常见事件
12.5 获取事件源的方式（DOM节点的获取）
12.6 绑定事件的方式
12.6.1 方式一：直接绑定匿名函数
12.6.2 方式二：先单独定义函数，再绑定
12.6.3 方式三：行内绑定
12.7 事件驱动程序
12.8 onload事件
12.9 DOM概念
12.10 解析过程
12.11 DOM树
12.12 DOM作用
12.13 DOM访问关系获取
12.14 节点.parentNode
12.15 获取所有的子节点
12.16 nodeType
第13章 DOM节点操作
13.1 创建节点
13.2 插入节点
13.3 删除节点
13.4 复制节点（克隆节点）
13.5 设置节点的属性
13.6 获取节点的属性值
13.7 设置节点的属性值
13.8 删除节点的属性
第1章 图片方法
1.1 设置背景图：
原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图</title>
<style>
#box{
width: 500px;
height: 1000px;
background-image: url("./04.jpg");
}
</style>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>
1.2 背景图问题：
默认横向平铺，水平平铺
当图片小于屏幕尺寸时：就会出现图片拆分的现象
如下：
1.3 background-repeat; noa-repe
解释：默认是水平和垂直都平铺，设置不平铺
代码：
<style>
#box{
width: 2100px;
height: 1000px;
background-image: url("./04.jpg");
background-repeat: no-repeat;
}
</style>
</head>
输出
1.4 background-attachment: fixed;
解释：固定背景图
代码：
<style>
body{
margin: 0 auto;
padding: 0;
}
#box{
width: 1000px;
height: 1000px;
background: url("./300.jpg") no-repeat 0 0px;
background-repeat: no-repeat;
background-attachment: fixed;
}
输出：
不会随着滚动条的移动而变化
1.5 background-position
解释：设置水平及垂直平铺位置
代码：
<style>
#box{
width: 210px;
height: 400px;
background-image: url("./04.jpg");
background-repeat: no-repeat;
background-position:200px 100px;
}
</style>
输出：
1.6 background-position-x
解释：调整水平和垂直方向
<style>
#box{
width: 210px;
height: 400px;
background-image: url("./04.jpg");
background-repeat: no-repeat;
background-position-x: -200px;
}
</style>
输出:
1.7 截取局部
解释：截取局部
代码
<style>
#box{
width: 210px;
height: 400px;
background-image: url("./04.jpg");
background-repeat: no-repeat;
background-position-x: -20px;
background-position-y: -20px;
}
</style>
</head>
输出：
1.7.1 透明色
第2章 定位
2.1 定义形式
n 静态定位position:static
n 相对定位position:relative
n 绝对定位podition:absolute;
n 固定定位position:fixed
2.2 实际应用
解释：定位应用广泛，相对定位，绝对定位，及父相子绝的实际应用，贯通整个页面，如下：
小米的logo是固定定位，下面的菜单栏与上面的816是父相子绝的应用。
2.3 position: relative
相对定位作用：做子绝父相对参考，做微调（以原来的位置做参考点）
例1）微调
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<title>相对绝对</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 30px;
}
.box2{
width: 200px;
height: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
输出：
例2）以原来位置为参考点做验证
代码：
.box{
width: 200px;
height: 200px;
background-color: red;
margin-top: 30px; è让盒子外边距留出30
position: relative;
top 30px è如果向下移动30 证明是已原来位置作参考，如果没动证明是以00点
}
输出
2.4 position:absolute
绝对定位解释：不压盖，脱离标准流
作用：做压盖现象
代码：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<title>绝对绝对</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.box2{
width: 200px;
height: 300px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
输出
添加绝对路径后box浮动，产生压盖
2.4.1 测试是否以原来位置为参考点
解释：单独设置绝对定位是以页面左上角的为起点的
代码：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<title>绝对绝对</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
margin-top: 30px;
background-color: red;
position: absolute;
top: 30px;
}
.box2{
width: 200px;
height: 300px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
输出：
2.4.2 添加滚动条
方法：
<body style="height: 2000px;">
2.5 嵌套盒子（子绝父相）
如果是嵌套盒子，是以最近的父辈盒子的左上角为参考点
代码：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<title>父相子绝</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.box2{
width: 200px;
height: 300px;
background-color: gold;
}
.father{
width:300px;
height: 500px;
background-color: fuchsia;
position: relative;
margin-left: 50px;
}
</style>
</head>
<body style="height: 2000px;">
<div class="father">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
输出：
2.5.1 验证是否以父辈盒子为对照点
解释：将第一个盒子设置向下移动40及向右移动30，此时左边距为50 ，如果以00点为对照点，那么box将左移20，如果以父盒子为参考点，将右移30
代码：
.box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 40px;
left: 30px;
}
输出：
2.6 z-index: 10;
解释：显示被覆盖的模块，用于调试用
2.7 hover选择器
解释：
选择鼠标指针浮动在其上的元素，并设置其样式：
2.7.1 定义和用法
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
2.7.2 例
1）为链接设置不同样式
<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到这些链接上。</p>
<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>
<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>
</body>
</html>
2）为链接设置不同颜色
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
</head>
<body>
<p>将鼠标指针移动到这个链接上：<a href="http://www.baidu.com">百度 </a></p>
</body>
</html>
3）为div设置悬浮颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.top{
width: 200px;
height: 200px;
background-color: red;
/*固定定位盒子脱标
参考点： 以浏览器的左上角
*/
position: fixed;
bottom: 10px;
right: 30px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 18px;
}
/*伪选择器hover*/
div:hover{
/*鼠标悬浮上变成灰色*/
background: #333333;
/*设置外边框*/
border: 5px solid #757575;
}
</style>
</head>
<body style="height: 2000px;">
<div class="top">回到顶部</div>
1.引包
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($);
$('.top').click(function () {
// alert(1)
$('html,body').animate({
scrollTop:'0'
},1000);
});
</script>
</body>
</html>
输出
2.8 前端框架库地址
https://www.bootcdn.cn/
2.9 固定返回头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.top{
width: 200px;
height: 200px;
background-color: red;
/*固定定位盒子脱标
参考点： 以浏览器的左上角
*/
position: fixed;
bottom: 10px;
right: 30px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 18px;
}
/*伪选择器hover*/
div:hover{
/*鼠标悬浮上变成灰色*/
background: #333333;
/*设置外边框*/
border: 5px solid #757575;
}
</style>
</head>
<body style="height: 2000px;">
<div class="top">回到顶部</div>
1.引包
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($);
$('.top').click(function () {
// alert(1)
$('html,body').animate({
scrollTop:'0'
},1000);
});
</script>
</body>
</html>
2.10 固定导航栏
问题:导航区域固定住，下拉滚动条不变
2.10.1 解决方法z-index
解释：设置顶部栏的z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px;
}
.header{
width: 100%;
height: 80px;
background-color: red;
position: fixed;
top:0;
z-index: 99999;
}
.wrap{
width: 100%;
height: 500px;
background-color: green;
color: #fff;
}
.wrap p{
position: relative;
z-index: 3;
}
</style>
</head>
<body style="height: 2000px;">
<div class="header"></div>
<div class="wrap">
<p>内容区域</p>
</div>
</body>
</html>
例：淘宝搜索框
第3章 Javascript
3.1 Javascript简介
Web前端有三层：
l HTML：从语义的角度，描述页面结构
l CSS：从审美的角度，描述样式（美化页面）
l JavaScript：从交互的角度，描述行为（提升用户体验）
3.2 JavaScript和CMAScript的关系
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
3.3 javaScript中的需要定义的变量
var a ;
3.4 JavaScript语言
JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，就是服务于页面的交互效果、美化、绚丽、不能操作数据库
3.5 JavaScrit的组成
JavaScript基础分为三个部分：
n ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
n DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
n BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动
第4章 js基本方法
4.1 用法
引用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
书写样式：
index.js
var a = 1;
var b = '1';
console.log(a==b); //比较的是值
console.log(a===b); //值和数据类型
// var str = a+'';
// console.log(str);
// console.log(typeof str);
var str2 = a.toString();
console.log(typeof str2);
4.2 alter语句
解释：弹出警告框
<script type="text/javascript">
alert("注意文件格式");
</script>
4.3 语法规则
（1）JavaScript对换行、缩进、空格不敏感。
备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。
（2）所有的符号，都是英语的。比如括号、引号、分号。
（3）JavaScript的注释：
单行注释：
// 我是注释
多行注释：
/*
多行注释1
多行注释2
*/
备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。
4.4 console.log("")
解释：表示在控制台中输出。console表示“控制台”，log表示输出
控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确
4.5 javascripts:void(0)
解释：阻止a标签中默认事件
源码：
<div class="box"></div>
<a href=" javascripts:void(0);">百度</a>
如果将 javascripts:void(0)换成#号，点击后会回到顶部
4.6 prompt（）
解释：prompt()专门用来弹出能够让用户输入的对话框
prompt()语句中，用户不管输入什么内容，都是字符串
代码：
<script type="text/javascript">
var a = prompt('今天是什么天气？');
console.log(a);
</script>
输出：
4.7 alert和prompt的区别：
alert("从前有座山"); //直接使用，不需要变量
var a = prompt("请输入一个数字"); // 必须用一个变量，来接收用户输入的值
直接量：数字和字符串
4.8 直接量数字和字符串
“直接量”即常量，也称为“字面量”。看见什么，它就是什么。
简单的直接量有2种：数字、字符串。
（1）数值的直接量的表达非常简单，写上去就行了，不需要任何的符号。例如：
alert(886); //886是数字，所以不需要加引号。
（2）字符串也很简单，但一定要加上引号。可以是单词、句子等。
4.9 变量和赋值
var a = 100;
var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，
定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
变量名：我们可以给变量任意的取名字。
PS：在JavaScript中，永远都是用var来定义变量，这和C、Java等语言不同(有兴趣的同学可以看一下es6)
例：
变量要先定义，才能使用。比如，我们不设置变量，直接输出：
<script type="text/javascript">
console.log(a);
</script>
控制台将会报错：
正确写法：
var a; // 定义
a = 100; //赋值
console.log(a); //输出100
有经验的程序员，会把定义和赋值写在一起：
var a = 100; //定义，并且赋值100
console.log(a); //输出100
4.10 变量的命名规范
变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字
大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。
var A = 250; //变量1
var a = 888; //变量2
4.11 变量的类型
4.11.1 数值型：number
如果一个变量中，存放了数字，那么这个变量就是数值型的
var a = 100; //定义了一个变量a，并且赋值100
console.log(typeof a); //输出a变量的类型
4.11.2 typeof()
解释：表示“获取变量的类型”，语法为：
typeof 变量
在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。
4.11.3 字符串型：string
var a = "abcde";
var b = "路飞";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
4.11.4 连字符和加号的区别
键盘上的+可能是连字符，也可能是数字的加号。如下：
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）
4.12 变量值的传递（赋值）
语句：
a = b;
把b的值赋给a，b不变。
将等号右边的值，赋给左边的变量；等号右边的变量，值不变。
举个特殊的例子：
var a = "3";
var b = 2;
console.log(a-b);
效果：（注意，字符串 - 数值 = 数值）
4.13 变量格式转换
4.13.1 用户的输入
我们在上面的内容里讲过，prompt()就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都是字符串。
4.13.2 parseInt()：字符串转数字
parseInt()可以将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写）。例如：
字符串转数字的方法：
parseInt(“5”);
4.13.3 parseInt()还具有以下特性：
（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。
例如：
console.log(parseInt("2018你真帅！！");
（2）自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
var a = parseInt(5.8 + 4.7);
console.log(a);
第5章 数据类型
5.1 概要
数据类型包括：基本数据类型和引用数据类型
基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。
当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值
number
var a = 123;
//typeof 检查当前变量是什么数据类型
console.log(typeof a)
//特殊情况
var a1 = 5/0;
console.log(typeof e1) //Infinity 无限大. number类型
5.2 string
var str = '123'
console.log(typeof str)
5.3 boolean
var b1 = false;
console.log(typeof b1)
5.4 null
var c1 = null;//空对象. object
console.log(c1)
5.5 undefined
var d1;
//表示变量未定义
console.log(typeof d1)
5.6 引用数据类型
Function
Object
Arrray
String
Date
第6章 数学运算符
6.1 赋值运算符
6.2 算数运算符
6.3 特殊情况
var name = '伊拉克';
var am = '美军';
// 字符串拼接
var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。"
var fullStr = str;
console.log(fullStr)
// 不能对字符串进行+运算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1-a2) //12
var b1 = 'one';
var b2 = 'two';
// NaN. ==== not a number 是number类型
console.log(typeof(b1*b2))
第7章 数据类型转换
7.1 将数值类型转换成字符串类型
7.1.1 隐士转换
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
7.2 强行转换
// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
7.3 parseInt字符串转换数值
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
7.4 任意类型转换boolean
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0既真
console.log(Boolean(b7))
第8章 流程控制
8.1 if/if-else/if-else if-else
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');//下面的代码还会执行
var ji = 20;
if(ji>=20){
console.log('恭喜你，吃鸡成功，大吉大利')
}else{
console.log('很遗憾 下次继续努力')
}
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
注意：浏览器解析代码的顺序 是从上往下执行，从左往右
8.2 逻辑&& ||
//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
alert('被复旦大学录入')
}else{
alert('高考又失利了')
}
8.3 switch
var gameScore = 'better';
switch(gameScore){
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃鸡成功')
break;
default:
console.log('很遗憾')
}
8.4 while循环
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
8.5 for 循环
for(var i = 1;i<=10;i++){
console.log(i)
}
8.5.1 练习
for(var i = 1;i<=100;i++){
if(i%2==0){
//是偶数
console.log(i)
}
}
8.5.2 双重for循环
for(var i=1;i<=3;i++){
for(var j=0;j<6;j++){
document.write('*')
}
document.write('<br>')
}
练习：输出三角形
*
**
***
****
*****
******
for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write("*")；
}
document.write('<br>')；
}
在浏览器中输出
for(var i=1;i<=6;i++){ //行数
//控制我们的空格数
for(var s=i;s<6;s++){
document.write(' ')
}
for(var j=1;j<=2*i-1;j++){
document.write('*')
}
document.write('<br>')
}
第9章 常用内置对象
9.1 数组Array
9.1.1 数组的创建方式
l 字面量方式创建（推荐大家使用这种方式，简单粗暴）
var colors = ['red','color','yellow'];
l 使用构造函数的方式创建 使用new关键词对构造函数进行创建对象
var arr = [];
//通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
9.1.2 数组的常用方式
9.1.3 数组的合并concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
9.1.4 join()
解释：将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
9.1.5 toString()
解释:将数组转换成字符串
var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每个元素之间使用逗号隔开
var str = score.toString();
console.log(str);//98,78,76,100,0
9.1.6 slice(start,end);
解释：返回数组的一段，左闭右开
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
9.1.7 pop
解释：移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.pop();
console.log(newArr);//["张三", "李四"，"王文"]
9.1.8 push()
解释：向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('小马哥');
console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
9.1.9 reverse()
解释：翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names);
9.1.10 sort对数组排序
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
9.1.11 判断是否为数组：isArray()
布尔类型值 = Array.isArray(被检测的值) ;
9.2 字符串String
9.2.1 字符串方法：
9.2.2 chartAt()
解释：返回指定索引的位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l
9.2.3 concat
解释：返回字符串值，表示两个或多个字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex
9.2.4 replace(a,b)
解释：将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
9.2.5 indexof()
解释：查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
9.2.6 slice(start，end)
解释：左闭右开 分割字符串
var str = '小马哥';
console.log(str.slice(1,2));//马
9.2.7 split('a',1)
以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
9.2.8 substr(statr,end) 左闭右开
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4));//我的天呢
9.2.9 toLowerCase()转小写
var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage
9.2.10 toUpperCase()转大写
var str = 'xiaomage';
console.log(str.toUpperCase());
特别：
1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)
9.3 Date日期对象
解释：创建日期对象只有构造函数一种方式,使用new关键字
//创建了一个date对象
var myDate = new Date();
9.3.1 方法
//创建日期对象
var myDate=new Date();
//获取一个月中的某一天
console.log(myDate.getDate());
//返回本地时间
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
9.4 Math 内置对象
9.5 常用对象
9.5.1 Math.ceil()
解释：向上取整，'天花板函数'
var x = 1.234;
//天花板函数 表示大于等于 x，并且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a);//2
9.5.2 Math.floor 向下取整，'地板函数'
var x = 1.234;
// 小于等于 x，并且与它最接近的整数 1
var b = Math.floor(x);
console.log(b);//1
9.5.3 Math.max
解释：求两个数的最大值和最小值
//求 两个数的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2
9.5.4 随机数 Math.random()
var ran = Math.random();
console.log(ran);[0,1)
第10章 函数
函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。
函数的作用：
n 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。
n 简化编程，让编程模块化
10.1 函数写法
例：
console.log("hello world");
sayHello(); //调用函数
//定义函数：
function sayHello(){
console.log("hello");
console.log("hello world");
}
10.2 定义函数
function 函数名字(){
}
解释如下：
function：是一个关键字。中文是“函数”、“功能”。
函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
参数：后面有一对小括号，里面是放参数用的。
大括号里面，是这个函数的语句
10.3 函数调用
函数名字();
10.4 函数参数
函数的参数包括形参和实参
注意：实际参数和形式参数的个数，要相同。
例子：
sum(3,4);
sum("3",4);
sum("Hello","World");
//函数：求和
function sum(a, b) {
console.log(a + b);
}
函数返回值：
console.log(sum(3, 4));
//函数：求和
function sum(a, b) {
return a + b;
}
第11章 伪数组 arguments
解释：arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。
（1）返回函数实参的个数：arguments.length
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
console.log("----------------");
}
输出
[2, 4]
24 3
25 2
27 ----------------
23 [2, 4, 6]
24 3
25 3
27 ----------------
23 [2, 4, 6, 8]
24 3
25 4
27 ----------------
（2）之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改为99
arguments.push(8); //此方法不通过，因为无法增加元素
}
11.1 清空数组的几种方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式1：length属性可以赋值，在其它语言中length是只读
array = []; //方式3：推荐
11.2 浏览器特性
var str = 'a';
console.log(str);
console.log(typeof str);
输出：
string
11.2.1 字符串加数字
var str = a+ '12';
console.log(str);
console.log(typeof str);
输出
12
11.2.2 not a number
var stringNum = '78914dfsasdfdfsd'；
var num2 = Number(stringNum);
console.log(typof num2);
输出：
not anumber
11.2.3 特殊情况
var c = 5/0
//true
console.log(Boolean(c));
//false
console.log(Boolean(num2));
11.2.4 先++后赋值
var a = 1;
var c = a++;
console.log(a);
//2
console.log(c);
//1
第12章 DOM事件操作
12.1 javaScript组成
avaScript基础分为三个部分：
n ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
n DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
n BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动
12.2 事件
事件的三要素：事件源、事件、事件驱动程序。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。
再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
总结如下：
n 事件源：引发后续事件的html标签。
n 事件：js已经定义好了（见下图）。
n 事件驱动程序：对样式和html的操作。也就是DOM。
12.3 代码书写步骤如下：（重要）
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作
例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
12.4 常见事件
12.5 获取事件源的方式（DOM节点的获取）
获取事件源的常见方式如下：
n var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
n var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
n var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
12.6 绑定事件的方式
12.6.1 方式一：直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
12.6.2 方式二：先单独定义函数，再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值
12.6.3 方式三：行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
12.7 事件驱动程序
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//点击鼠标时，原本粉色的div变大了，背景变红了
oDiv.onclick = function () {
oDiv.style.width = "200px"; //属性值要写引号
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color
}
</script>
上方代码的注意事项：
n 在js里写属性值时，要用引号
n 在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰
12.8 onload事件
当页面加载（文本和图片）完毕的时候，触发onload事件。
举例：
<script type="text/javascript">
window.onload = function () {
console.log("小马哥"); //等页面加载完毕时，打印字符串
}
</script>
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前
12.9 DOM概念
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
12.10 解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性
12.11 DOM树
上图可知，在HTML当中，一切都是节点：（非常重要）
n 元素节点：HMTL标签。
n 文本节点：标签中的文字（比如标签之间的空格、换行）
n 属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
12.12 DOM作用
n 找对象（元素节点）
n 设置元素的属性值
n 设置元素的样式
n 动态创建和删除元素
n 事件的触发响应：事件源、事件、事件的驱动程序
12.13 DOM访问关系获取
12.14 节点.parentNode
调用者就是节点。一个节点只有一个父节点，调用方式就是
（1）nextSibling：
指的是下一个节点（包括标签、空文档和换行节点）
火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
IE678版本：指下一个元素节点（标签）。
（2）nextElementSibling：
火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous的中文是: 前一个
（1）previousSibling：
火IE（2）previousElementSibling：
火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
补充：获得任意一个兄弟节点：
节点自己.parentNode.children[index]; //随意得到兄弟节点
12.15 获取所有的子节点
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。
火狐 谷歌等高本版会把换行也看做是子节点。（了解）
用法：
子节点数组 = 父节点.childNodes; //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
它只返回HTML节点，甚至不返回文本节点。
在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
用法：（用的最多）
子节点数组 = 父节点.children; //获取所有节点。用的最多。
12.16 nodeType
nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
第13章 DOM节点操作
13.1 创建节点
格式：
新的标签(元素节点) = document.createElement("标签名");
创建一个li标签，或者是创建一个不存在的adbc标签
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
13.2 插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：
n 在参考节点前插入一个新的节点。
n 如果参考节点为null，那么他将在父节点最后插入一个子节点。
13.3 删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：
node1.parentNode.removeChild(node1);
13.4 复制节点（克隆节点）
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
n 不带参数/带参数false：只复制节点本身，不复制子节点。
n 带参数true：既复制节点本身，也复制其所有的子节点。
13.5 设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
13.6 获取节点的属性值
方式1：
元素节点.属性;
元素节点[属性];
举例：（获取节点的属性值）
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
方式2：
素节点.getAttribute("属性名称");
例子：
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
13.7 设置节点的属性值
方式1举例：（设置节点的属性值）
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
方式2：（推荐）
元素节点.setAttribute(属性名, 新的属性值);
方式2举例：（设置节点的属性值）
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
13.8 删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
补充：
innerHTML、innerText 、value
