目录
1.array 数组对象
2.String 字符串对象
3.JSON 对象(数据载体,进行数据传输)
4.BOM 浏览器对象
5.DOM 文档对象(了解)
1.array 数组对象
定义方式1:var 变量名 = new Array(元素列表);
定义方式2:var 变量名 = [元素列表]; 注:中括号
特点:长度可变 类型可变
数组常用方法:
forEach() | 遍历数组中的每个有值的元素,并调用一次传入的函数 |
Push() | 将新元素添加到数组的末尾,并返回新的长度 |
Splice() | 从数组中删除元素 |
ES6 箭头函数:(…) => {…} | 简化函数定义 |
2.String 字符串对象
方式1:var 变量名 = new String("…");
方式2:var 变量名 = "…";
注:" 和 ' 都可以定义字符串
常用方法:
charAt() | 返回在指定位置的字符 |
IndexOf() | 检索字符串 |
Trim() | 去除字符串两边的空格 |
Substring() | 提取字符串中两个指定的索引号之间的字符 |
3.JSON 对象(数据载体,进行数据传输)
JS自定义对象定义格式:
Var 对象名 = {
属性名1: 属性值1,
…
函数名称:function(形参列表){ }
};
省略后:函数名称(形参列表){ }
案例:
调用格式:
对象名.属性名;
对象名.函数名();
JSON:
定义(JSON字符串):
var 变量名 = '{"key1": value1, "key": value2}';
补:数组(方括号中)
对象(花括号中)
案例:
var userStr = '{"name": "Alice","age": 16, "addr": ["天空之城", "天之彼方", "恶魔城"]}'
JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
4.BOM 浏览器对象
1.window:浏览器窗口对象
获取:
window.alert("Hello Window");
alert("Hello Window"); window. 可以省略
方法:
alert(); | 显示带有一段消息和一个确认按钮的警告框 |
confirm(); | 显示带有一段消息和确认按钮和取消按钮的对话框 |
setlnterval(); | 按照指定的周期(以毫米计)来调用函数或计算表达式 |
setTimeout(); | 在指定的毫秒数后调用函数或计算表达式 |
案例:
2.location:地址栏对象
获取:
使用window.location获取,其中window. 可以省略
window.location.属性;
location.属性;
属性:
href:设置或返回完整的URL
案例:
5.DOM 文档对象(了解,Vue3可代替)
作用:获取元素对象,然后为进行操作元素做准备
将标记语言的各个组成部分封装为对应的对象,便于后续操作改变对象:
Document | 整个文档对象 例:<html> |
Element | 元素对象 例:<a>,<div>,<body>… |
Attribute | 属性对象 例:href="…" |
Text | 文本对象 就是内容的文字等 |
Comment | 注释对象 |
通过DOM操作,对HTML进行操作:
1.改变HTML元素的内容
2.改变HTML元素的样式(CSS)
3.对HTML DOM事件做出反应
4.添加和删除HTML元素
Document对象中提供了获取Element元素对象的函数:
1.根据id 属性值获取,返回单个Element对象
var h1 = document.getElementById('h1');
2.根据标签名称获取,返回Element对象数组
var divs = document.getElementsByTagName('div');
3.根据name属性值获取,返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4.根据class属性值获取,返回Element对象数组
var clss = document.getElementsByClassName('cls');
最后在网站上找对应标签的函数(方法)进行操作实现.
参考书网站:JavaScript 和 HTML DOM 参考手册
事件监听
常见事件:
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onkeydown | 某个键盘的键被按下 |
onmouseover | 鼠标被移到某元素上 |
onmouseout | 鼠标从某元素移开 |
实现操作: