第一章
1.JS的位置
1-1.行间
1-2.内嵌
1-3.外联
2.JS的标签位置
页面中的代码在一般情况下会按从上到下的顺序，从左往右的顺序执行。
因此当JS放在了元素上面的时候，就不能正常执行。
解决
* window.onload 页面加载完成之后再执行JS
* window.onload=function(){
* //当页面中的元素全部加载完成后执行这里的代码
3.JS变量
* 变量
* 可变的量（值）
*
* 变量的好处
* 1、可以复用代码
* 2、可以精简代码
*
* 声明变量方式
* var 变量名＝值 3-1
console.log(color[color.length-1]); //pink
* 变量全名规则
* 1、允许是字母，数字，下划线(_)，美元符($)任意组合而成
* 2、不允许数字开头
* 3、不允许使用关键字和保留字
* 关键字：当前语法中正在使用的单词
* http://www.w3school.com.cn/js/pro_js_keywords.asp
* 保留字：将来可能在语法中使用的单词
* http://www.w3school.com.cn/js/pro_js_reservedwords.asp
*
* 变量的命名风格
* 语义化
* 写的变量名尽量贴近实际的意思
* nav
* 驼峰命名
* 大驼峰
* 首字母就大写
* Math、Date
* 小驼峰
* 从第二个单词开始首字母大写
* getElementById
* get 获取
* Element 元素
* By 通过
* Id id
var box=document.getElementById('box');
4.函数
* 复用代码，它复用是多行代码
* 函数的名字在声明的时候尽量遵守变量的全名规则
* 函数的定义
* function 函数名(){
* //这里面的代码，是要复用的代码，这里面可以放多行代码
* }；
* 函数调用
* 函数名() 必须要调用函数才能实现函数内的代码。
function fn(){
alert(1);
}；
fn();4-1匿名函数
匿名函数不能直接声明，会报错
* 当匿名函数是以被赋值的形式所出现，并且它是被事件调用才会正确执行。
* 事件 window.onload
* 赋值 ＝ window.onload=function (){
alert(1);
}; 当点击窗口便会弹出1
5.属性操作
* 1、. 的
* 元素.属性名
* 如果属性是单一属性(例如font-size)，用点操作符是取不到的，而且还会报错
* 如果想用点操作符去获取带横杠的属性，那首先要把横杠去掉，然后把横杠后面的第一个字母大写
XXX.style.fontSize=
* 2、[ ] 的
* 如果属性中带横杠，用[]的方式去操作属性,并带上一对引号 XXX.style['font-size']=
3、区别
'.' 点操作属性的时候，后面只能跟真正的属性名称，不能跟变量名
XXX.style.background=
'[ ]'操作属性的时候，里面可以放属性名称与变量名，如果放的时属性名，那要加引号，如果放的是变量名，那不需要加引号
'[ ]'操作属性的时候，里面可以放属性名称与变量名，如果放的时属性名，那要加引号，如果放的是变量名，那不需要加引号
var name=background；
XXX.style[name]=
6.字符串
* 字符串是js数据类型中的一种
* 用一对单引号或者双引号包含起来的由0个或者多个字符组成的串
例 var str='kaivon'；
* 字符串拼接
* +
* 1、数学中的加法运算
* 2、字符串连接
* 当加号的任意一边有一个是字符串，那它就是字符串连接的意思 'img/'+imgArr[n]+'.jpg' 的意思为 img/imgArr[n].jpg
'a'+10 的意思为 a10
'1'+1 的意思为 11
7.innerHTML
格式 XXX.innerHTML=' ';
* 获取到是一个标签对里的所有内容
* 如果标签对当中有其它的标签，那一样会拿的到 <div id="box"><p>标题</p>这里是一段文字</div>
那么 var box=document.getElementById('box');
box.innerHTML 代表的就是 <p>标题</p>这里是一段文字
* 在给innerHTML设置值的时候，如果这个值里面有html标签，那放到网页当中，会把它解析成一个真正的html标签
box.innerHTML='<span>XXX</span>';
这个div里面显示的内容则为XXX
如果赋予的值自带一对引号‘’ 则不需要再加引号
var name='HAHA';
box.innerHTML=name;
这个里面显示的内容则为HAHA
8.if
* 当代码有不同的情况需要去处理，这个时候就要用if
*
* 语法
* if(判断条件){
* 当判断条件成立的时候，会执行这里的代码
* }
* 在判断条件中，因为js “=” 被喻为赋值的功能，所以真真的等号为“ =="
if(n==true) 或则 if(n==false)
也不能以 style作为判断的条件，因为style操作的是行间样式，除非这个style是写在行间的。
* if的判断条件为被转化成一个布尔值
* 布尔值
* true 真
* false 假
*
* if的条件会被转化成布尔值，如果布尔值为true（真）,大括号里的代码就会被执行，如果布尔值的结果为false(假)，那大括号里的代码就不会被执行 if(1<2){
//当1<2这个条件成立，这里的代码才会执行
alert('成立');
}
if(1<0){
//1<0是不成立的，所以这里面的代码不会执行
alert('不成立');
}
alert(1<2); //true
alert(1<0); //false9.if else
* if 如果 当页面中只有一种特殊情况要去处理
* else 否则 当页面中有两种特殊情况要去处理
*
* 语法
* if(条件判断){
* 当条件判断成立的时候，会执行这里的代码
* }else{
* 当条件判断不成立的时候，会执行这里的代码
* }
*/
if(1>2){
//条件满足了，这里的代码执行了（只有当条件成立的时候，才走这里的代码）
alert('成立');
}else{
//当条件不成立的时候，执行这里的代码
alert('不成立');
}10.else if
* if 如果 只有一种特殊情况要去处理
* else if 否则如果 有多种特殊情况要去处理
* else 否则 有两种特殊情况要去处理
*
* 语法
* if(判断条件){
* 当判断条件成立的时候，执行这里的代码
* }else if(判断条件1){
* 当头条条件1成立的时候，执行这里的代码
* }else if(判断条件2){
* 当判断条件2成立的时候，执行这里的代码
* }else{
* 当以上条件都不成立的时候，执行这里的代码
* }
*
* 当一个条件满足的时候，代码只会走满足条件对应的大括号里的内容。其它的都不会走
*
* 一个非0数字转布尔值的结果是true
* = 赋值
* ＝＝ 对比
*/
var n=12;
if(n<10){
//这个条件成立，说明n是小于10的
alert('n小于10');
}else if(n==10){
//这个条件成立，说明n是等于10
alert('n等于10');
}else{
//以上条件都不成立，才会走这里的代码，代表n大于10
alert('n大于10');
}11.数组(自己定义的组合)
* 数组
* 数据的组合
*
* 语法
* []
* 每个数据之间是用逗号隔开的，最后一个数据是没有逗号
*
* 每个数据都会对应一个下标（序号）
* 下标代表的意思是，每个数据都有一个自己的标识，用于方便获取
* 下标值是从0开始
*
* 数据会有一个length属性，代表数组中数据的个数
*
* 取数组中的某个数据
* 数组[下标值]
// 0 1 2 3 4 5 length=6
var color=['red','green','blue','white','black','pink']; console.dir(color);
console.log(color[1]); //green
console.log(color[4]); //black
12.获取元素的方法（在括号里面一定要给一对引号）
* 主语(限制范围)：
* document 从整个文档中去获取一组元素
* 父级 从父级下面去获取一级元素 1.document.getElementById(id名称)
var text1=document.getElementById("text1");
* 通过id名称去获取一个元素,它只有一个主语,document(整个文档) 2. getElementsByTagName(标签名称)
var lis=document.getElementsByTagName('li');
* 通过标签名称去获取一组元素，它获取到的是一组元素 如果这一组元素在同一个父级下，获取到的是一个集合， 类数组
类数组：类似数组，但是数组中的一些方法，它没有
它只具备数组中的length属性，以及每个数据都会有一个自己对应的下标 3. querySelector(css选择器)
var red=document.querySelector('#color li:first-child');
* 通过css选择器去获取一个元素
* 它获取到的只有一个元素，如果说有重复的，那它只取第一个 4. querySelectorAll(css的选择器)
var lis=document.querySelectorAll('li');
* 通过css选择器获取到一组元素
* 它获取到的也是一组元素，它也是一个类数组13for
* for循环
* 根据一定的条件，重复的执行一行或者多行代码
*
* 语法
* for(条件初始化;条件判断;条件变化){
* 当条件成立的时候（true）重复执行这里的代码
* }
*
* 步骤
* 第一步：条件初始化（声明了一个变量，给这个变量一个初始值）
* var i=0;
*
* 第二步：条件判断（把变量的值限定了一个范围）
* i<10;
*
* 第三步：走大括号里的代码（当条件判断成立的时候，走大括号里的代码）
* console.log('kaivon');
*
* 第四步：条件判断（循环一次让变量的值加上1）
* i++;
*
* 注意：从第二次循环开始，它就不走第一步了。不断的走第二步、第三步、第四步
*
* 结束
* 当判断条件不成立的时候，就结束循环
* 循环什么时候结束由判断条件来决定的。一定要给一个条件（能够不成立的时候），否则就是一个死循环
* 循环什么时候用
* 当需要操作一组元素做同一件事件的时候就用for循环//获取到所有的livar lis1=document.querySelectorAll('li');//把所有的li的背景色全部变为红色// lis1[0].style.background='red';// lis1[1].style.background='red';// lis1[2].style.background='red';// lis1[3].style.background='red';// lis1[4].style.background='red';for(var i=0;i<lis1.length;i++){//i 0 1 2 3 4lis1[i].style.background='red';}};<ul><li>red</li><li>green</li><li>blue</li><li>yellow</li><li>pink</li></ul>
14this
* 指的是当前对象
* 它是关键词，不能当作变量名
* 只能读，不能写。它的值只能用，不能修改 * 被事件所调用，并且是以赋值的形式出现
* this指向是，谁调用了函数，那this就指向谁//获取到所有的livar lis1=document.querySelectorAll('li');//给每一个li都添加点击事件for(var i=0;i<lis1.length;i++){lis1[i].onclick=function(){//找点击的那个对象//这里的this代表谁点击了就指向谁//在循环的时候，给每个元素都添加了点击事件，想要在点击事件里找到点击的那个对象，不能用i的值作为下标去取，要用this,this指的就是点击的那个对象this.style.background='red';};}};<ul><li>red</li><li>green</li><li>blue</li><li>yellow</li><li>pink</li></ul>
15.自定义属性
* 属性
* 元素身上所具有的一些特征
*
* 1、系统自带的属性
* type、id、style、value、src
* 2、自己添加的属性
* 自定义属性，系统当中是没有的，我们自己添加的
* 系统自带的属性，满足不了我们的需求，给一个自己添加的属性 inputs[i].index=i; //给每个按钮添加一个自定义属性，存的是它们对应的索引值
* inputs[0].index=0;
* inputs[1].index=1;
* inputs[2].index=2