一. Array对象
定义
var 变量名 = new Array(元素列表);
var 变量名 = [元素列表];
访问
arr[索引] = 值;
注意
JS数组类似于Java的集合, 长度, 类型都可变
常用的属性和方法
属性: length 数组元素的个数
方法: push( ) 添加元素
splice( ) 删除元素
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
</head>
<body>
<script src="../js/demo2.js">
</script>
</body>
</html>/* //第一种方式
var arr1 = new Array(1,2,3);
alert(arr1);
//第二种方式
var arr2 = [2,3,4];
alert(arr2);*/
//属性:length: 数组中元素的个数
/*for(let i = 0;i<arr2.length; i++){
alert(arr2[i]);
}*/
//push:添加方法
var arr3 = [9,8,7];
arr3.push(6);
//alert(arr3);
//splice:删除元素
arr3.splice(3,1);//第一个参数:索引 第二个参数:删除的个数
alert(arr3);二. String对象
定义
var 变量名 = new String(s);
var 变量名 = s;
常用的属性和方法
属性: length 字符串的长度
方法: charAt( ) 返回指定位置的字符
indexOf( ) 检索字符串
trim( ) 去除字符串前后两端的空白字符
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String 对象</title>
</head>
<body>
<script>
//var s1 = new String("js1");//方式一
//var s2 = "js2";//方式二
//alert(s1.length);
//alert(s2);//弹出js2
//var a1 = s1.charAt(1);
//alert(a1);//弹出s
var str1 = " aaa ";
alert(1+str1.trim()+1);
</script>
</body>
</html>效果展示
三. 自定义对象
格式
var 对象名称 = {
属性名称1: 属性值1,
属性名称2: 属性值2,
......
属性名称: function(形参列表){ }
...
};
四. BOM
介绍
Browser Object Model (BOM) 浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成:
Window:浏览器窗口对象
Navigator:浏览器对象
Screen: 屏幕对象
History:历史记录对象
Location:地址栏对象
Window的属性和方法
Window:浏览器窗口对象
获取:直接使用 window，其中window.可以省略
window.alert("abc");
属性:获取其他BOM对象
history 对 History 对象的只读引用
Navigator 对 Navigator 对象的只读引用
Screen 对 Screen 对象的只读引用
location 用于窗口或框架的 Location 对象
方法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期 (以毫秒计) 来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window对象</title>
</head>
<body>
<script>
//var flag = confirm("window");
//alert(flag);//确定为true, 取消为false
//setTimeout(function,毫秒值); 在一定的时间间隔后执行一个function,只执行一次
//setInterval(function,毫秒值); 在一定的时间间隔后执行一个function,循环执行
//setTimeout(function(){alert("666")},2000);
setInterval(function(){alert("666")},2000);
</script>
</body>
</html>History和Location
History:历史记录
Location: 地址栏对象
使用window.history获取,其中window.可以省略
使用window.location获取,其中window.可以省略
history方法
back( ) 加载history列表的前一个URL
forward( ) 加载history列表的下一个URL
lactation属性
href 设置或返回完整的URL
五. DOM
HTML DOM: 针对HTML文档的标准模型
Image: <img>
Button: <input type="button">
Element: 元素对象
获取:使用Document对象的方法来获取
getElementById: 根据id属性值获取，返回一个Element对象
getElementsByTagName: 根据标签名称获取，返回Element对象数组
getElementsByName: 根据name属性值获取，返回Element对象数组
getElementsByClassName: 根据class属性值获取，返回Element对象数组
代码
//getElementById: 根据id属性值获取，返回一个Element对象
var va1 = document.getElementById("male");
alert(va1);
//getElementsByTagName: 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
for(var i = 0; i < divs.length; i++){
alert(divs[i]);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element test</title>
</head>
<body>
<div class="cla">div1</div><br>
<div class="cla">div2</div><br>
性别:
<input type="radio" name="gender" value="1" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="2" id="female">
<label for="female">女</label><br>
爱好:
<input type="checkbox" name="hobby" value="1">跑步
<input type="checkbox" name="hobby" value="2">打乒乓球
<input type="checkbox" name="hobby" value="3">打篮球
<br>
<script src="../JS/demo1.js">
//getElementById: 根据id属性值获取，返回一个Element对象
//var va1 = document.getElementById("male");
//alert(va1);
//var divs = document.getElementsByClassName("cla");
//alert(divs.length);
//for (let i = 0; i < divs.length; i++){
// alert(divs[i]);
//}
</script>
</body>
</html>
