Javascript - 2
Javascript - 2 事件
DOM
DOM - document object model - HTML 文档的结构化表示 由浏览器自动创建，以 树结构存储，每一个 HTML 元素（标签、内容、属性）都是一个对象
DOM允许我们使用 js 访问 HTML 元素和样式，以操作它们
- 改变文本
- 改变 HTML 属性
- 改变 CSS 样式
可以通过 js 访问和交互每一个节点
DOM 和 DOM 操作 不是js，它们是 Web API 的一部分，我们是使用 js 访问Web API 库(浏览器提供，也是js写的)
DOM 树
- DOCUMENT - DOM 的入口点
DOM 总是以 DOCUMENT 对象开头（在最顶端）
- <html> - DOCUMENT 的第一个子元素
<html> 是 HTML 文档的根元素
-
<head> <body> - <html> 的两个子元素
-
DOM树上还有 TEXT(文本)
querySelector() 方法
querySelector() 返回一个元素
'use strict';
// 传入选择器（css一样的选择器）
document.querySelector('.message');
textContent 属性
返回元素的文本内容
document.querySelector('.message').textContent;
value 属性
获取 input filed 的实际值
console.log(document.querySelector('.guess').value);
事件监听器 Event Listener
事件 - 页面上发生的事
鼠标单击、鼠标移动、按键...
事件监听器 - 等待事件的发生，然后对它做出反应
处理点击事件
- 选择事件发生的元素
- 在这个元素上添加事件监听器 .addEventListener
- 在 事件监听器 中传入 事件的类型
- 指定 事件监听器 的反应（事件处理程序）
ducument.querySelector('.check').addEventListener('click',function() {
console.log(document.querySelector('.guess').value);
})
Math 是js的对象
Math.random() 返回 0-1(不包括1) 的随机数; Math.trunk() 去除小数
// 秘密数字
const secretNumber = Math.trunk(Math.random()+1); // 1-20
// 总分
let score = 20;
// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {
// 从用户界面获取的，通常是一个字符串
const guess = Number(ducument.querySelector('.guess').value);
// 没有有效输入
if(!guess) {
ducument.querySelector('.message').textContent = 'No number!';
// 猜中
}else if(guess === secretNumber){
ducument.querySelector('.message').textContent = 'Correct number!';
document.querySelector('.number').textContent = secretNumber;
// 猜太大
}else if(guess > secretNumber){
if(score > 1){
ducument.querySelector('.message').textContent = 'Too high!';
score--;
document.querySelector('.score').textContent = score;
}else{
ducument.querySelector('.message').textContent = 'You lose!';
}
// 猜太小
}else if(guess < secretNumber){
if(score > 1){
ducument.querySelector('.message').textContent = 'Too low!';
score--;
document.querySelector('.score').textContent = score;
}else{
ducument.querySelector('.message').textContent = 'You lose!';
}
}
})
操纵CSS
style 属性
- 选择要操纵的元素
- 访问该元素的
style属性 - 选择要更改的 css属性
js中 所有有两个单词的属性名称 要使用 驼峰命名
当操纵一个 style 时，需要指定 string
// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {
const guess = Number(ducument.querySelector('.guess').value);
if(!guess) {
ducument.querySelector('.message').textContent = 'No number!';
}else if(guess === secretNumber){
ducument.querySelector('.message').textContent = 'Correct number!';
document.querySelector('.number').textContent = secretNumber;
// 操纵背景颜色
document.querySelector('body').style.backgroundColor = '#60b347';
// 操纵大小
document.querySelector('.number').style.width = '30rem';
}else if(guess > secretNumber){
if(score > 1){
ducument.querySelector('.message').textContent = 'Too high!';
score--;
document.querySelector('.score').textContent = score;
}else{
ducument.querySelector('.message').textContent = 'You lose!';
}
}else if(guess < secretNumber){
if(score > 1){
ducument.querySelector('.message').textContent = 'Too low!';
score--;
document.querySelector('.score').textContent = score;
}else{
ducument.querySelector('.message').textContent = 'You lose!';
}
}
})
重构
重构代码，但不改变它的功能（improve code, 消灭重复代码）
// **
const displayMessage = function(message){
ducument.querySelector('.message').textContent = message;
}
// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {
const guess = Number(ducument.querySelector('.guess').value);
if(!guess) {
displayMessage('No number!');
}else if(guess === secretNumber){
displayMessage('Correct number!');
document.querySelector('.number').textContent = secretNumber;
document.querySelector('body').style.backgroundColor = '#60b347';
document.querySelector('.number').style.width = '30rem';
}else if(guess !== secretNumber){
if(score > 1){
// **
displayMessage(guess > secretNumber ? 'Too high!' : 'Too high!');
score--;
document.querySelector('.score').textContent = score;
}else{
displayMessage('You lose!');
}
}
模态窗口 Modal Window
窗口已经存在了，我们要做的是展示它
querySelector 只会选择第一个符合的选择器，querySelectorAll 会选择全部符合的选择器
querySelectorAll 返回的一个 NodeList 对象，而不是一个真正的数组，它包含多个 DOM 元素，并且具有类似数组的索引（可以通过 NodeList[index] 访问）
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnShowModal = document.querySelectorAll('.show-modal');
for(let i = 0; i<btnShowModal.length; i++)
console.log(btnShowModal[i].textContent);
classList 属性
classList 属性的方法：
remove: 移除 类（不要写.）
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnShowModal = document.querySelectorAll('.show-modal');
for(let i = 0; i<btnShowModal.length; i++)
btnShowModal[i].addEventListener('click', function(){
// 移除 hidden 类
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
});
add: 添加 类
const closeModal = function(){
// 添加 hidden 类
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
处理按键事件
按键事件 是 全局事件，不会发生在一个特定的元素上
// 传入事件对象
document.addEventListener('keydown', function(e){
console.log(e); // KeyboardEvent
console.log(e.key);
if(e.key === 'Escape'){
if(!modal.classList.contains('hidden')){
closeModal();
}
}
});
浙公网安备 33010602011771号