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
- 特殊值: Infinity无穷
- 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
- 方法一:调用Number()函数
- 将其他类型转换为Boolean
- 使用Boolean()函数
- 数字除了0和NaN其余都是true
- 字符串除了空串,其余都是true
- null和undefined都是false
- 对象也会转换成true
- 使用Boolean()函数
其他进制数字
- 十六进制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(“请输入小明的期末成绩:”);
- 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
- in 运算符
对象字面量
- 使用对象字面量来创建对象并赋值
- 语法:{属性名:属性值,属性名:属性值...}
- eg:var obj2 = {name:"猪八戒”};
函数
- 函数也是对象
- 使用typeof检查一个函数对象是,会返回function
- 创建一个函数对象三种方法,常用后两种
- var fun = new Function(“console.log(‘hello’);");
- 语法:函数对象();
- fun();
- 使用函数声明来创建一个函数
- 语法:function 函数名([形参1,形参2…形参N]){
语句…
}
function fun1(){ console.log("bulubulu"); } fun1();
- 语法:function 函数名([形参1,形参2…形参N]){
- 使用函数表达式来创建一个函数
- 语法:var 函数名 = function([形参1,形参2…形参N]){
语句…
}
var fun2 = function(){ console.log("bulubulu"); }
- 语法:var 函数名 = function([形参1,形参2…形参N]){
函数的返回值
- 如果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]); }
- 使用for…in语句
全局作用域
- 作用域
- 作用域指一个变量的作用范围
- 全局作用域
- 全局作用域
- 全局作用域在页面打开时创建,在页面关闭时销毁
- 在全局作用域中有一个全局对象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的原型中
- 使用in检查对象中是否有某个属性时,如果对象中没有但是原型中有,也会返回true
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/;
- 表 示 结 尾 r e g = / 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(){
//把代码写到这里
}
- 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