1. Array对象
JavaScript Array对象用于定义数组
1.1 定义格式
数组的定义格式有两种:
-
方式1
var 变量名 = new Array(元素列表);
例如:
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)
-
方式2
var 变量名 = [元素列表];
例如:
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)
注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [ ] 定义
1.2 元素访问
访问数组中的元素和 Java 语言的一样,格式如下:
arr[索引] = 值;
代码演示:
// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
//alert(arr2);
// 访问
arr2[0] = 10;
alert(arr2)
1.3 特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
例如如下代码:
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined
上面代码在定义数组中给了三个元素,又给索引是 10 的位置添加了数据 10,在 JavaScript 中没有赋值的话,默认就是 undefined
。
如果给 arr3
数组添加字符串的数据,也是可以添加成功的
arr3[5] = "hello";
alert(arr3[5]); // hello
1.4 属性
Array 对象提供了很多属性,如下图是官方文档截取的
而我们只讲解 length
属性,该数组可以动态的获取数组的长度。而有这个属性,我们就可以遍历数组了
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}
1.5 方法
Array 对象同样也提供了很多方法,如下图是官方文档截取的
-
push 函数:给数组添加元素,也就是在数组的末尾添加元素
参数表示要添加的元素
// push:添加方法 var arr5 = [1,2,3]; arr5.push(10); alert(arr5); //数组的元素是 {1,2,3,10}
-
splice 函数:删除元素
参数1:索引。表示从哪个索引位置删除
参数2:个数。表示删除几个元素
// splice:删除元素 var arr5 = [1,2,3]; arr5.splice(0,1); //从 0 索引位置开始删除,删除一个元素 alert(arr5); // {2,3}
..........................
2 String对象
String对象的创建方式有两种
-
方式1:
var 变量名 = new String(s);
-
方式2:
var 变量名 = "数组";
属性:
String对象提供了很多属性,下面给大家列举了一个属性 length
,该属性是用于动态的获取字符串的长度
函数:
String对象提供了很多函数(方法),下面给大家列举了两个方法。
String对象还有一个函数 trim()
,该方法在文档中没有体现,但是所有的浏览器都支持;它是用来去掉字符串两端的空格。
代码演示:
var str4 = ' abc ';
alert(1 + str4 + 1);
上面代码会输出内容 1 abc 1
,很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim()
函数
var str4 = ' abc ';
alert(1 + str4.trim() + 1); #labc1
输出的内容是 1abc1
。这就是 trim()
函数的作用。
3. 自定义对象
在 JavaScript 中自定义对象特别简单,下面就是自定义对象的格式:
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
调用属性的格式:
对象名.属性名
调用函数的格式:
对象名.函数名()
接下来通过代码演示一下,让大家体验一下 JavaScript 中自定义对象
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~
4. Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
4.1 获取window对象
该对象不需要创建直接使用 window
,其中 window.
可以省略。比如我们之前使用的 alert()
函数,其实就是 window
对象的函数,在调用是可以写成如下两种
-
显式使用
window
对象调用window.alert("abc");
-
隐式调用
alert("abc")
4.2 window对象属性
window
对象提供了用于获取其他 BOM 组成对象的属性
也就是说,我们想使用 Location
对象的话,就可以使用 window
对象获取;写成 window.location
,而 window.
可以省略,简化写成 location
来获取 Location
对象。
4.3 window对象函数
window
对象提供了很多函数供我们使用,而很多都不常用;下面给大家列举了一些比较常用的函数
setTimeout(function,毫秒值)
: 在一定的时间间隔后执行一个function,只执行一次setInterval(function,毫秒值)
:在一定的时间间隔后执行一个function,循环执行
confirm代码演示:
// confirm(),点击确定按钮,返回true,点击取消按钮,返回false
var flag = confirm("确认删除?");
alert(flag);
定时器代码演示:
setTimeout(function (){
alert("hehe");
},3000);
当我们打开浏览器,3秒后才会弹框输出 hehe
,并且只会弹出一次。
setInterval(function (){
alert("hehe");
},2000);
当我们打开浏览器,每隔2秒都会弹框输出 hehe
。
4.4 案例
需求:每隔1秒,灯泡切换一次状态
需求说明:
有如下页面效果,实现定时进行开灯、关灯功能
初始页面环境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById('myImage').src='../imgs/on.gif';
}
function off(){
document.getElementById('myImage').src='../imgs/off.gif'
}
</script>
</body>
</html>
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById('myImage').src='../imgs/on.gif';
}
function off(){
document.getElementById('myImage').src='../imgs/off.gif'
}
//定义一个变量,用来记录灯的状态,偶数是开灯状态,奇数是关灯状态
var x = 0;
//使用循环定时器
setInterval(function (){
if(x % 2 == 0){//表示是偶数,开灯状态,调用 on() 函数
on();
}else { //表示是奇数,关灯状态,调用 off() 函数
off();
}
x ++;//改变变量的值
},1000);
</script>
</body>
</html>
5. History对象
History 对象是 JavaScript 对历史记录进行封装的对象。
-
History 对象的获取
使用 window.history获取,其中window. 可以省略
-
History 对象的函数
6. Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象,跳转到任意页面。
6.1 获取Location对象
使用 window.location获取,其中window. 可以省略
window.location.方法();
location.方法();
6.2 Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 href
代码演示:
alert("要跳转了");
location.href = "https://www.baidu.com";
在浏览器首先会弹框显示 要跳转了
,当我们点击了 确定
就会跳转到 百度 的首页。
6.3 案例
需求:3秒跳转到百度首页
分析:
-
3秒跳转,由此可以确定需要使用到定时器,而只跳转一次,所以使用
setTimeOut()
-
要进行页面跳转,所以需要用到
location
对象的href
属性实现
代码实现:
document.write("3秒跳转到首页...");
setTimeout(function (){
location.href = "https://www.baidu.com"
},3000);
7. Element对象
HTML 中的 Element 对象可以通过 Document
对象获取,而 Document
对象是通过 window
对象获取。
Document
对象中提供了以下获取 Element
元素对象的函数
-
getElementById()
:根据id属性值获取,返回单个Element对象 -
getElementsByTagName()
:根据标签名称获取,返回Element对象数组 -
getElementsByName()
:根据name属性值获取,返回Element对象数组 -
getElementsByClassName()
:根据class属性值获取,返回Element对象数组
例:
-
根据
id
属性值获取上面的img
元素对象,返回单个对象var img = document.getElementById("light"); alert(img);
-
根据标签名称获取所有的
div
元素对象var divs = document.getElementsByTagName("div");// 返回一个数组,数组中存储的是 div 元素对象 // alert(divs.length); //输出 数组的长度 //遍历数组 for (let i = 0; i < divs.length; i++) { alert(divs[i]); }
-
获取所有的满足
name = 'hobby'
条件的元素对象//3. getElementsByName:根据name属性值获取,返回Element对象数组 var hobbys = document.getElementsByName("hobby"); for (let i = 0; i < hobbys.length; i++) { alert(hobbys[i]); }
-
获取所有的满足
class='cls'
条件的元素对象//4. getElementsByClassName:根据class属性值获取,返回Element对象数组 var clss = document.getElementsByClassName("cls"); for (let i = 0; i < clss.length; i++) { alert(clss[i]); }