一、API和 Web API
API
Web API
二、DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">2023-08-06</div>
<script>
// 1、因为文档页面从上往下加载 所以script得写到标签的下面
// 2、get 获得 element 元素 by 通过 驼峰命名法
// 3、参数 id 是大小写敏感的字符串
// 4、返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5、console.dir 打印返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
</ul>
<ol id="ol">
<li>应是绿肥红瘦</li>
<li>应是绿肥红瘦</li>
<li>应是绿肥红瘦</li>
<li>应是绿肥红瘦</li>
<li>应是绿肥红瘦</li>
<li>应是绿肥红瘦</li>
</ol>
<script>
// 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 想要依次打印里面的元素对象，可以采取遍历的方式
for(var i = 0; i< lis.length ; i++){
console.log(lis[i]);
}
// 如果页面中只有一个li 返回的还是伪数组的形式
// 如果页面中没有这个元素 返回的是空的伪数组的形式
// element.getElementsByTagName('标签名') 父元素必须是指定的单个元素
var ol = document.getElementsByTagName('ol'); //[ol]
console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1、getElementsByClassName() 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2、 querySelector() 返回指定选择器的第一个元素对象 切记里面的选择器要加符号，如：类选择器要加 .
var firstbox = document.querySelector('.box');
console.log(firstbox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3、querySelectorAll() 返回指定选择器的所有元素对象集合
var allbox = document.querySelectorAll('.box');
console.log(allbox);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、获取 body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle)
// 2、 获取 html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
console.dir(htmlEle);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">TFBOYS</button>
<script>
// 点击一个按钮，弹出对话框
// 1、事件是由三部分组成：事件源 ， 事件类型 ，事件处理程序 也称为事件三要素
// (1)事件源 事件被触发的对象 谁 按钮、
var btn = document.getElementById('btn');
// （2）事件类型 如何触发 什么事件 比如：鼠标点击（onclick） 还是鼠标经过 还是键盘按下
// （3）事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function(){
alert('四叶草');
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1、获取事件源
var div = document.querySelector('div');
// 2、绑定事件 注册事件
// div.onclick
// 3、添加事件处理程序
div.onclick = function(){
console.log('我被选中了');
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p{
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: aquamarine
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>0808</p>
<script>
// 当点击了按钮 ，div里面的文字会发生变化
// 1、获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onmousedown = function(){
div.innerText=getDate();
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
var arr = ['星期日' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六' ];
var day = date.getDay();
return '今天是：' +year + '年' + month + '月' + dates + '日' + arr[day];
}
// 元素可以不添加事件
var p = document.querySelector('p');
p.innerText= getDate();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>
我是文字
<span>123456</span>
</p>
<script>
// innerText 和 innerHTML 的区别
//1、 innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '今天是： 2021-10-29';
// 加粗
// div.innerText = '<strong>今天是：</strong> 2021-10-29';
// 2、innerHTML 识别HTML标签 W3C标准 保留空格和换行
div.innerHTML = '<strong>今天是：</strong> 2021-10-29';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 360px;
}
</style>
</head>
<body>
<button id="wjk">王俊凯</button>
<button id="wy">王源</button>
<button id="yyqx">易烊千玺</button><br>
<img src="./images/4.jpg" alt="" title="王俊凯">
<!-- <img src="./images/9.jpg" alt="">
<img src="./images/21.jpg" alt=""> -->
<script>
// 修改元素属性 src
// 1、获取元素
var wjk = document.getElementById('wjk');
var wy = document.getElementById('wy');
var yyqx = document.getElementById('yyqx');
var img = document.querySelector('img');
// 注册事件 处理程序
wjk.onclick = function(){
img.src = 'images/4.jpg';
img.title = '王俊凯';
}
wy.onclick = function(){
img.src = 'images/9.jpg';
img.title = '王源';
}
yyqx.onclick = function(){
img.src = 'images/21.jpg';
img.title = '易烊千玺';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
}
</style>
</head>
<body>
<!-- 案例︰分时显示不同图片,显示不同问候语 -->
<!-- 根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。 -->
<img src="./images/4.jpg" alt="">
<div>上午好</div>
<script>
// 案例分析
//根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同问候语,修改元素内容即可
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2、得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3、判断小时数改变图片和文字信息
if(h < 12){
img.src = 'images/4.jpg';
div.innerHTML = '宝贝，上午好，要好好工作哦！';
}else if(h < 18){
img.src = 'images/9.jpg';
div.innerHTML = '宝贝，下午好，要好好工作哦！';
}
else{
img.src = 'images/21.jpg';
div.innerHTML = '宝贝，晚上好，要好好工作哦！';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">、
<script>
// 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 注册事件，处理程序
btn.onclick = function(){
// input.innerHTML = '点击率'; //这个是 普通盒子 比如 div标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled
// 想要按钮 button 禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 400px;
/* height: ; */
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<!-- 案例∶仿京东显示密码 -->
<!-- 点击按钮将密码框切换为文本框，并可以查看密码明文。 -->
<div class="box">
<label for="">
<img src="./images/不显示密码.png" alt=" " id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 案例分析
// 核心思路:点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
// 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
// 算法:利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
// 1、获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2、注册事件，处理程序
var flag = 0;
eye.onclick = function(){
// 点击一次之后， flag 一定要变化
if(flag == 0){
pwd.type = 'text';
eye.src = 'images/显示密码.png'
flag = 1; // 赋值操作
} else{
pwd.type = 'password';
eye.src = 'images/不显示密码.png'
flag = 0;
}
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<!-- <div style="width: 100px; height: 200px; background-color: aquamarine;"></div> -->
<div></div>
<script>
// 1、获取元素
var div = document.querySelector('div');
// 2、注册事件 处理程序
div.onclick = function(){
// div.style 里面的属性 采取驼峰命名法
this.style.backgroundColor = 'orange'
this.style.width = '500px';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.box img{
width: 60px;
margin-top: 5px;
}
.close-btn{
position: absolute;
top: -1px;
left:-16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 案例:淘宝点击关闭二维码 -->
<!-- 当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。 -->
<div class="box">
淘宝二维码
<img src="./images/二维码.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
// 案例分析
// 核心思路:利用样式的显示和隐藏完成，display.none隐藏元素display.block显示元素
// 点击按钮，就让这个二维码盒子隐藏起来即可
// 1、获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2、注册事件 处理程序
btn.onclick = function(){
box.style.display = 'none';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* *{
margin: 0;
padding: 0;
} */
.box{
width: 250px;
margin: 100px auto;
background-color: cornflowerblue;
}
.box li{
list-style: none;
float: left;
width: 24px;
height: 24px;
background-color: coral;
margin: 15px;
background: url(./images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<!-- 案例︰循环精灵图背景
可以利用for循环设置一组元素的精灵图背景 -->
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 案例分析
// 首先精灵图图片排列有规律的
// 核心思路∶利用for循环修改精灵图片的背景位置background-position
// 剩下的就是考验你的数学功底了
// 让循环里面的i索引号*44就是每个图片的y坐标
// 1、获取元素
var lis = document.querySelectorAll('li');
// 让索引号 乘以 44 就是每个 li 的背景 y 坐标 index 就是y 坐标
var index = i * 44;
for(var i = 0; i < lis.length; i++){
lis[i].style.backgroundPosition = '0 -'+index + ' px';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
color: #999;
}
</style>
</head>
<body>
<!-- 案例∶显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。 -->
<input type="text" value="手机">
<script>
// 案例分析
// 首先表单需要2个新事件，获得焦点onfocus失去焦点onblur
// 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
// 如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
// 1、获取元素
var text = document.querySelector('input');
// 2、注册事件 获得焦点 onfocus
text.onfocus = function(){
// console.log('得到了焦点');
if(text.value == '手机'){
this.value = '';
}
// 获得焦点需要把文本框框里面的文字颜色变深
this.style.color = '#333';
}
// 3、注册事件 失去焦点 onblur
text.onblur = function(){
// console.log('失去了焦点');
if( text.value == ''){
this.value = '手机';
}
//失去焦点需要把文本框框里面的文字颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
}
.change{
background-color: blue;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
// 1、使用element.style 获得修改元素样式 如果样式比较少 或者功能简单的合适
// var test = document.querySelector('div');
// test.onclick = function(){
// this.style.backgroundColor = 'orange';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// }
// 使用 element.className 获得修改元素样式 适用于样式多的，功能较复杂的
var test = document.querySelector('div');
test.onclick = function(){
// 如果想要保留原先的类名，可以这样做： 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url('./images/提示.png') no-repeat left center;
background-size:23px;
padding-left: 24px;
}
.wrong{
color: red;
background-image: url('./images/错误.png');
}
.right{
color: green;
background-image: url('./images/正确.png');
}
</style>
</head>
<body>
<!-- 案例︰密码框格式提示错误信息
用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息 -->
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 案例分析
// 首先判断的事件是表单失去焦点onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1、获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message')
// 2、注册事件 失去焦点
ipt.onblur = function(){
// 根据表单里面值的长度 ipt.value.length
if(this.value.length < 6 || this.value.length > 16){
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对，要求6~16位';
} else{
message.className = 'message right';
message.innerHTML = '您输入正确';
}
}
</script>
</body>
</html>
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
