目录
一、窗口大小和事件
1.窗口大小
(1)innerWidth、innerHeight:这里的宽度和高度只是窗口可见区域的宽高,不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合 兼容性不是很好
<style>
img {
width: 200px;
height: 200px;
display: flex;
}
.box {
width: 100px;
height: 100px;
background-color: black;
}
.box1 {
width: 100px;
height: 100px;
border: 3px solid black;
background-color: red;
}
</style>
<div class="outer">
<img src="./img/9012175.jpg_220x240.jpg" alt="">
<img src="./img/9012177.jpg_220x240.jpg" alt="">
<img src="./img/9012243.jpg_220x240.jpg" alt="">
</div>
<div class="box1"></div>
<script>
// 1.窗口大小:
/* (1)innerWidth、innerHeight:这里的宽度和高度只是窗口可见区域的宽高,
不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合 兼容性不是很好 */
console.log(window.innerWidth);
console.log(window.innerHeight);
let outer = document.querySelector('.outer');
setInterval(function() {
if (innerWidth > 860) {
outer.style.display = "flex";
} else {
outer.style.display = "block";
}
}, 1000);
// (2)混杂模式(无文档声明<!DOCTYPE html>)下使用 (了解)
document.body.clientWidth
document.body.clientHeight
//(3)标准模式(有文档声明<!DOCTYPE html>)下使用 (了解)
document.documentElement.clientWidth
document.documentElement.clientHeight
// 2.窗口的加载事件 onload: 界面上的资源加载完再执行里面的内容
window.onload=function() {
document.querySelector(".box").style.backgroundColor = 'pink';
}
</script>
<div class="box"></div>
(2)混杂模式(无文档声明<!DOCTYPE html>)下使用 (了解)
document.body.clientWidth
document.body.clientHeight
(3)标准模式(有文档声明<!DOCTYPE html>)下使用 (了解)
document.documentElement.clientWidth
document.documentElement.clientHeight
2.窗口的加载事件 onload: 界面上的资源加载完再执行里面的内容
<script>
window.onload=function() {
document.querySelector(".box").style.backgroundColor = 'pink';
}
</script>
<div class="box"></div>
结果:
二、窗口滚动距离和滚动事件
1.获取窗口滚动距离
window.pageXOffset // 窗口在x轴的滚动距离
window.pageYOffset // 窗口在y轴的滚动距离
1.1解决兼容性
document.body.scrollTop || document.documentElement.scrollTop
document.body.scrollLeft || document.documentElement.scrollLeft
2.操作让浏览器滚动
scrollTo(x, y) // x、y为坐标 只滚动一次
scrollBy(x, y) // 滚动多次
【案例】界面自动滚动
<style>
div {
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<button>按钮</button>
<div>内容块1</div>
<div>内容块2</div>
<div>内容块3</div>
<div>内容块4</div>
<div>内容块5</div>
<button>置顶按钮</button>
</body>
<script>
// 需求:点击按钮之后,界面自动往下滚动,点击置顶按钮,节点回到顶部
let btn = document.querySelectorAll("button");
let times; // 需要定义在全局,如果定义在内部,其他就不能访问
btn[0].onclick = function() {
let timse = setInterval(function() {
scrollBy(0, 5);
}, 500) // 隔0.5秒就滚动一次
}
btn[1].onclick = function() {
clearInterval(times); // 清楚定时器
scrollTo(0, 0); // 界面直接回到顶部
}
</script>
【案例】模拟粘性定位
<style>
div {
width: 100%;
height: 400px;
}
div:first-child {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: pink;
}
div:nth-child(5) {
background-color: yellow;
}
</style>
</head>
<body>
<div>内容块1</div>
<div>内容块2</div>
<div>内容块3</div>
<div>内容块4</div>
<div>内容块5</div>
<script>
// 需求:滚动到某个位置时,节点置顶
let divs = document.getElementsByTagName("div");
window.onscroll = function() {
if (window.pageYOffset > 800) {
divs[2].style.position = 'fixed';
divs[2].style.top = 0;
} else {
divs[2].style.position = 'static';
}
}
</script>
三、懒加载和预加载
1.懒加载:界面滑动到某个位置,所需资源才加载出来
<div style="height: 1000px;"></div>
<img data-src="./img/9012175.jpg_220x240.jpg" alt="">
<img data-src="./img/9012177.jpg_220x240.jpg" alt="">
<img data-src="./img/9012243.jpg_220x240.jpg" alt="">
<script>
window.onscroll = function() {
if (pageYOffset > 315) {
let imgs = document.querySelectorAll("img");
for (let i = 0; i < imgs.length; i++) {
imgs[i].src = imgs[i].dataset.src;
}
window.onscroll = '';
}
}
</script>
2.预加载:资源在显示之前就加载出来
<div style="height: 1000px;"></div>
<script>
let arr = ["./img/9012175.jpg_220x240.jpg", "./img/9012177.jpg_220x240.jpg", "./img/9012243.jpg_220x240.jpg"];
for (let i = 0 ; i < arr.length; i++) { // 循环多次创建img节点
let img = new Image();
img.src = arr[i];
document.body.appendChild(img);
}
</script>
四、盒子大小和位置
类型 | 作用 |
element.offsetWidth | 返回自身包括padding.边框、内容区的宽度,返回数值不带单位 |
element.clientWidth | 返回自身包括padding.内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
element.getBoundingClientRect() | 返回自身的宽高以及距离界面左侧的距离 常用!!! |
1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取盒子内容滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXoffset获得
五、表单方法和事件
1. form.onsubmit 表单提交事件
2. form.onreset表单重置事件
【案例】
<body>
<form action="">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="passwd"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<!-- <button type="submit">提交</button>
<button type="reset">重置</button> -->
</form>
</body>
<script src="">
// let submit = document.getElementsByClassName("[input=submit]");
let form = document.querySelector("form");
let user = document.getElementsByName("username")
let pass = document.getElementsByName("passwd")
// form.onsubmit表单提交事件
form.onsubmit = function () {
if (!(user.length > 6 && pass.length>6)) {
alert("用户名或密码不规范");
// 虽然提交失败,数据还是会提交到后台,所以我们应该阻止(阻止默认事件)
return false;
}
}
// form.onreset表单重置事件
form.onreset = function() {
let re = confirm('确认提交表单吗?');
if (re == false) {
return false;
}
}
</script>
六、input事件
1.input:只要输入就会一直触发
2.change:失去焦点就会触发 最近两次失焦状态的值有改变才会触发 input.value为最终的值
3.focus:鼠标聚焦显示下拉框
4.blur:鼠标失去焦点隐藏下拉框
<style>
.box {
width: 300px;
height: 240px;
border: 2px solid blue;
margin-left: 70px;
display: none;
}
</style>
</head>
<body>
搜索框:
<input type="text">
<div class="box"></div>
<script>
let input = document.querySelector("input");
let box = document.querySelector('.box');
// input标签的输入input、值改变change、聚焦focus、失焦blur
// 1.input:只要输入就会一直触发
input.oninput = function() {
console.log(input.value + '***');
}
// 2.change:失去焦点就会触发 最近两次失焦状态的值有改变才会触发 input.value为最终的值
input.onchange = function() {
console.log(input.value + '--');
}
// 3.focus:鼠标聚焦显示下拉框
input.onfocus = function() {
box.style.display = 'block'
}
// 4.blur:鼠标失去焦点隐藏下拉框
input.onblur = function() {
box.style.display = 'none';
}
</script>
【案例】以select 选项框举例change 事件的使用,实现三级联动下拉框
数据:
data = [
{
name: "四川",
next: [{
name: '成都1',
next: ["东站1", "北站2", "南站3"]
}, {
name: '成都2',
next: ["东站4", "北站5", "南站6", "东站7", "北站8", "南站9"]
}, {
name: '成都3',
next: ["东站11", "北站12"]
}]
},
{
name: "云南",
next: [{
name: '云南1',
next: ["东站13", "北站14", "南站15"]
}, {
name: '云南2',
next: ["东站16", "北站17", "南站18", "东站19", "北站21", "南站22"]
}, {
name: '云南3',
next: ["东站23", "北站24"]
}, {
name: '云南4',
next: ["东站25", "北站26", "南站27"]
}, {
name: '云南5',
next: ["东站23", "北站33", "南站34", "东站35", "北站36", "南站37"]
}, {
name: '云南6',
next: ["东站41", "北站42"]
}]
},
{
name: "dnf",
next: [{
name: '四川',
next: ["一区", "二区", "三区","四区",'五区',"六区"]
}, {
name: '北京',
next: ["1区", "2区"]
}, {
name: '山东',
next: ["壹区", "贰区","叁区","肆区"]
}]
}
]
html+js:
地址:
<select name="" id="">
<option value="null">==请选择省份==</option>
</select>
<select name="" id="">
<option value="null">==请选择分区==</option>
</select>
<select name="" id="">
<option value="null">==请选择实际地址==</option>
</select>
<script src="./30-联动下拉框数据.js"></script>
<script>
//一级选择框
// console.log(document.querySelector("select")); 这样获取的是页面当中的第一个select标签
for(let i=0;i<data.length;i++){
document.querySelector("select").innerHTML+=`
<option value="${data[i].name}">${data[i].name}</option>
`
}
//联动二级菜单
let seconSelect=document.querySelectorAll("select")[1];
document.querySelector("select").onchange=function(){
console.log( this.value );
seconSelect.innerHTML=`<option value="null">==请选择分区==</option>`;//清空历史选项
threeSelect.innerHTML=`<option value="null">==请选择实际地址==</option>` // //清空历史选项
for(let i=0;i<data.length;i++){//循环匹配比较
if( data[i].name==this.value ){//匹配成功
data[i].next.forEach(item => {//循环二级数据,往二级select 框追加选项
seconSelect.innerHTML+=`
<option value="${item.name}">${item.name}</option>
`
});
}
}
}
let threeSelect = document.querySelectorAll("select")[2];
seconSelect.onchange = function() {
threeSelect.innerHTML=`<option value="null">==请选择实际地址==</option>`;// 清空历史选项
// console.log(this.value);
for (let i = 0; i < data.length; i++) {
data[i].next.forEach(item => {
if (item.name == this.value) {
item.next.forEach(item1 => {
threeSelect.innerHTML += `
<option value="${item1}">${item1}</option>
`;
})
}
})
}
}
</script>
结果: