Web Apls第七天
1.Window对象
1.BOM
1.BOM介绍
①指的是浏览器对象模型
②window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
③包含了 navigator、location、document、history、screen 5个属性
④document 是实现 DOM 的基础，它其实是依附于 window 的属性。
2. 定时器-延时函数
1.JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
2.语法:
setTimeout(回调函数, 等待的毫秒数)
3.清除延时函数
let timer = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)
4.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-定时器-延时器.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 延时器 - 只会执行一次而已
let timeid = setTimeout(function () {
console.log('猜猜我是谁');
}, 5000);
// 取消延时器
clearTimeout(timeid);
</script>
</body>
</html>
3.两种定时器对比
①setInterval 的特征是重复执行，首次执行会延时
②setTimeout 的特征是延时执行，只执行 1 次
③setTimeout 结合递归函数，能模拟 setInterval 重复执行
④clearTimeout 清除由 setTimeout 创建的定时任务
4.location
1.作用
①location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
2.常用属性和方法
① href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
//可以得到当前文件UPL地址
console.log(location.href)
//可以通过js方式跳转到目标地址
location.href = 'http://www.itcast.cn'
②search 属性获取地址中携带的参数，符号 ？后面部分
console.log(location.search)
③hash 属性获取地址中的啥希值，符号 # 后面部分
console.log(location.hash)
④reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<button>点击刷新</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function (){
location.reload(true)
//强制刷新 类似 ctrl + f5
} )
</script>
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-location.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<button>跳转到百度</button>
<script>
// 1 使用a标签 href 属性 可以实现页面跳转
// 2 在js中，也可以直接跳转 location.href 来跳转
// 3 location.href 也可以实现刷新 location.href = location.href;
const button = document.querySelector('button');
button.addEventListener('click', function () {
// location.href="http://www.baidu.com";
// console.log(location.href);// http://127.0.0.1:5500/17-location.html
// 刷新功能
location.href = location.href; // 刷新功能
});
setTimeout(function () {
// location.href="http://www.baidu.com";
}, 5000);
</script>
</body>
</html>
5.navigator
1.作用
① navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
2.常用属性和方法
//1. 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
//2. 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
//3. 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-navigator-useragent.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="#">下载软件</a>
<script>
// 作用 检测当前浏览器的版本和型号
// 手机端来说， 安卓手机 可以直接下载apk 手机软件的
// ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
// 安卓手机来说 点击 下载软件 给它下载apk
// iphone手机来说 点击 下载软件 可能只需给苹果手机一个提示
// 可以识别出 当前的访问设备是 pc端还是移动端
// 后台根据 当前用户的设备类型 来返回 对应的平台的页面
// pc端来访问我的页面 我给你显示pc端的页面
// 移动端来访问我的页面 我给你显示移动端的页面
// b站就是
// console.log(window.navigator.userAgent);
// 也是直接找别人写好的代码 检测即可
// 我也想自己去检测 花时间去截取和处理字符串 字符串方法 和 正则
// !(function () {
// const userAgent = navigator.userAgent;
// // 验证是否为Android或iPhone
// const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
// const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
// // 如果是Android或iPhone，则跳转至移动站点
// // if (android || iphone) {
// // location.href = 'http://m.itcast.cn';
// // }
// console.log(android);
// console.log(iphone);
// })();
validBrowser()
function validBrowser() {
var u_agent = navigator.userAgent;
var browser_name = 'Failed to identify the browser';
if (u_agent.indexOf('Firefox') > -1) {
browser_name = 'Firefox';
} else if (u_agent.indexOf('Chrome') > -1) {
browser_name = 'Chrome';
} else if (
u_agent.indexOf('Trident') > -1 &&
u_agent.indexOf('rv:11') > -1
) {
browser_name = 'IE11';
} else if (
u_agent.indexOf('MSIE') > -1 &&
u_agent.indexOf('Trident') > -1
) {
browser_name = 'IE(8-10)';
} else if (u_agent.indexOf('MSIE') > -1) {
browser_name = 'IE(6-7)';
} else if (u_agent.indexOf('Opera') > -1) {
browser_name = 'Opera';
} else {
browser_name += ',info:' + u_agent;
}
document.write('browser_name:' + browser_name + '<br>');
document.write('u_agent:' + u_agent + '<br>');
}
</script>
</body>
</html>
6.histroy
1.作用
①history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
2.常用属性和方法
①back()-------->后退功能
②forwark()--------->前进功能
③go(参数)---------->前进后退功能(参数为1,则前进1个页面, -1,则后退一个页面)
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>19.history.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
const forward = document.querySelector('.forward');
forward.addEventListener('click', function () {
// history.forward();
history.go(1); // 前进一个记录
});
const back = document.querySelector('.back');
back.addEventListener('click', function () {
// history.back();
history.go(-1); // 后退一个记录
});
</script>
</body>
</html>
2.swiper插件
1.swiper插件流程
①下载swiper对应的文件 - css + js
② 分布引入他们
③ 拷贝别人的固定结构
④拷贝写好的swiper 初始化js代码
⑤注意: 多个swiper同时使用的时候, 类名需要注意区分
2.如图
3.用swiper插件实现轮播图案例
<!--
1 下载swiper对应的文件 - css + js
2 分布引入他们
3 拷贝别人的固定结构
4 拷贝写好的swiper 初始化js代码
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-使用swiper插件实现轮播图.html</title>
<!-- 引入css -->
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./assets/b_01.jpg" alt="" /></div>
<div class="swiper-slide"><img src="./assets/b_02.jpg" alt="" /></div>
<div class="swiper-slide"><img src="./assets/b_03.jpg" alt="" /></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script src="./swiper/swiper-bundle.min.js"></script>
<script>
const mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项 水平滚动-默认就是水平滚动
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
</body>
</html>
3.本地存储
1.介绍
①数据存储在用户浏览器中
②设置、读取方便、甚至页面刷新不丢失数据
③容量较大，sessionStorage和localStorage约 5M 左右
2. localStorage
1.作用
①生命周期永久生效，除非手动删除 否则关闭页面也会存在
②可以多窗口（页面）共享（同一浏览器可以共享）
③以键值对的形式存储使用
2.存储数据
localStorage.setItem(key, value)
3.获取数据
localStorage.getItem(key)
4.删除数据
localStorage.removeItem(key)
5.清空数据
localStorage.clear()
6.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>10-本地存储.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
本地存储 四个api
1 存 localStorage.setItem(key,value)
2 取 localStorage.getItem(key)
3 删除一个 localStorage.removeItem(key)
4 清空 localStorage.clear();
*/
for (let index = 0; index <100; index++) {
localStorage.setItem(`abc${index}`,index);
}
localStorage.clear();
</script>
</body>
</html>
3.存储类型
1.存储复杂数据类型存储
①本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
2.JSON.stringify(复杂数据类型)
①将复杂数据转换成JSON字符串 存储 本地存储中
3.JSON.parse(JSON字符串)
①将JSON字符串转换成对象 取出 时候使用
4.sessionStorage
1.作用
①生命周期为关闭浏览器窗口
②在同一个窗口(页面)下数据可以共享
③以键值对的形式存储使用
④用法跟localStorage 基本相同
2.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-sessionStorage.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
本地存储的技术 sessionStorage 会话（打开页面到关闭页面之间过程 一次会话 ajax node）存储
登录的时候
它的用法和 localStorage 用法一样
区别只有一个
sessionStorage 关闭页面后 数据就丢失
localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
*/
// 存数据
sessionStorage.setItem("ss",123);
// 取数据
console.log(sessionStorage.getItem("ss"));
// 删除一个
sessionStorage.removeItem("ss")
// 清空
sessionStorage.clear();
</script>
</body>
</html>
4.自定义属性(拓展)
1.固有属性
①标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
2.自定义属性
①getAttribute('属性名') ------>自定义属性
②setAttribute('属性名', '属性值') -------> 设置自定义属性
③removeAttribute('属性名') --------> 删除自定义属性
3.data-自定义属性
1.意义
①传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在
标签上一律以(data-)开头 , 在DOM对象上一律以dataset对象方式获取
4.自定义属性案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-自定义属性使用演示.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul></ul>
<script>
// 根据数组 渲染出li标签 点击li标签的时候 根据它对应的颜色 设置到 我body标签背景中
// 数组
let arr = [
{ price: '100', title: '去旅游', color: 'yellow' },
{ price: '200', title: '去读书', color: 'red' },
{ price: '300', title: '去吃饭', color: 'blue' },
];
const ul = document.querySelector('ul');
let html = ``;
for (let index = 0; index < arr.length; index++) {
html += `<li data-price="${arr[index].price}" data-color="${arr[index].color}" >${arr[index].title}</li>`;
}
ul.innerHTML = html;
// 事件委托
ul.addEventListener('click', function (event) {
// 当前点击的是li标签
if (event.target.nodeName === 'LI') {
// 设置body标签的背景颜色 等于什么 = 等于当前被点击的元素（li） 身上的自定义属性 data-color
// document.body.style.backgroundColor = event.target.dataset.color;
document.body.style.backgroundColor =
event.target.getAttribute('data-color');
// alert(
// // `你想要去做的事情，要花这么多钱哦 ${event.target.dataset.price}`
// );
}
});
</script>
</body>
</html>
