JavaScript

JavaScript

JavaScript简介

• 开始用于前端验证
• JavvaScript包括ECMAScript（标准）和DOM（文档对象模型）和BOM（浏览器对象模型）
• JS特点：
  • 解释型语言
  • 面向对象

JS的HelloWord

• JS代码需要编写到script标签中
  • 控制浏览器弹出一个警告框
    • alert(“这是我的第一条JS代码”)；
  • 让计算机在页面中输出一个内容
    • docment.write()可以向body中输出一个内容
    • docment.write(“这是我的第二条JS代码”)；
  • 向控制台输出一个内容
    • console.log向控制台输出
    • console.log(“这是我的第三条JS代码”)；
  • JS代码是从上到下执行的就是执行完一个才会进入下一个

JS基础_JS编写位置

• 可以将JS代码编写到外部JS文件中，然后通过script标签引入
  • 写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用的方式
  • script标签一旦用于引入外部文件了，就不能再编写代码了，浏览器会忽略后面的代码，如果需要则可以在创建一个新的script标签用于编写内部代码
  • .js外部格式

  <script type="text/javascript" src="js/script.js"></script>
  

• 可以将js代码编写到标签的onclick属性中
  • 当我们点击按钮时，js才会运行
  • 不推荐使用，行为结构耦合

      <button onclik="alert('点我')";>点我一下</botton>
  

• 可以将js代码写在超链接的herf属性中，这样当点击超链接时，会执行js代码

      <a herf="javascript:alert('让你点你就点')">你也点我一下
  

字面量和变量

• 字面量不可以改变的量
• 使用var关键字来声明一个变量

    var a;
    a = 123;

标识符

• 在JS中所有的可以由我们自主命名的都可以称为是标识符
• 例如：变量名、函数名、属性名都属于标识符
• 命名一个标识符时需要遵守以下的规则：
  • 1、标识符中可以含有字母、数字、_、￥
  • 2、标识符不能以数字开头
  • 3、不能用关键字
  • 4、标识符一般都采用驼峰命名法
    - 首字母小写，每个单词的开头字母大写，其余小写
  • JS底层保存标识符时实际上是采用的Unicode编码

数据类型

• 六种数据类型：
  • String 字符串
  • Number 数值（整数或者小数）
  • Boolean 布尔值
  • Null 空值
  • Undefine 未定义
  • Object 对象
• String、Number、Boolean、Null、Undefine属于基本数据类型，而Object属于引用数据类型
• String字符串
  • 在JS中字符串需要引号引起来
  • 单引号双引号都可以
  • eg: var str = ‘hello’;
  • 使用特殊字符时用/做转义字符
    • "表示“
    • '表示‘
    • \n 表示换行
    • \t 制表符Tab
    • \ 表示\
• Number数值
  • 特殊值： Infinity无穷
    NaN表示not a number
  • js可以表示数字的最值
    Number.MAX_VALUE
    Number.MIN_VALUE最小的正值
  • 可以使用一个运算符typeof来检查一个变量类型
  • 语法：typeof 变量
  • 检查字符串时，会返回string
• Boolean布尔值
  • 不加引号
  • true表示真
  • false表示假
• 使用typeof检查Null返回object

强制类型转换

• 将其他类型转换为String
  • 方式一：
    • 调用被转换数据类型的toString()方法
    • 该方法不会影响到原变量，它会将转换结果返回
    • null、undefined这两个值没有toString()

    var a = 123;
    var b = a.toString();
    a = a.toString();
    

  • 方法二：
    • 调用String()函数
    • S大写
    • 该方法不会影响到原变量，它会将转换结果返回
    • null、undefined这两个值也可以这样转换
• 将其他类型转换为Number
  • 方法一：调用Number()函数
    • 如果有非数字转换为NaN
    • 空串转换为0
    • true转为1
    • fasle转为0
    • Null转换为0
    • undifined数字NaN
  • 方法二：这种方法专门用来对付字符串
    • parseInt()把一个字符串转换成一个整数
    • eg:
      a = “123px”;
      parseInt()函数将a转换为Number
    • parseFloat()把一个字符串转换为一个浮点数
    • parseInt()可以将一个字符串中的有效的整数内容去出去，然后转换为Number
    • parseFloat()可以将一个字符串中的有效的小数内容去出去，然后转换为Number
• 将其他类型转换为Boolean
  • 使用Boolean()函数
    • 数字除了0和NaN其余都是true
    • 字符串除了空串，其余都是true
    • null和undefined都是false
    • 对象也会转换成true

其他进制数字

• 十六进制0X开头
• 八进制以0开头
• 表示二进制0b开头
• 可以在pareInt（）中传递第二个参数，来指定数字的进制

运算符

• 运算符也叫操作符
• 通过运算符可以对一个或多个值进行运算，并获取运算结果
• 比如：typeof就是运算符，可以来获得一个值的类型 返回值是字符串

var a = 123;
var result = typeof a;
console.log(result);

• 运算符

• ± * / %

• 把结果返回

• 不是Number类型的会转换成Number

• 两个字符串相加会拼成新串

• 加号在字符串中的用法
  

• 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作

result = 123 +"1";
隐式类型转换
var c = 123;
c = c + "";

• 任何值做减法时都转换成Number
• 隐式转换 转换为Number
  • /1 *1 -0 直接加正号可以将任意类型转换成Number

一元运算符

• 正号和负号
• 自增

逻辑运算符

• 运算符与&&
  • 找false找到false就不会往下检查了
  • 只要有一个false就返回false
• 运算符或||
  • 只要有一个true就返回true
  • 找true找到true就不会往下检查了

非布尔值的与和或

• 与运算：
  • 如果两个值都为true，则返回后面的
  • 两个之中有false则返回靠前的false
• 或运算
  • 如果第一个值为true，则返回第一个值
  • 如果第一个值为false，则返回第二个值

赋值运算符

• += -= = *= /= %=

关系运算符

• 通过关系运算符可以比较两个值的大小关系

• < >= <=

• 任何值和NaN做任何比较都是false
• 比较字符串时比较的是编码
• 比较编码时是一位一位比较的
• 如果两位一样，则比较下一位，借用它来对英文排序
• 比较中文时没有意义
• 如果比较两个字符串型数字，一定要转型

Unicode编码

• 在字符串中使用转义字符输入Unicode编码
• \u四位编码
  • console.log("\u0031")
• 在网页中使用Unicode编码
  • &#编码；这里的编码需要的是十进制

相等运算符

• ==
• 如果两个值类型不同会转换成相同类型
• NaN不和任何值相等
• 可以通过isNaN()函数来判断，是返回true
• 不相等 ！=
• 全等===不会做类型转换
• 不全等！==不会做类型转换

条件运算符

• 条件 ? 语句一：语句二:
• 可以获取最大值

运算符的优先级

• ，运算符
• 分割多个语句，同时声明多个变量赋值
  

代码块

• 可以用{}区分开
• 同一个{}中的语句是一组

if语句

• if（条件表达式）
• if…else
  • 当该语句执行时，会从上到下依次对条件表达式进行求值判断
  • 如果值为true，则执行当前语句
  • 如果值为false，则继续向下判断

练习

• prompt()可以弹出一个提示框，该提示框中会带有一个文本框,返回值是string类型的
• 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字
• 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
  • var score = prompt(“请输入小明的期末成绩：”)；
    

条件分支语句

• 语法：switch(条件表达式){
  case 表达式：
  语句。。。
  break；
  default；
  }

break和continue

• 可以为循环创建一个标签，来标识当前循环
• 语法：标签：循环语句
• 使用break语句时，可以在break后面跟着一个标签，这样break将会结束指定的循环
• continue跳过当次循环
• 通过Math.sqrt()对一个数进行开方

对象的简介

• 1、内建对象
  • 由ES标准定义的对象，在任何的ES的实现中都可以使用
  • 比如：Math String
• 2、宿主对象
  • 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
  • 比如 BOM DOM
• 3、自定义对象
  • 由开发人员自己创建的对象

创建对象

• 使用new关键字调用的函数，是构造函数constructor，构造函数专门用来创建函数的对象
• var obj = Object();
• 在对象中保存的值称为属性
• 向对象中添加属性
  • 语法：对象.属性名 = 属性值；
  • eg：obj.name = “孙悟空”；
• 读取对象中的属性
  • 语法：对象.属性名；
• 删除对象的属性
  • 语法：delete 对象.属性名；

属性名和属性值

• 如果要使用特殊的属性名，不能采用.
  • 语法：对象[“属性名”] = 属性值
  • 读取时也需要采用这种方式
  • 好处：使用[]这种形式去操作属性，更加灵活，在[]中可以直接传递一个变量，这样变量是多少就会读取那个属性
• 属性值可以是一个对象
  • in 运算符
    • 通过该运算符可以检查到一个对象中是否含有指定的属性，有返回true，没有返回false
    • 语法：“属性名” in 对象
  • JS中的变量都是保存到栈内存中的，
    • 基本数据类型的值直接在栈中储存
    • 值与值之间是独立存在，修改一个变量不会影响到其他变量
  • 对象是保存到堆内存中的，
    • 每创建一个新的对象就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响
  • 当比较两个基本数据类型的值时，就是比较值
  • 而比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一模一样的，但是地址不同console.log(obj1==obj2);返回false

对象字面量

- 使用对象字面量来创建对象并赋值
    - 语法：{属性名：属性值，属性名：属性值...}
    - eg:var obj2 = {name:"猪八戒”}；

函数

• 函数也是对象
• 使用typeof检查一个函数对象是，会返回function
• 创建一个函数对象三种方法，常用后两种
• var fun = new Function(“console.log(‘hello’);");
• 语法：函数对象（）；
• fun();
• 使用函数声明来创建一个函数
  • 语法：function 函数名（[形参1，形参2…形参N]）{
    语句…
    }

  function fun1(){
      console.log("bulubulu");
  }
  fun1();
  

• 使用函数表达式来创建一个函数
  • 语法：var 函数名 = function([形参1，形参2…形参N]){
    语句…
    }

  var fun2 = function(){
      console.log("bulubulu");
  }
  

函数的返回值

• 如果return后不跟任何值相当于返回undefined
• 如果函数中不写return，相当于返回undefined

实参可以是任意数据类型

• 当参数过多时考虑封装到对象中

function sayHello(o){
    console.log("a"+o.name+",b"+o.age)
}
var obj = {
    name:"f",
    age:1
}
sayHello(obj);

• 实参也可以是一个函数

返回值可以是任意数据类型

• return{name:"沙和尚”}；

立即执行函数

• 用（）括起匿名函数表示整体
• 立即执行函数：函数定义，立即调用，往往只会执行一次

语法：（function(){
    alert("匿名函数");
}();
eg：(function(a,b)){
        console.log("a = "+a);
        console.log("b = "+b);
}(123,456);

对象

• 对象的属性值可以是任何数据类型，也可以是个函数

obj.name = "孙悟空”；
obj.age = 18;
obj.sayName = function(){
    console.log(obj.name);
}
obj.sayName();

• 函数也可以称为对象的属性，称这个函数是这个对象的方法
• 枚举对象的属性
  • 使用for…in语句
    • 对象中有几个属性，循环体就会执行几次
    • 每次执行时，会将对象中的一个属性的名字赋值给变量
    • 语法：

    for(var 变量 in 对象){
    
    }
    

    • eg:

    for(var n in obj){
        console.log(“属性名：”+n);
        console.log(“属性值：”+obj[n]);
    }
    

全局作用域

• 作用域
  • 作用域指一个变量的作用范围
• 全局作用域
  • 全局作用域
  • 全局作用域在页面打开时创建，在页面关闭时销毁
  • 在全局作用域中有一个全局对象window,它代表的是一个浏览器窗口，它由浏览器创建我们可以直接使用，
  • 在全局作用域中
  • 变量声明提前
    • 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值）
  • 函数的声明提前
  • 使用函数函数声明形式function 函数（）{}会被提前创建
  • 使用函数表达式声明的不会被提前创建
• 函数作用域
  • 在函数里访问的变量遵循就近原则，要想访问全局变量可以在变量前写window.
  • 没有写var相当于声明的是全局变量

this

• 解析器在调用函数时都会向函数内部传递一个隐含参数this，this指向的是一个对象，这个对象称为函数执行的上下文
• 根据函数的调用方式的不同，this会指向不同的对象
  • 以函数方式调用时，this永远都是window
  • 以方法的形式调用时，this就是调用方法的那个对象

使用工厂的方法创建对象

• 通过该方法可以大批量创建对象

function createPerson(name,age,gender){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        alert(this.name);
    }
    return obj;
}
var obj1 = createPerson("孙悟空",13,"男");
obj1.sayName;

构造函数

• 创建一个构造函数
• 构造函数和普通函数的区别就是调用方式不同
• 普通函数直接调用而构造函数需要使用new关键字来调用

function Person(){

}
var per = new Person();

• 构造函数执行流程：
  • 1、创建一个新的对象
  • 2、将新创建的对象设置为函数中的this，在构造函数中可以使用this来引用新建对象
  • 3、逐行执行函数中的代码
  • 4、将新建的对象作为返回值返回
• 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类
• 使用instanceof检查一个对象是否是一个类的实例
  • 语法：对象 instanceof 构造函数
  • 如果是返回true，否则返回false
  • console.log(per instanceof Person);
• eg:

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function(){
        alert(this.name);
    };
}

原型

• 原型prototype
  • 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
  • 这个属性对应着一个对象，这个对象就是我们所谓的原型对象
  • 当函数以构造函数形式调用时，它所创建的对象中都会有一个隐含的属性，指向该函数的原型对象，我们可以通过__proto__来访问该属性
  • 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中
  • 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有用原型对象的
    eg:

  function MyClass(){
  
  }
  //向MyClass的原型中添加属性a
  MyClass.prototype.a = 123;
  //向MyClass的原型中添加一个方法
  MyClass.prototype.sayHello = function(){
      alert("hello");
  }
  var mc = new MyClass();
  

• 检查
  • 使用in检查对象中是否有某个属性时，如果对象中没有但是原型中有，也会返回true
    • console.log(“name” in mc);
  • 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
  • hasOwnProperty在Object的原型中

toString()

• 当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
• 给一个对象添加toString()

function Person(name, age ,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
var per = new Person("孙悟空"，13，"男")
per.toString = function(){
    return "Person[name="+this.name+",age="+this.age+",gender="this.gender"]
};
var result = per.toString();
console.log(per);

• 修改Person原型的toString

Person.prototype.toString = function(){
    return "Person[name="+this.name+",age="+this.age+",gender="this.gender"]
};

垃圾回收（GC）

var obj = new Object();
obj = null;

将不再使用的对象设置为null

数组简介

• 内建对象
• 宿主对象
• 自定义对象
• 数组(Array)
  • 数组也是一个对象，和普通的对象功能相似
  • 数组使用索引：从0开始的元素
• 创建数组对象
  • var arr = new Array();
• 向数组中添加元素
  • 语法：数组[索引] = 值；
  • 同时添加元素
    • var arr = new Array(10，20，30);
• 获取数组的长度
  • 语法:数组.length
  • 最大索引加1，尽量不要创建非连续数组
  • 像数组的最后一个位置添加元素
    arr[arr.length] = 70;

数组字面量

• 使用字面量来创建数组
• 语法：[]
  • var arr = [];
• 也可以同时添加元素
• 创建一个长度为10的数组
  • arr = new Array(10);
• 数组中的元素可以是任意数据类型

数组的方法

• push()
  • 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度
  • 可以将要添加的元素作为方法的参数传递，这样元素会自动添加到数组的末尾
  • arr.push(“唐僧”);
• pop()
  • 删除数组的最后一个元素，并将被删除的元素作为返回值返回
  • arr.pop();
• unshift()
  • 向数组开头加一个或多个元素，并返回数组长度
• shift()
  • 删除数组的第一个元素，并将被删除的元素作为返回值返回
• slice()
  • 可以用来从数组中提取元素
  • 该方法不会改变数组元素，而是将截取到的元素封装到一个新数组中返回
  • 参数：1、截取开始的位置的索引，包含开始索引
    2、截取结束的位置的索引，不包含结束索引,不写截取从开始以后的索引
  • 负数表示倒数
  • var result = arr.slice(1，4)
• splice()
  • 删除数组中指定元素，返回删除的元素
  • 参数：
    第一个，表示开始位置的索引
    第二个，删除的数量，写0只添加元素
    第三个及以后传递的元素自动插入开始索引前面
• concat()
  • 可以将两个或多个数组，或元素，并成新数组并返回
  • 对原数组没有影响
• join()
  • 将数组转成字符串返回
  • join括号里的参数是连接符，不传就是逗号
• reverse()
  • 该方法直接修改原数组
  • 颠倒原数组
• sort()
  • 对数组中的元素进行排序
  • 按照Unicode编码排序
  • 自己指定排序规则，在sort（）中添加回调函数
  • 回调函数需要定义两个形参
  • 浏览器将会分别使用数组中的元素作为实参去调用回调函数，a肯定在b前面
  • 如果返回一个大于0的值，则元素会交换位置
  • 如果返回一个小于0的值，则元素位置不变
  • 如果返回0，元素位置不变

  arr = [5,4,2,1,3,6,7,8]
  arr.sort(function(a,b){
      return a-b;
  })
  

数组的遍历

• for循环

  for(var i=0 ; i<arr.length ; i++){
      console.log(arr[i]);
  }
  

• forEach

函数的方法call和apply

• 调用call()和apply()可以将一个对象指定为第一个函数，此时对象将会成为函数执行的this
• call()方法可以将实参在对象之后依次传递
• apply（）方法需要将实参封装到数组中统一传递

function fun(){
    alert(this.name);
}
var obj = {
    name:"obj"
    sayName:function(){
        alert(this.name);
    }
}
fun.call(obj,2,3);
fun.apply(obj,[2,3]);

this的情况：
1、以函数的形式调用时，this永远都是window
2、以方法的形式调用，this是调方法的对象
3、以构造函数形式调用时，this是新创建的那个对象
4、使用call()和apply()调用时，this是指定的那个对象

arguments

• 在调用函数时，浏览器每次都会传递两个隐含的参数
  • 1、函数的上下文对象this
  • 2、封装实参的对象arguments

Date对象

• Date对象表示一个时间
• 创建一个Date对象
  • var d = new Date();

Math

• 是一个工具类
• Math.abs()可以用来计算一个数的绝对值
• Math.ceil()可以对一个数进行向上取整
• Math.floor()可以对一个数进行向下取整
• Math.round()四舍五入取整
• Math.random()0-1之间的随机数
  • 生成一个0-x之间的随机数
  • Math.round(Math.random()*x)
  • 生成一个x-y之间的随机数
  • Math.round(Math.random()*(y-x)+x)
• Math.max()获取多个数中的最大值

包装类

• 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
• String()
  • 可以将基本数据类型转换为String对象
• Number()
  • 可以将基本数据类型的数字转换为Number对象
• Boolean()
  • 可以将基本数据类型的布尔值转换为Boolean对象
• 转换后比较时会有问题
  创建一个Number类型的对象
  var num = new Number(3);

字符串的方法

• 创建一个字符串
  • var str = “Hello”;
• 在底层字符串是由字符数组的形式储存的
• length返回长度
• charAt()
  • 可以返回字符串中指定位置字符
• charCodeAt()
  • 获取指定位置字符编码
• fromCharCode()
  • 根据字符编码获取字符
• concat()
  • 链接两个或多个字符串
• indexof()
  • 该方法可以检索一个字符内容中是否含有指定内容
  • 如果有返回第一次出现的索引
  • 没有返回-1
  • 第二个参数是开始寻找的索引
• lastIndexof()
• slice()
• substring()
  • 可以用来截取字符串
  • 和slice相似不能接受负值
• substr()
  • 用来截取字符串
  • 参数：
    • 1、截取开始位置的索引
    • 2、截取的长度
• split()
  • 可以将一个字符串拆分成一个数组

正则表达式

• admint
• 创建正则表达式的对象
  • 语法：
    • var 变量 = new RegExp(“正则表达式（可以是一个变量比较灵活）”,“匹配模式”);
    • 匹配模式：
      • i忽略大小写
      • g全局匹配模式
• 正则表达式的方法
• test()
  • 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
  • 如果符合返回true,否则返回false

  检查字符串中是否有a
  var reg = new RegExp("a");
  var str = "a";
  var result = reg.test(str);
  

• 用字面量来创建正则表达式
  • 语法：var 变量 = /正则表达式/匹配模式；
  • 使用|表示或者，[]里的关系也是或，[a-z]任意小写字母
  • [^]表示除了[]里的

字符串和正则相关方法

• split()
  • 可以将一个字符串拆分成一个数组
  • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
  • 全都拆
• search()
  • 可以搜素字符串中是否含有指定内容，
  • 如果搜索到指定内容，则返回第一次出现的索引，如果没有搜索到返回-1
  • 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
• match()
  • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
  • 只有设置全局匹配才会找全，否则只找第一个
  • 返回数组
• replace()
  • 可以将字符串中指定内容替换为新的内容
  • 参数:
    • 1.被替换的内容
    • 2.新的内容
  • 默认只会替换一个

正则表达式语法

• 量词
  • 设置一个内容出现的次数
  • {n}正好出现次数n
  • 量词只对它前面一个内容起作用
    //ababab
    • var reg = /(ab){3}/;
  • {m,n}正好出现m到n次
  • +表示至少出现一次，相当于{1，}
  • • 0个或多个，相当于{0，}
  • ？0个或1个，相当于{0，1}
  • 检查一个字符串中是否以a开头
    • ^表示开头 reg = /^a/;
  • $表示结尾reg=/a$/;
  • . 表示任意字符
  • \表示转义字符
  • \w 任意字母、数字、_ [A-z0-9_]
  • \w 除了字母、数字、_ [^A-z0-9_]
  • \d 任意数字[0-9]
  • \D 除了数字[^0-9]
  • \s 空格
  • \S 除了空格
  • \b 单词边界
    • 比如 reg = /\bchild\b/只有独立的child单词符合标准
  • \B 除了单词边界
• 接受一个用户的输入
  • var str = prompt(“请输入你的用户名”)；
  • 去除开头的空格
  • str = str.replace(/^\s*/,"");
  • 去除结尾的空格
  • str = str.replace(/\s*$/,"");
  • 去掉字符串前后的空格
  • str = str.replace(/^\s*|\s*$/g,"");

DOM

• DOM即Docment Object Model 文档对象模型
• 节点Node，网页的每一部分都是节点
  • 文档节点：html整个文档
  • 元素节点：html标签
  • 属性节点：元素的属性
  • 文本节点：文本内容
• 浏览器已经为我们提供文档节点 对象这个对象是window属性
• 可以在网页中直接使用，文档节点代表整个网页
  eg:

<buttom id="btn">我是一个按钮</button>
//获取buttom对象
var btn = document.getElementById("btn");
//修改按钮文字
btn.innerHTML = "cfssb";

事件

• 事件就是用户和浏览器之间的交互行为

//获取buttom对象
var btn = document.getElementById("btn");
//可以为按钮的对应事件绑定处理函数的形式来响应事件，事件触发时，其对应函数执行
//绑定一个单击事件
btn.onclick = function(){
    alert("你还点")；
}；

文档的加载

• 如果要把JS代码写在HTML的上面
• onload事件会在整个页面加载完成出现
  • window.onload = function(){
    //把代码写到这里
    }

DOM查询

//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
    //查找#bj节点
    var bj = document.getElementById("bj");
    //打印bj
    //innerHTML 通过这个属性获取到元素内部html代码
    alert(bj.innerHTML);
};

//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
    //查找所有li节点
    //getElementByTagName()可以根据标签名来获取一组元素节点对象
    //返回一个数组类对象
    var lis = document.getElementByTagName("li");
    //遍历lis
    for(var i=0 ; i<lis.length ; i++){
        alert(lis[i].innerHTML);
    }
};

//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
    //查找所有name=gender节点
    var inputs = document.getElementByName("gender");
    for(var i=0 ; i<inputs.length ; i++){
        //读取元素节点属性
        //对于自结束标签不能用innerHTML
        alert(inputs[i].value);
    }
};

• 如果需要读取元素节点属性
  • 直接使用 元素.属性名
  • 注意class属性不能采用这种方式
  • 需要用元素.className