高校网站建设规范amp 网站开发
JS对象 Array
Array对象用于定义数组
-
var 变量名=new Array(元素列表)；
-
var 变量名=[元素列表]
访问
-
arr[索引]=值；
注意：JS中数组相对于Java中集合，数组的长度是可变的，JS是弱类型，所以可以存储任意类型的数据
属性
length 设置或返回数组中元素的数量
方法
forEach() 遍历数组中每个有值的元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
</head>
<body>
</body>
<script>// var arr=new Array(1,2,3,4);// var arr =[1,2,3,4];// console.log(arr[0]);
// // 长度可变，类型可变// var arr=new Array(1,2,3,4);// arr[10]=10;// arr[9]='a';// arr[8]=true;// console.log(arr);
// var arr=[1,2,3,4];// for (let index=0;index<arr.length;index++){// console.log(arr[index]);// }
var arr=[1,2,3,4];// arr.forEach(function (e) {// console.log(e);//// })
// // 箭头函数// arr.forEach((e)=>{// console.log(e);// })// arr.push(1);// console.log(arr);arr.splice(2,2);console.log(arr);
</script>
</html>
JS对象 String
创建方式
-
var 变量名=new String("XX");
-
var 变量名="XX";
属性
length 字符串长度
方法
charAt() 返回在指定位置的字符
indexOf() 检索字符串
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
</head>
<body>
</body>
<script>// var str=new String("SS");var str=" aa hjjg";console.log(str);
console.log(str.length);
console.log(str.charAt(1));
console.log(str.indexOf("j"));
var str1=str.trim();console.log(str1);
// 含头不含尾console.log(str.substring(0,5));
</script>
</html>
JS对象 JSON
var 对象名={
属性名1：属性值1，
属性名2：属性值2，
函数名称：function(形参列表){}
}；
调用格式
对象名.属性名；
对象名.函数名；
概念：通过JavaScript对象标记法书写的文本
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
定义
var 变量名={"key":value1,"key":"value2"};
value数据类型为：
-
数字，整型或浮点数
-
字符串，在双引号中
-
逻辑值，true/false
-
数组，方括号中
-
对象，花括号中
-
null
JSON字符串转为JS对象
var jsObject=JSON.parse(userStr);
JS对象转为JSON字符串
var jsonStr=JSON.stringify(jsObject);
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
</head>
<body>
</body>
<script>// // 自定义对象// var user={// name:"asd",// age:10,// sex:"male",// // eat:function () {// // alert("eat");// // }// eat(){// alert("eat");// }// }// alert(user.name);// user.eat();
// 定义JSONvar jsonstr='{"name":"jerry","age":18}';var obj=JSON.parse(jsonstr);alert(obj.name);alert(JSON.stringify(obj));
</script>
</html>
BOM
浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
组成
-
Window：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
Window
浏览器窗口对象
直接使用window,其中window可以省略
属性
-
history：对History对象的只读引用
-
location：用于窗口或框架的Location对象
-
navigator：对Navigator对象的只读引用
方法
-
alert()：显示带有一段消息和一个确认按钮的警告框
-
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
-
setInterval()：按照指定的周期(毫秒计)来调用函数或计算表达式
-
setTimeout()：在指定的毫秒数后调用函数或计算表达式
Location
地址栏对象
获取
location.属性；
属性
href：设置或返回完整的url
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
</head>
<body>
</body>
<script>// window.alert("hello");// alert("123");
// var flag=confirm("are you ok?");// alert(flag);
// var i=0;// setInterval(// function () {// i++;// console.log(i);// },2000// );
// setTimeout(function () {// alert("js");// },3000);
alert(location.href);location.href="https://www.itcast.cn";
</script>
</html>
DOM
文档对象模型
将标记语言的各个组成部分封装为对应的对象
-
Document：整个文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
JavaScript通过DOM，就能对HTML进行操作
-
改变HTML元素的内容
-
改变HTML元素的样式CSS
-
对HTML DOM事件作出反应
-
添加和删除HTML元素
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
-
根据id属性值获取，返回单个对象
var h1=document.getElementById('h1');
-
根据标签名称获取，返回对象数组
var divs=document.getElementByTagName('div');
-
根据name属性值获取，返回对象数组
var divs=document.getElementByName('hobby');
-
根据class属性值获取，返回对象数组
var divs=document.getElementByClassName('cls');
<!--文件类型为HTML--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>焦点访谈</title> </head> <body><div class="cls">船只教育</div><div class="cls">黑马程序员</div> <input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏 </body> <script>// var divs=document.getElementsByTagName("div");// for(let i=0;i<divs.length;i++){// alert(divs[i]);// } // var ins=document.getElementsByName("hobby");// for(let i=0;i<ins.length;i++){// alert(ins[i]);// } // var ins=document.getElementsByClassName("cls");// for(let i=0;i<ins.length;i++){// alert(ins[i]);// } var ins=document.getElementsByClassName("cls");var div1=ins[0];div1.innerHTML="666"; </script> </html>