一、JS基本操作

1.1 JS引入方式

第一种：内部标签<script></script>
第二种：外部引入<script type="text/javascript" src="./xxx.js"></script>

1.2 JS的6种数据类型

number
string
boolean
object
function 函数

1.3 JS特殊值

Null 空值
Undefine 未定义
NAN 非数值

1.4 JS数组

var 数组名 = [1,’abc’]

1.5 JS循环

1.5.1 for

for(语句1;语句2;语句3){
    代码块
}
或
for(变量 in 对象名/数组名){
    代码块
}

1.5.2 while

while(条件){
    代码块
}
或
do{
    代码块
}while(条件);

1.6 JS函数定义方式

第一种：function 函数名(形参列表){函数体}
第二种：var 函数名 = function(形参列表){函数体}
函数不允许重载
arguments：存放形参的数组，可以在函数体中直接调用，形参列表可以不写

1.7 JS对象的定义

1.7.1 第一种

var 变量名 = new Object();
变量名.属性名 = 值
变量名.函数名 = function(){}
this关键字可以在函数体中使用

1.7.2 第二种

var 对象名 = {
    属性名:值,
    属性名:值,
    函数名:function(){}
};

1.7.3 对象的访问

对象名.属性名/函数名()

1.8 JS入口函数

1
2
3

window.onload = function(){
    // 开始编写JS代码
}

1.9 JS数组

// 创建数组对象
var arr = new Array();
arr[0] = 1;
arr[1] = 2;

//读取不存在的索引，不会报错而会返回undefined
console.log(arr[3])

//打印数组长度，length表示最大的索引
//length可以修改，长了填充空值，短了截断
console.log(arr.length)

二、JS函数

2.1 函数的声明

1
2
3

function 函数名(形参列表){
    函数体
}

2.2 函数对象

在JS中，函数名就代表了函数对象

2.3 匿名函数

2.3.1 语法

1
2
3

function(){
    函数体
}

2.4 立即执行函数

2.4.1 语法

1
2
3

(function(形参列表){
    函数体
})(实参列表)

2.4.2 特性

立即执行函数只执行一次

2.5 回调函数

2.5.1 概念

并非自己调用，而是由浏览器自动调用的函数
一般是作为函数的参数进行使用，可以通过匿名函数的写法进行传递，也可以直接传递函数名

2.5.2 语法

注意到click方法中是一个函数而不是一个变量
//它就是回调函数
$("#btn_1").click(function() {
    alert("Btn 1 Clicked");
});  
//或者
function click() { // 它就是回调函数
    alert("Btn 1 Clicked");
}
$("#btn_1").click(click);

三、JS对象

3.1 对象的分类

内建对象
宿主对象
自定义对象

3.2 对象的定义

var 变量名 = new Object();
变量名.属性名 = 值
变量名.函数名 = function(){}
this关键字可以在函数体中使用

// 或者
var 对象名 = {
        属性名:值,
        属性名:值,
        函数名:function(){}
    };

3.3 this关键字

当以函数的形式调用时，this是window
当以方法的形式调用时，谁调用方法，this就是谁
当以构造函数的形式调用时，this就是新创建的那个对象

3.4 构造函数

function Person(name,age,gender){
    alert(this);
    this.name = name;    //添加属性name
    this.age = age;
    this.gender = gender;
}

var per = new Person();

3.4.1 执行流程

立刻创建一个新的对象
将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
执行函数中的代码
将新建的对象作为返回值返回

3.5 原型对象

JS中万物皆对象
每个对象都具有proto，用于指向其构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法
方法是一个特殊的对象（可以把方法的声明当作构造函数），它同时具有proto指针，以及属性prototype

四、Dom操作

4.1 操作元素节点

函数	解释
getElementById()	通过id属性获取一个元素节点对象
getElementsByTagName()	通过标签名获取一组元素节点对象
getElementsByName()	通过name属性获取一组元素节点对象

获取到元素对象/对象数组后，这些对象包含以下属性
- 对象名.innerHtml
- 对象名.id
- 对象名.name
- 对象名.value
- 对象名.className
- 对象名.时间名=function(){}

五、JS事件

5.1 事件的概念

电脑输入设备与页面进行交互的响应

5.2 常用的事件

onload：加载完成事件，页面加载完成之后，常用于做页面js代码初始化操作
onclick：单击事件，常用于按钮点击的响应操作
onblur：失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作
onsubmit：表单提交事件，常用于表单提交前，验证所有表单是否合法

5.3 事件的注册

5.3.1 静态注册

通过html标签的事件属性直接赋予事件响应后的代码

5.3.2 动态注册

是指先通过js代码得到标签的dom对象，然后再通过：dom对象.事件名=function(){}这种形式赋予事件响应后的代码

5.3.3 步骤

获取标签对象
标签对象.事件名=function(){}

5.4 事件对象event

在给元素绑定事件时，写上函数参数event
使用此event可以在触发事件时达到某些效果
为兼容IE8，函数体中可以写上此语句：event = event||window.event;

var box1 = document.getElementById("box1");
box1.onclick = function(event){     //参数名一般写做event或e
    if(event.target.className == "link"){   //判断子元素中是否有a链接元素
        alert("我是box1的单击事件");
    }
    
}

5.5 事件的冒泡

给覆盖在父元素上的子元素都绑定上事件，点击子元素时，会先触发子元素的事件，然后再触发父元素的事件
event.cancelBubble = true;可以用来取消父元素的冒泡

var box1 = document.getElementById("box1");
box1.onclick = function(){  //回调函数，无需自己调用
    alert("我是div的单击响应函数");
    event.cancelBubble = true;
}

5.6 事件的委派

给各子元素共同的祖先元素绑定事件，这样后代元素上的事件触发时，则会统一触发祖先绑定的事件
这样做无需一个个给子元素单独绑定事件，比较方便

<script>
window.onload = function(){
    var ul = document.getElementsById("ul");
    ul.onclick = function(){
        alert("我是ul的单击事件")
    }
    
}
</script>

<ul id="ul">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>