web_api_note

title: Web API Note
categories:

• JavaScript
• 前端
  tags:
• JavaScript

pink老师视频笔记 水博客++

写在前面

疫情期间在家无聊 这次用了大概三五天的样子 看完了这套webapi的视频（先欠着特效的一小部分）。 因为前面css没学 所以视频后半段 涉及css的时候就略有头疼 所以还是建议 html css 再 JavaScript 这部分结束后 准备开始 jQuery Ajax

中国加油 武汉加油 大家加油

DOM

DOM简介

文档对象模型(Document Object Model)

w3c定义的接口 通过DOM接口改变网页内容 结构 样式

DOM树

• 文档: 一个页面就是一个文档,DOM中使用document表示
• 元素: 页面中的所有标签都是元素,DOM中使用element表示
• 节点: 网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示

获取元素

1. 根据ID获取

• getElementById

<div id="time">2020-2-1</div>
<script>
//1.因为文档从上往下加载 script要放在标签下面
//2.getElementById(id) 中i是大小写敏感的字符串
//3.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>

2. 根据标签名获取

• document.getElementsByTagName

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<script>
//1.返回的是 获取过来元素的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//如果无元素就返回空的伪数组
</script>

• element.getElementsByTagName

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ol>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ol>
<script>
// 获取父元素内部所有指定的标签名的子元素
// 父元素必须是单个指明的对象
var liso = document.getElementsByTagName('ol');
var lisl = liso[0].getElementsByTagName('li');
console.log(lisl);
</script>

3. 通过HTML5新增的方法获取

• 1.getElementsByClassName
• 2.querySelector

<div class="box">盒子</div>
<div class="box">盒子</div>
<script>
// 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);
// 3.querySelectorAll
//返回所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
</script>

4. 获取特殊元素

<script>
// 1.获取body 元素
var bd = document.body;
console.log(bd);
// 2.获取html元素
var hhtml = document.documentElement;
console.log(hhtml);
</script>

事件基础

(1). 事件三要素

事件源 事件类型 事件处理过程

<button id="btn">按钮1</button>
<script>
//点击一个按钮 弹出对话框
//类似vb中的
//(1)事件源 事件被触发的对象
谁
按钮
var myBtn = document.getElementById('btn');
//(2)事件类型 如何触发 比如鼠标点击(onclick) 鼠标经过 键盘按下
//(3)事件处理程序 函数赋值
myBtn.onclick = function(){
alert('这是一个弹窗');
}
</script>

(2). 执行事件过程

<div>123</div>
<script>
//事件执行过程
//点击div 控制台输出 我被选中了
//1.获取事件源
var div = document.querySelector('div');
//2.绑定事件 注册事件
//div.onclick
//3.添加事件处理程序
div.onclick = function(){
console.log('我被选中了');
}
</script>

操作元素

(1). innerText 和 innerHTML

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1111-11-11</p>
<script>
//点击按钮 div 内文字变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
btn.onclick = function(){
// div.innerText = '2020-2-2';
div.innerText = getDate();
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
//getMonth 返回0-11月 所以 +1
var dates = date.getDate();
//返回几号
var arr = ['日','一','二','三','四','五','六'];
var day = date.getDay(); //周日到周六 0-6
return 'Today is ' + year + '-' + month + '-' + dates + '
星期' + arr[day];
}
//元素可以不添加事件
var p =document.querySelector('p');
p.innerText = getDate();
</script>

innerText 和 innerHTML 的区别

前者不识别html标签
如

<div id="1">123</div>
<div id="2">123</div>
<script>
var div1 = document.getElementById('1');
var div2 = document.getElementById('2');
div1.innerText =
'<strong>今天是</strong> 20200202';
div2.innerHTML =
'<strong>今天是</strong> 20200202';
</script>

会输出所有内容 而后者识别html标签

(2). 修改元素属性

<button id="p1">图片1</button>
<button id="p2">图片2</button>
<img src="1.jpg" alt="" title="p1">
<script>
//修改元素属性 src
//1.获取元素
var pic1 = document.getElementById('p1');
var pic2 = document.getElementById('p2');
var myimg =
document.querySelector('img');
//2.注册时间 处理程序
pic2.onclick = function(){
myimg.src = "2.jpg";
myimg.title = '2!';
}
pic1.onclick = function(){
myimg.src = '1.jpg';
myimg.title = '1!';
}
</script>

<!-- 份时间访问案例 -->
<img src="./1.jpg" alt="">
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if(h < 12){
img.src = './1.jpg';
div.innerText = '上午好';
} else {
img.src = './2.jpg';
div.innerText = '下午好';
}
</script>

(3). 修改表单属性

<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '被点击了';
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>

<!-- 仿京东显示(隐藏)密码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
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="../../res/webapi/第一天/images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function(){
if(flag == 0){
pwd.type = 'text';
eye.src = '../../res/webapi/第一天/images/open.png';
flag = 1;
}else{
pwd.type = 'password';
eye.src = '../../res/webapi/第一天/images/close.png';
flag = 0;
}
}
</script>
</body>
</html>

(4). 修改样式属性

• element.style 行内样式操作

<!-- 点击变色 -->
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>

<!-- 隐藏淘宝二维码 -->
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
/* display: block; */
}
.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>
<div class="box">
淘宝二维码
<img src="../../res/webapi/第一天/images/tao.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
btn.onclick = function(){
box.style.display = 'none';
}
</script>

<!-- 搜索框输入界面 -->
<style>
input{
color: gray;
}
</style>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function(){
if(this.value === '手机'){
this.value = '';
}
this.style.color = 'black';
}
text.onblur = function(){
if(this.value === ''){
this.value = '手机';
}
this.style.color = 'gray';
}
</script>

• element.className 类名样式操作
  • 就是给原来的加类 类写在css里
  • 会直接覆盖原来的类名

<!-- 新浪注册界面 -->
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(../../res/webapi/第一天/images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(../../res/webapi/第一天/images/wrong.png);
}
.right {
color: green;
background-image: url(../../res/webapi/第一天/images/right.png);
}
</style>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>

(5). 排他思想 for遍历

(6). 自定义属性的操作

• 获取元素的属性值
  • element.属性 //元素本身自带的属性
  • element.getAttribute(‘属性’) //主要获取自定义属性
• 设置属性值
  • element.属性
  • element.setAttribute(‘属性’,‘值’)
• 移除属性
  • element.removeAttribute(‘属性’)
• 用处: 自己设置索引 tab栏切换

(7). H5自定义属性

• 自定义属性都以’data’开头 如 ‘data-index’
• element.dataset.index 获取属性 //dataset是所有data开头的属性集合
• 如果自定义属性里面有多个-链接的单词 采取 驼峰命名法
  • data-index-name //自定义属性
  • element.dataset.listName

节点操作

• 网页中所有内容都是节点
• 节点你至少有 nodetype nodeName nodeValue 三个属性
• 元素节点 nodetype 1 属性节点 nodetype 2 文本节点(文字 空格 换行) nodetype 3

<div class="box">
<span class="erweima">x</span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//1.父节点
var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);
//2.子节点
var ul = document.querySelector('ul');
//输出包括 元素节点 和 文本节点
console.log(ul.childNodes); //test li test li test li test
//3.children(非标准)
只输出 元素节点
console.log(ul.children);
//4.firstChild 和 lastChild //所有节点的第一个和最后一个
//5.firstElementChild 和 lastElementChild //元素节点 ie9以后
//6.ul.children[0]
ul.children[ul.children.length-1]
//常用
</script>

<!-- 新浪下拉菜单 -->
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>

• 兄弟节点

  • nextSibling //下一个兄弟节点
  • previousSibling
  • nextElementSibling //下一个兄弟元素节点 ie9以上
  • previousElementSibling

• 创建添加节点

  • document.createElement(‘tagName’)
  • node.appendChild(child) 添加节点 node父 child 子 追加元素
  • node.insertBefore(child, 指定元素)

<ul>
<li>123</li>
</ul>
<script>
var li = document.createElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>

<!-- 简单的发布留言 -->
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>

• 删除节点
  • node.removeChild(删除元素)

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);
</script>

• 复制节点
  • node.cloneNode(true)
  • 若参数为空或者false 只复制节点本身 不复制子节点

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>

<!-- 动态生成表格样例 -->
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in datas[i]) {
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td

// 遍历对象方法
// for(var k in obj) {
//
k 得到的是属性名
//
obj[k] 得到是属性值
// }
// datas[i]是行 datas[i][k] 是单元格 类似矩阵
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 删除
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>

• 三种动态创建元素区别
  • document.write() //不常用 会导致页面重绘
  • element.innerHTML //大量拼接字符串效率低 拼接数组效率高
  • document.createElement() //创建多个元素是效率较高

DOM重点核心

高级事件

(1). 注册事件

• 传统方式 注册事件唯一性 后面的事件会覆盖前面的处理函数
• 监听注册方式 addEventListener 事件监听
• attachEvent 只有ie浏览器 而且ie9之前的

<button>传统</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
// 传统
//只弹最后面那个
btns[0].onclick = function(){
alert('hi');
}
btns[0].onclick = function(){
alert('how are you ');
}
// 事件监听注册事件
事件类型是字符串 没有on
//两个连着弹
btns[1].addEventListener('click', function() {
alert('22');
})
btns[1].addEventListener('click', function() {
alert('33');
})
</script>

(2). 删除事件

• 传统方式
  • this.onclick = null;
• 方法监听注册方式

addEventListener(type, listener[, useCapture])

<button>传统</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
btns[1].addEventListener('click',fn)
function fn() {
alert(22);
btns[1].removeEventListener('click',fn);
}
</script>

(3). DOM 事件流

• 三个阶段
  • 事件捕获
  • 当前目标阶段
  • 事件冒泡
• addEventListener 第三个参数是true 捕获阶段
• addEventListener 第三个参数是false 或者为空 表示冒泡阶段
• 一些事件没有冒泡如 onblur onfoucus onmouseenter onmouseleave

(4). 事件对象

• 跟事件相关的一系列信息数据的集合
• 写在函数的小括号内

elem.onclick = function(e) {
console.log(e);
}

elem.onclick = function(event) { // 此处的event就是事件对象
event.target
// 返回触发事件的元素,不同于this返回的是绑定事件的元素
event.srcElement
// 同event.target,ie兼容处理使用(ie6,7,8),非标准
event.relatedTarget
// 返回绑定事件的元素,类似于this
event.type
// 获取事件触发类型,如click
event.pageX | event.pageY
// 获取光标相对于页面的x坐标和y坐标 ie9+
event.clientX | event.clientY// 获取光标相对可视区域的x坐标与y坐标(不受滚动条影响)
event.screenX | event.screenY// 获取光标相对电脑屏幕的x坐标与y坐标
event.which
// 代表获取到的鼠标或键盘的输出的值,鼠标分别为0,1,2
event.key
// 获取按下的按键值
event.keyCode
// 获取按下按键的ascii码值
}

• 阻止默认行为 链接不跳转 按钮不提交

var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault();
})

(5). 阻止事件冒泡

son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();
//阻止事件冒泡
}, false);

(6). 事件委托
- jQuery中称为事件委派
- 不是每个子节点单独设置事件监听器 而是事件监听器设置在其父节点上利用冒泡原理设置每个子节点

<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert('知否知否，点我应有弹框在手！');
// e.target.style.backgroundColor = 'pink'; //点击改变颜色
})
</script>

(7). 鼠标事件

<!-- 跟随鼠标案例 -->
<style>
img {
position: absolute;
}
</style>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
pic.style.left = x + 'px';
pic.style.top = y + 'px';
});
</script>

(8). 键盘事件

• 常用
  • onkeyup
  • onkeydown
  • onkeypress //不识别功能键 ctrl alt 等
• 键盘事件对象
  • keyCode //返回ascii值
  • keyup keydown 不区分字母大小写 keypress区分

<!-- 模拟京东按键输入内容 -->
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
}
})
</script>

BOM

BOM概述

• 浏览器对象模型(Browser Object Model)
• 与浏览器窗口进行交互的对象
• 核心是window 顶级对象

// 全局变量变属性 函数变方法
var num = 10;
console.log(num);
console.log(window.num);
function fn(){
console.log(11);
}
fn();
window.fn();

window对象常见事件

定时器

(1).setTimeout()

• setTimeout(调用函数, 延时时间(ms))
• setTimeout()这个函数也成为回调函数 callback //事件也是回调函数

(2).window.clearTimeout(timeoutID) //清除计时器

(3).setInterval(回调函数, 延时时间(ms)) //每隔一段时间执行 不停止

(4).window.clearInterval() //清除定时器

<!-- 倒计时 -->
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2019-5-1 18:00:00');
countDown();
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>

js执行队列

• js是单线程语言
• 同步 //按顺序
• 异步 //多任务同时进行

![同步异步执行过程]](https://img-blog.csdnimg.cn/20200205220450810.png)

等 执行栈 中所有 同步任务 完成 再去 任务队列 里找

location对象

<!-- 5秒后跳转到指定页面 -->
<div></div>
<script>
var timer = 5;
var div = document.querySelector('div');
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>

navigator对象

• navigator.userAgent //判断设备类型等

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html";
}

history对象

• history.forward();
• history.back()
• history.go(-1);

网页特效

元素偏移量offset系列

• 概述
  • 能动态地得到元素的位置 大小

offset和style区别

<!-- 拖动模态框 -->
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link
让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login 
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>

元素可视区client系列

• 概述
  • 动态地获得元素的边框大小，元素大小

• 立即执行函数
  • 不需要调用 立刻就能执行的函数
  • (function(){})() 或者 (function(){}());
  • 可以传递参数进函数
  • 立即执行函数作用：创建一个新的作用域 所有变量都是局部变量

(function (a, b) {
console.log(a + b);
})(1, 2)
//输出3

元素滚动scroll系列

• 概述
  • 能获得元素大小 滚动距离

页面被卷去的头部 可以用window.pageYOffeset 获得

动画函数封装

• 核心原理: 通过定时器 setInterval() 不断移动盒子位置
• 函数封装: 1.对象 2.目标位置
• 给不同对象不同定时器 (性能优化) 添加属性

// 缓动动画封装函数
function slowMove(obj, target, callback) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
//
// 调用函数
//
callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值
步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}

常见网页特效案例

本地存储

• 将数据存储在用户计算机

window.sessionStorage 5M

• 特性

  • 生命周期为关闭浏览器
  • 同一个窗口数据可共享
  • 以键值对的形式来存储

• 数据存储 sessionStorage.setItem(key,value)

• 获取数据 sessionStorage.getItem(key)

• 删除数据 sessionStorage.removeItem(key)

• 删除所有数据 sessionStorage.clear()

window.localStorage 20M

• 特性

  • 生命周期永久有效
  • 多窗口共享数据

• 数据存储 localStorage.setItem(key,value)

• 获取数据 localStorage.getItem(key)

• 删除数据 localStorage.removeItem(key)

• 删除所有数据 localStorage.clear()

<!-- 记住用户名案例 -->
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>

最后

以上就是喜悦棒棒糖为你收集整理的web_api_note的全部内容，希望文章能够帮你解决web_api_note所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。