网站支持：
JavaScript
数据类型
- 简单（基本）数据类型：Number、String、Boolean、Undefined、Null
- 复杂（应用）数据类型：Object、Array、Date、Function 等
1. 数据类型的默认值及非空判断
| 数据类型 | 释义 | 默认值 | 非空判断 |
|---|---|---|---|
| Number | 数值类型 | 0 | |
| String | 字符串类型 | ’ ’ | if ( typeof(字符串) == “string” && 字符串.length > 0 ) { } |
| Boolean | 布尔值类型 | true 和 false | if( 布尔值 ) { } |
| Undefined | 不存在 | if ( typeof(不存在) != “undefined” ) { } | |
| Null | 空值 | null | if( 空值 != null ) { } |
| Object | 对象 | { } | if( JSON.stringify(对象) != “{}” ) { } |
| Array | 数组 | [ ] | if( 数组.length > 0 ) { } |
2. 数据类型的检测
typeof(数据)
如：
console.log(typeof(100)) // number
console.log(typeof('100')) // string
获取DOM
语法：
document.querySelector("选择器")
document.querySelectorAll("选择器")
document.getElementById("id名")
document.getElementsByClassName("class名")
document.getElementsByTagName("标签名")
document.getElementsByName("name名")
例🌰子：
<body>
<div class="app">
<div class="div">无极剑圣</div>
<div id="wuJin">无尽之刃</div>
</div>
</body>
<script>
var hero= document.querySelector(".div");
var equip = document.getElementById("wuJin");
</script>
操作元素的属性
1. 操作class属性
通过
className操作class属性。
例🌰子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>className 属性</title>
<style>
div { width: 800px; height: 600px; }
.bg-red { background-color: red; }
.bg-blue { background-color: blue; }
.border { border: 5px solid skyblue; }
</style>
</head>
<body>
<div class="bg-red"></div>
</body>
<script type="text/javascript">
// 1. 获取 DOM 对象
var div = document.querySelector('div');
// 2. 获取 class 属性
console.log(div.className); // bg-red
// 3. 修改 class 属性
div.className = 'bg-blue';
// 4. 添加 class 属性
// div.className += ' border';
// 等同于
div.className = 'bg-blue border';
</script>
</html>
2. 操作style样式
通过
style属性只能获取行内 css，不能获取内嵌和外链 css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style 属性</title>
<style>
input { background-color: #abcdef; color: #ffffff; }
</style>
</head>
<body>
<input type="button" style="background-color: #0094ff;" value="点我啊">
</body>
<script type="text/javascript">
// 1. 获取 DOM 对象
var input = document.querySelector('input');
// 2. 获取 style 属性
console.log(input.style);
// 3. 获取按钮当前的背景色
console.log(input.style.backgroundColor);
// 4. 设置按钮的背景色为黄色
input.style.backgroundColor = 'yellow';
input.style.width = '500px';
// 5. 设置按钮的文字颜色为红色
input.style.color = 'red';
input.style.transform = 'rotate(45deg)';
</script>
</html>
操作本文和内容
innerText
innerHTML
注册事件
语法：
onclick = function(){} 、addEventListener(eventName, handler, useCapture)
addEventListener 绑定事件时取出事件的 on 前缀
事件名：
1. 鼠标事件
onclick 单击事件
<body>
<div class="app">
<div class="div">无极剑圣</div>
<div id="wuJin">无尽之刃</div>
</div>
</body>
<script>
document.querySelector("#wuJin").onclick = () => {
alert("需要金币3100！");
};
document.getElementsByClassName("hero").addEventListener("click", () => {
alert("出暴击啊！");
});
</script>
ondblclick 双击事件
onmouseenter（常用）、onmouseover 鼠标移入
onmouseleave（常用）、onmouseout 鼠标移出
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动
onfocus 获取焦点
onblur 失去焦点
oninput 输入事件
onchange 下拉框改变
onscroll 滚动条滚动
2. 加载事件
onload 加载完成（并加载成功）
编译器是从上往下解析 html 文件的，若 js 代码写在 body 前面，就有可能无法获取 DOM 对象。
window.onload会使界面上所有的内容加载完毕之后才会触发这个事件。
<script>
window.onload = function() {
// 正常的js代码
}
</script>
onbeforeunload 页面关闭前调用
onunload 页面关闭了
3. 键盘事件
onkeydown 按键按下
→textarea 文本域的键盘事件
onkeypress 按键按下有值的键时触发
onkeypress在按下 Ctrl、Atl、Shift…这样无值的键时不会触发。
onkeyup 按键弹起
// 判断按下的是否为 Enter 键
document.onkeyup = function(event){
if (event.keyCode != 13) {
return false;
}
}
this指向
1. 普通函数中的this
指向 window
2. 构造函数中的 this
用作普通函数时，this 指向 window
配合 new 用作构造函数时，this 指向实例化对象
3. 方法中的 this
谁调用方法，this 就指向谁
4. 定时器中的 this
指向 window
更改 this 指向
1. call 方法
函数名.call(this新指向,实参1,实参2,实参…)
2. apply 方法
函数名.apply(this新指向,数组或伪数组)
3. bind 方法
- 方法1
函数名.bind(this新指向) - 方法2
函数名.bind(this新指向,实参1,实参2,实参…)
var obj = { name:"诺手" };
function test(num1,num2) {
console.log(this);
console.log(num1+num2);
}
test(1,2); // this 指向 window
// 更改 this 指向,使其指向 obj
test.call(obj,10,20);
test.apply(obj,[10,20]);
var fn = test.bind(obj);
fn(10,20);
var fn = test.bind(obj,10,20);
fn();
bind 不会执行函数，仍要再调用。
布局
1. 弹性布局
1.1. 目的
让子元素可以一行显示。
1.2. 书写位置
弹性属性{ display: flex; }设置给父元素。
{ display: flex; }默认 拉伸且不换行。
换行：flex-warp: warp;
1.3. 主轴方向
弹性盒子的主轴和侧轴相互垂直。
默认情况：
1.4. 更换主轴方向
语法
flex-direction: 值;
值：
row从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
1.5. 对齐方式
1.5.1. 主轴对齐
即：子元素在主轴上的排布位置。
语法
justify-content:值;
值：
flex-start从主轴开始位置进行排布
center排布在主轴中间位置
flex-end从主轴结束位置开始排布
space-between子元素之间的距离相同（常用）
space-around子元素左右的间距相同（常用）
1.5.2. 侧轴对齐
即：子元素在这一整行的垂直排布位置。
语法
align-items:值;
值：
flex-start靠上
center中间
flex-end靠下
stretch拉伸（默认子元素的高度会拉伸到填满父元素。前提：子元素没有设高度。）
1.5.3. 多行元素对齐
语法
align-content:值;
值：
flex-start
center
flex-end
stretch
space-between
space-around
1.6. 弹性划分比例
语法
父元素：display: flex;
子元素：flex:数值;
含义：将父元素的宽度按照flex的比例进行划分。
若其它的子盒子（a除外）均有固定宽度，要将父盒子的剩余宽度都给子盒子a，那么直接设置a的属性flex: 1;即可。
盒子阴影
box-shadow: 0px 0px 10px 3px #ccc;
释义：
计时器、定时器
计时器
效果：代码每隔一段时间执行一次。
创建：
var timeId = setInterval(handler, interval);
timeId : 每个计时器的唯一标识。
handler: 要执行的代码，即函数。
interval: 事件间隔（毫秒）。
清除：
clearInterval(timeId);
eg:
var homeTime;
document.querySelector('.title').onclick = function(){
clearInterval(homeTime);
homeTime = setInterval(function(){
// do something...
},1000)
}
定时器
效果：代码隔一段时间才会执行一次，执行完毕会自动关闭。
创建：
var timeId = setTimeout(handler, interval);
清除：
clearTimeout(timeId);
$nextTick
$nextTick 它帮我们计算好 dom 最近的一次更新。
它就是 setTimeout 的高级版本，相当于帮我们计算好了数据渲染到页面的具体时间。
eg：
this.$nextTick(() => {
// do something...
})
防抖和节流
防抖
触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。
<!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>防抖</title>
<style>
.div {
height: 2000px;
}
</style>
</head>
<body>
<div class="div"></div>
<script>
// 进一步封装 防抖
// 传入2个形参: 时间 和 回调函数
function fangdou(time, callback) {
var timer // 这个timer必须为全局变量
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
callback()
}, time)
}
}
window.onscroll = fangdou(500, () => {
console.log('onscroll')
})
</script>
</body>
</html>
节流
高频事件触发，但在 n 秒内只会执行一次，即：每隔一段时间就触发一次。所以节流会稀释函数的执行频率。
<!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>节流</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
// 封装 节流
// function jieliu () {
// var beginTime = Date.now()
// var timer
// return function () {
// clearTimeout(timer)
// var space = Date.now() - beginTime
// if (space >= 1000) {
// console.log('onscroll')
// beginTime = Date.now()
// } else {
// timer = setTimeout(() => {
// console.log('onscroll, end')
// }, 1000)
// }
// }
// }
// 进一步 封装 节流
function jieliu (time, callback) {
var beginTime = Date.now()
var timer
return function () {
clearTimeout(timer)
var space = Date.now() - beginTime
if (space >= time) {
callback()
beginTime = Date.now()
} else {
timer = setTimeout(() => {
callback()
}, time)
}
}
}
window.onscroll = jieliu(1000, () => {
console.log('onscroll')
})
// window.onscroll = function () {
// console.log('onscroll')
// }
</script>
</body>
</html>
闭包和递归
1. 闭包函数
概念：函数A中嵌套一个函数B，B可以引用A的变量和参数，A即为闭包函数。
2. 递归函数
概念：函数A中嵌套一个函数A。
原型链
简述：每个对象都可以有一个 原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。
一个对象访问某一个属性的时候，会先在该对象的自身查找这个属性；如果没有的话就去它的 原型对象 里面去；如果还没有再去 原型对象的原型对象 里去找… 直到Object.protype为止，如果还没有就返回Undefined。这个操作被委托在整个原型链上，这个就是我们说的原型链了。
new 关键字做了什么
- 创建一个空对象
- this 指向这个对象
- 执行赋值代码
- 返回这个对象 ( return this )
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
