一、js选择器
1.直接打印
页面id名会存放到页面的名称空间中，在js内可以直接访问该名称空间
<body>
<div id='d' class='box'></div>
<input type='text' id='d' class='box' />
</body>
<script>
console.log(d) //会取到两个
</script>
2.getElement系列
1.getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()
2.getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素
3.getElementsByTagName(tagname): 返回文档中指定标签的元素
4.getElementsByClassName():返回文档中所有指定类名的元素
3. querySelector()和querySelectorAll()
1.selector，是通过css选择器来获取，由于css没有逻辑，所以一般通过类名；通过id只能获取多个或第一个，无法获取唯一；但是我们在书写HTML标签时，id最好不要有相同的
2.querySelector():返回文档中匹配指定css选择器的第一个元素
3.querySelectorAll():返回文档中匹配指定css选择器所有符合要求的元素；无论是零个、一个还是多个都以数组的形式返回
4.在querySelector()或querySelectorAll()前面加document属于全文检索，它会在整个页面中查找能够匹配的元素
5.在querySelector()或querySelectorAll()前面加具体的标签，它就会在这个标签内部查找符合规则的元素，我们可以称之为父级调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js选择器</title>
</head>
<body>
<h1 id="d" class="box">你好</h1>
<input id="d" class="box"/>
</body>
<script>
console.log(d) // 可以拿到两个id相同的标签
let a = document.querySelector('#d'); //只能拿到第一个id为d的标签内容
console.log(a)
let a = document.querySelectorAll('#d'); //两个都可以拿到，且以数组形式(NodeList)显示
let body = document.querSelector('body'); //在文档流（整个页面）中查找
let b_h1 = body.querySelector('h1'); //在父级标签内检索后代标签
</script>
</html>
二、js页面操作
1.操作页面的三步骤
1. 通过js选择器获取页面标签，并通过定义变量来接收标签内容
2.设置操作的激活条件，一般称之为事件，比如onclick | ondblclick等
3.具体的操作方式，比如对标签内容|样式|事件|文档结构的具体操作，得到最终效果的逻辑，都在这一步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作页面的三步骤</title>
</head>
<body>
<h1>操作页面的三步骤</h1>
<div class="box">
<h1>box-h1</h1>
</div>
</body>
<script>
// 1、获取页面标签
// 2、设置操作的激活条件 - 事件
// 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构
// 1：
let body = document.querySelector('body');
let box = document.querySelector('.box');
// 父级调用选择器方法，只完成自己内部的检索
let body_h1 = body.querySelector('h1'); //找到body下的h1标签
console.log(body_h1);
let box_h1 = box.querySelector('h1');
console.log(box_h1); //找到box下的h1标签
// 2：
body_h1.onclick = function () {
// console.log('单击则在控制台打印')
// 3：
if (box_h1.style.color != 'red') {
box_h1.style.color = 'red';
box_h1.style.backgroundColor = 'orange';
} else {
box_h1.style.color = 'black';
box_h1.style.backgroundColor = 'white';
}
}
</script>
</html>
2.JS事件
1.js使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。可以概括为：当什么时候执行什么事。事件的基本结构：事件源、事件类型、执行的指令（函数）
2.使用返回值改变HTML元素的默认行为：HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默认行为
3.通用的事件监听方法：
-
1）绑定HTML元素属性：<标签 on+事件="js代码"></标签>。这种方法，JavaScript 代码与 HTML 代码耦合在了一起，不便于维护和开发，不推荐
-
2）绑定DOM对象属性：通过监听元素节点的某个事件，来实现事件程序驱动
-
3）标准DOM中的事件监听方法： [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");
-
4)DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现
3.js事件的分类
1.鼠标事件
1.onclick ：单击 （单击可以拆分成两个事件：按下和抬起）
2.ondblclick：双击
3.oncontextmenu：右击
4.onmouseover：悬浮
5.onmouseout：移开
6.onmouseenter：悬浮 （与onmouseleave组合 父级先触发）
7.onmousemove：移动
8.onmousedown：按下
9.onmouseup：抬起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
.box {
200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
let box = document.querySelector('.box');
// 单击
box.onclick = function () {
console.log('单击了', this)
};
// 双击
box.ondblclick = function () {
console.log('双击了')
};
// 右键
box.oncontextmenu = function () {
console.log('右键了');
// 有些事件有系统默认动作，取消默认动作可以返回 false
return false;
};
// 悬浮
box.onmouseover = function () {
console.log('悬浮了');
};
// 移开
box.onmouseout = function () {
console.log('移开了');
};
// 移动
box.onmousemove = function () {
console.log('移动了');
};
// 按下
box.onmousedown = function () {
console.log('按下了');
};
// 抬起
box.onmouseup = function () {
console.log('抬起了');
};
</script>
</html>
2.文档事件
1.onload：页面加载事件（一般是对window对象）
2.onscroll：页面滚动（一般对文档流对象）
3.页面滚动中会有window.scrollY属性，它可以表示窗口滚动了多长距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档事件</title>
<style>
body {
height: 3000px;
}
</style>
<script>
//页面加载成功就会触发事件
window.onload = function () {
console.log(h1)
}
</script>
</head>
<body>
<h1 id="h1">hhhhh</h1>
</body>
<script>
let body = document.querySelector('body');
// 页面滚动事件
document.onscroll = function (event) {
console.log('页面滚动中');
// console.log(event);
// console.log(window.scrollY); //它的滚动距离是有频率的，就像每秒才打印一次距离，所以如果滑块了，它可能显示不了你想要的具体值，所以做判断时，用<= 或 >=来扩大范围来触发事件
if (window.scrollY >= 500) {
body.style.backgroundColor = 'red';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
</html>
3.键盘事件
1.onkeydown：按键的按下
2.onkeyup：按键抬起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
</head>
<body>
<h1>键盘事件</h1>
<input type="text">
</body>
<script>
let inp = document.querySelector('input');
inp.onkeydown = function () {
console.log('按下')
};
inp.onkeyup = function () {
console.log('抬起')
}
</script>
</html>
4.表单事件
1.onsubmit：提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单事件</title>
<style>
/*表单的内外边框*/
input {
border: 2px solid pink;
}
input:focus {
outline: 2px solid yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录">
</form>
</body>
<script>
let form = document.querySelector('form');
let submit = document.querySelector('[type="submit"]');
let usr = document.querySelector('[type="text"]');
// 表单提交事件：表单默认也有提交数据的动作，也可以取消
form.onsubmit = function () {
console.log('提交了');
return false;
};
</script>
</html>
//点击提交，表单会有默认提交事件可以通过return false取消
<form action="">
<input type="text" name="user">
form.onsubmit = function () {
return false;
}
5.HTML事件
1.onfocus：任何元素或窗口获取焦点时触发
2.onblur：任何元素或窗口失去焦点时触发
选择输入框，键盘就被监控
6.事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
inp = document.querySelector('.inp');
inp.onkeydown= function (event) {
console.log(event);
// console.log(event.keyCode);
if (event.keyCode === 13) {
console.log('回车了')
}
if (event.ctrlKey && event.keyCode === 13) {
console.log('消息发送了')
}
};
document.onclick = function (event) {
console.log(event);
// 鼠标点击点
console.log(event.clientX, event.clientY);
}
</script>
</html>
1.当一个事件被触发的时候，会创建一个事件对象（Event Object），这个对象里面包含了一些有用的属性或者方法。事件对象会作为第一个参数，传递给我们的毁掉函数。事件对象包括很多有用的信息，比如事件触发时，鼠标在屏幕上的坐标。
2.鼠标事件：Mosesevent
3.键盘事件：keyevent
4.我们可以在事件对象中找到各种属性，比如在键盘事件中可以找到keycode这个属性，每个键都有自己的keycode
5.keycode:37 是左方向键的键盘编码
6.通过这些属性，我们再结合一些逻辑，就可以实现组合键的事件，比如当事件中的ctrlkey为true，且keycode等于13时，说明ctrl键和enter键同时按下了，就可以发送消息了，这个事件在qq聊天时被使用过
7.组合键：当按下ctrl键，enter键的ctrlkey会等于true
8.event.clientX event.clientY：鼠标点击点的利用，可以防爬虫、机器人：
- 1）可以获取鼠标点击点位置，判断是通过点击链接来访问的网页，从而防止通过代码请求来访问网页
- 2）拖动时间可以判断是否是人在操作
4.js操作内容
1.更改标签内容
//先通过变量和js选择器获取标签
//inp.value可以拿到输入框的内容
//inp_value=''//改的只是定义的变量值，而不会去改变inp的属性值
//标题标签没有value属性，但是有innerText属性（只拿文本），还有innerHTML（可以拿到后代标签和文本内容）
//innerText不会解析标签，innerHTML会解析标签，并只输出文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script>
let h1 = document.querySelector('h1.title');
let inp = document.querySelector('input.title');
let btn = document.querySelector('.btn');
// 内容操作：value | innerText | innerHTML
btn.onclick = function () {
// 拿到输入框的内容
inp_value = inp.value;
if (inp_value) {
// inp_value = ''; // 改的只是一个内存变量
inp.value = ''; // 清空输入框
// 将内容赋值给h1 innerText | innerHTML
// console.log(h1.innerText);
// console.log(h1.innerHTML);
// 纯文本
// h1.innerText = inp_value;
// 文本中的标签会被解析
h1.innerHTML = inp_value;
}
}
</script>
</html>
2.样式操作
//1.单击获取标签的之前背景颜色
//注意：this.style 本质操作的是行间式，只能获取和设置行间式
//注意：在内联式和外联式中书写的样式称之为“计算后样式”
//注意：getComputedStyle只读，不能用来设置样式，设置样式需要用this.style。比如：this.style.backgroundColor="red";
//注意：this.className可以进行类名的字符串拼接，实现样式切换的操作
//getComputedStyle(this, null) //null可以填标签的伪类after/before
//2.点击修改标签的宽高背景颜色
getComputedStyle(标签, 伪类); //得到是字典（对象），key取出的值是字符串
//3.操作计算后样式，提取写好计算后
//页面刷新
//页面点击
document.onclick = function () {
//全局刷新
window.location.href = '';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式操作</title>
<style>
.box {
200px;
height: 200px;
background-color: pink;
}
.sup-box {
/* 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<!--<div class="box" style="background-color: deeppink;"></div>-->
<div class="box">文本</div>
</body>
<script>
let box = document.querySelector('.box');
// 需求1：单击获取标签的之前背景颜色
/*
box.onclick = function () {
// 注：this.style 本质操作的是行间式（只能获取和设置行间式）
// bgColor = this.style.backgroundColor;
// console.log(bgColor);
// 注：在内联和外联中书写的样式称之为 计算后样式
// 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读
// getComputedStyle(标签, 伪类).样式;
bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
width = getComputedStyle(this, null).width;
console.log(width, parseInt(width));
// 只读，会报错
// getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
}
*/
// 需求2：点击修改标签的宽高背景颜色
/*
box.onclick = function () {
this.style.backgroundColor = 'orange';
this_style = getComputedStyle(this, null);
// console.log(parseInt(this_style.width) * 2);
// 宽放大两倍，高缩小两倍
this.style.width = parseInt(this_style.width) * 2 + 'px';
this.style.height = parseInt(this_style.height) / 2 + 'px';
}
*/
// 需求：操作计算后样 - 提取写好计算后样式，通过类名将 js 与 css 建立关联
box.onclick = function () {
console.log(this.className);
// this.className = 'sup-box';
/*
if (this.className === 'box') {
this.className = 'sup-box';
} else {
this.className = 'box';
}
*/
// 注：有个空格：空格sup-box
// this.className += ' sup-box';
if (this.className === 'box') {
this.className += ' sup-box';
} else {
this.className = 'box';
}
};
</script>
</html>
3.页面转跳
window是顶层对象，在页面任何位置都可以被访问
自我转跳
//''代表当前页面
window.location.href=''
//自我刷新
location.reload();
//跳转（在自身窗口）
window.location.href='相对路径'
//新开
window.open('相对路径'， '_blank'); //默认是新开，_self是在自身
//ctrl新开
event.ctrlkey来获取是否按着ctrl键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面转跳</title>
</head>
<body>
<button class="b1">自我刷新</button>
<button class="b2">转跳到9</button>
<button class="b3">ctrl新开转跳到9</button>
</body>
<script>
window.owen = 'Owen';
let b1 = window.document.querySelector('.b1');
// 自我刷新
b1.onclick = function () {
// console.log(owen);
// '' 代表当前页面链接
// window.location.href = '';
location.reload();
};
let b2 = window.document.querySelector('.b2');
// 转跳到9*.html
b2.onclick = function () {
// 在自身所在标签替换
window.location.href = '9、样式操作.html';
};
// ctrl新开转跳到9
let b3 = window.document.querySelector('.b3');
b3.onclick = function (ev) {
// open('转跳路径', '默认就是_blank')
if (ev.ctrlKey) {
window.open('9、样式操作.html');
} else {
window.open('9、样式操作.html', '_self');
}
}
</script>
</html>
4.动态尺寸
//获取包含滚动条的宽度
先设置一个隐藏box，他的宽为100vw
1.屏幕有滚动条下的两种宽度
2.去除滚动条剩余的全部宽度:
let html = document.querySelector('html');
console.log(html.clientWidth);
** 3.不去除滚动条剩余的全部宽度:**
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
4.案例：动态尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态尺寸</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
/* 200px;*/
/*height: 200px;*/
/* 100%;*/
background-color: orange;
position: fixed;
top: 0;
left: 0;
min- 900px;
max- 1100px;
90%;
margin-left: 5%;
/*vw viewwidth vh viewheight*/
/* 90vw;*/
/*margin-left: 5vw;*/
}
</style>
</head>
<body>
<div class="hidden" style=" 100vw"></div>
<div class="box"></div>
</body>
<script>
let html = document.querySelector('html');
// 去除滚动条的宽度
console.log(html.clientWidth);
// 包含滚动条的宽度
// let hidden = document.querySelector('.hidden');
// width = parseInt(getComputedStyle(hidden, null).width);
// console.log(width);
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
function resizeBox() {
box_width = parseInt(getComputedStyle(box, null).width);
box.style.height = box_width / 6 + 'px';
if (box_width >= 1100) {
box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
}
}
let box = document.querySelector('.box');
resizeBox();
window.onresize = function () {
resizeBox();
};
</script>
</html>