JS对象-Json
//Json 字符串转JS对象
var jsObject = Json.parse(userStr);
//JS对象转JSON字符串
var jsonStr = JSON.stringify(jsObject);
JS对象-BOM
BOM是浏览器对象模型，允许JS与浏览器对话
它包括5个对象：window、document、navigator、screen、history
常用方法：
alert()：弹出一个警告框，用于提示用户。
window.alert("hello");
confirm()：弹出一个确认框，用于确认或取消某个操作。
prompt()：弹出一个输入框，用于用户输入一些内容。
setTimeout()：在指定的毫秒数后执行一次指定的函数或一段代码。
setInterval()：每隔指定的毫秒数重复执行一次指定的函数或一段代码。
location
window.location.属性（其中window可以省略）
location.href//获得地址
DOM对象
文档对象模型
将标记语言的各个 组成部分封装为对应的对象：
getElementById()：根据id属性获取一个元素节点。
getElementsByClassName()：根据class属性获取一组元素节点。
getElementsByTagName()：根据标签名获取一组元素节点。
querySelector()：根据CSS选择器获取一个元素节点。
querySelectorAll()：根据CSS选择器获取一组元素节点。
<!-- HTML代码 -->
<ul id="list">
<li class="item">第一项</li>
<li class="item">第二项</li>
<li class="item">第三项</li>
</ul>
// 根据id获取元素
var list = document.getElementById('list');
console.log(list);
// 根据class获取元素
var items = document.getElementsByClassName('item');
console.log(items);
// 根据标签名获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);
// 根据CSS选择器获取元素
var firstItem = document.querySelector('.item');
console.log(firstItem);
var allItems = document.querySelectorAll('.item');
console.log(allItems);
JS事件监听
1.通过HTML标签中的事件属性绑定
<button id="myButton" onclick="on()">点击我</button>
function on(){
alert("点了");
}
2.通过DOM属性绑定
<button id="myButton">点击我</button>
（1） -> 语法 事件源.on事件类型 = 事件处理函数
-> 特点 同一个事件源的同一个事件类型只能绑定一个事件处理函数
（2） -> 语法 事件源.addEventListener(‘事件类型’, 事件处理函数)
-> 特点 可以个同一个事件源的同一个事件类型绑定多个事件处理函数，会按照顺序依次触发
// 获取按钮元素
var button = document.getElementById('myButton');
//语法(1)
button.onclick=function(){
console.log("点了");
}
// 语法(2)为按钮绑定点击事件
button.addEventListener('click', function() {
alert('按钮被点击了!');
});
常见事件
JS事件绑定 各种事件讲解见：https://blog.csdn.net/huangwfu/article/details/128554495
常见的事件类型
- 鼠标事件
click 鼠标左键点击
dblclick 鼠标左键双击
contextmenu 鼠标右键单击
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动
mouseover 鼠标移入
mouseout 鼠标移出
mouseenter 鼠标移入事件
mouseleave 鼠标离开 - 键盘事件
keydown 键盘按下事件
keyup 键盘抬起
keypress 键盘键入事件
。。。
