JavaWeb1 Json+BOM+DOM+事件监听

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 键盘键入事件
。。。