javascirpt常用复习知识
何为JS以及JS的重要性
js作为一门编程语言，对于前端来说是最为核心的，它关系者前端学习路线的命运，比如我们熟知的node.js、vue.js、以及我们使用过的jquery，他们的底层都是依赖于js,显而易见，他的重要性，我的这篇文章会引领你如何学习好js，拿准高效的知识，始终跑在前面
JS常用的基础数据类型
number(数值型) boolean(布尔性) string(字符串型) null(空)underfined(未定义) 以及我们在后面ES6中所学习的Symbol(确保值的唯一性，用的并不多)
JS常用的复杂数据类型
function(函数) array(数组) Object(对象)
JS表达式
常用的表达式如下：
算数表达式：+ - * / % ++ --
比较表达式：> < >= <= == === != !==
逻辑表达式 && || !
JS获取标签的五中方式
getElementById()根据ID获取标签名
getElementsByClassName()根据类名获取标签属性 他返回的类型是一个伪数组
//简单介绍一下伪数组
/*
它具有索引号以及长度
但是它不具有数组的API方法
*/
getElementsByTagName()根据标签名获取标签属性 返回的类型也是一个伪数组
还有H5新增的获取标签属性的两种方式
querySelector() 获取标签属性 里面的参数可以填类名. id名#等等
querySelectorAll()返回该标签的所有集合，返回的是一个伪数组
JS常用的事件
常用的鼠标事件：
click 单击
dblclick 双击
mouseover 移入
mouseout 移出
mousemove 移动
mouseenter 移入
mouseleave 移出
change input
input input
focus 聚焦
blur 失焦
mouseup 鼠标抬起
mousedown 鼠标按下
keyup 键盘抬起
keydown 键盘按下
keypress 键盘
load 预加载
resize 窗口变化
scroll 滚动
contextmenu 鼠标右键(常用于鼠标禁止右键)
JS事件三要素
首先获取事件源
其次给事件源绑定事件
最后添加处理程序
比如给某个button绑定点击事件的处理方式：
let btn = document.querySelector('button)
btn.onclick = function(){
console.log(1)
}
js获取标签内容
存在两种方式：
一种方式是innerText
另外一种方式是innerHTML
两种方式都是获取标签体内容的，但是二者存在区别：前者是获取内容，而后者可以获取标签内容（比如字体斜体、变大、下划线等等）
js对标签属性的操作
标签属性分为两种：
一种是固有属性：标签中显示的 比如img中的src、alt;input中的value等等，我们可以通过浏览器查看的
一种是自定义属性：标签存在该属性 但是浏览器不显示 比如data-index
我们可以使用className和classList进行操作；className与classList的区别：前者是覆盖原先类型的，后者不会覆盖原先类名的
js分支语句
js分支语句包含： if else 单分支 if else if双重分支 if else if else if else多重分支以及switch分支语句
if语句语法：if(条件表达式){执行语句} //当满足条件表达式就执行该语句
if(条件表达式){执行条件1} else{执行条件2} //满足条件时执行1,否则执行语句2
if(){} else if(){} else if(){} else{} //依次里面的条件表达式，就会执行对应的执行语句
js循环语句
js循环语句包括：while循环 do..while循环 以及使用较多的for循环
语法：
while(条件表达式){执行语句 break}
do{执行语句}while(条件表达式) 先执行语句一次 后通过条件表达式进行判断，是否满足
for循环我们常用于对元素进行遍历
课后作业：
1.用于输入QQ号，判断是否满足对应的条件
// 作业要求
// 1、有没有输入
// 2、输入的是不是数字
// 3、不能有0在前面
// 4、不能是小数
// 5、输入的数字必须在5位以上、11位以下
//使用正则表达式进行处理
let qq = /^[1-9][0-9]{4,10}$/;
let btn = document.querySelector('button')
let inp = document.querySelector('input')
btn.onclick = function () {
let value = inp.value
if (qq.test(value)) {
alert('输入合法')
} else {
alert('输入不合法')
}
}
2.修改盒子大小的案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 600px;
margin: 20px auto;
list-style: none;
border: 1px solid gray
}
.show {
height: 200px;
overflow: auto;
line-height: normal
}
li {
line-height: 40px;
padding-left: 5px
}
li+li {
border-top: 1px solid gray
}
input {
margin-right: 10px;
}
button {
vertical-align: middle
}
style>
head>
<body>
<ul class="box">
<li class="show">
<div>效果div>
li>
<li><input type="text" value="deepskyblue"><button>背景颜色button>li>
<li><input type="text" value="white"><button>文字颜色button>li>
<li><input type="number" value="20"><button>文字大小button>li>
<li><input type="number" value="200"><button>修改宽度button>li>
<li><input type="number" value="100"><button>修改高度button>li>
ul>
<script>
// 下面方式比较简便
let btns = document.querySelectorAll('button');
let inps = document.querySelectorAll('input');
let div = document.querySelector('div');
// 使用循环遍历按钮并为每个按钮添加点击事件
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
let value = inps[i].value;
console.log(value);
setStyle(i, value);
};
}
// 封装函数，用于修改样式
function setStyle(index, value) {
switch (index) {
case 0:
div.style.backgroundColor = `${value}`
break;
case 1:
div.style.color = `${value}`
break;
case 2:
div.style.fontSize = `${value}px`
break;
case 3:
div.style.width = `${value}px`
break;
case 4:
div.style.height = `${value}px`
break;
default:
break;
}
}
script>
body>
html>
div样式操作的案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
}
#wrap {
position: relative;
width: 500px;
height: 300px;
border: 1px solid gray;
padding: 20px;
}
#leftBox {
width: 300px;
height: 100px;
border: 1px solid gray;
}
#rightBut {
position: absolute;
top: 20px;
left: 340px;
}
#gray {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.4;
}
#edit {
display: none;
position: absolute;
top: 20px;
right: 20px;
width: 180px;
height: 260px;
padding: 10px;
background: #fff;
}
#edit a {
display: inline-block;
color: #000;
border: 1px solid gray;
width: 80px;
height: 25px;
text-align: center;
line-height: 25px;
margin-bottom: 10px;
}
style>
head>
<body>
<div id="wrap">
<div id="leftBox">div>
<button id="rightBut">点击显示div样式button>
<div id="gray">div>
<div id="edit">
<h2>大小h2>
<p>
<a href="#" id="size1">300*300a>
<a href="#" id="size2">200*300a>
<a href="#" id="size3">300*200a>
<a href="#" id="size4">100*300a>
p>
<h2>颜色h2>
<p>
<a href="#" id="color1">#ff0000a>
<a href="#" id="color2">#00ff00a>
<a href="#" id="color3">#0000ffa>
<a href="#" id="color4">#00ffffa>
p>
<button id="true">确定button>
<button id="false">取消button>
div>
div>
<script>
// 获取DOM元素
let btn = document.querySelector('#rightBut');
let edit = document.querySelector('#edit');
let p = document.querySelectorAll('#edit p')[0].querySelectorAll('a');
let p1 = document.querySelectorAll('#edit p')[1].querySelectorAll('a');
let box = document.querySelector('#leftBox');
let gray = document.querySelector('#gray')
// 点击按钮执行的函数
btn.onclick = function () {
// 显示编辑框
edit.style.display = 'block';
// 显示遮罩层
gray.style.display = 'block'
// 鼠标移出事件，临时改变样式
p.forEach(function (item) {
item.onmouseleave = function () {
let text = item.innerText.split('*');
box.style.width = `${text[0]}px`;
box.style.height = `${text[1]}px`;
};
});
p1.forEach(function (item) {
item.onmouseleave = function () {
let text = item.innerHTML;
box.style.backgroundColor = `${text}`;
};
});
}
// 确定和取消按钮的点击事件
let confirmBtn = document.querySelector('#true');
let cancelBtn = document.querySelector('#false');
// 确定按钮点击事件
confirmBtn.onclick = function () {
// 点击确定按钮的时候，将数据保存到本地
saveData()
edit.style.display = 'none';
// 隐藏遮罩层
gray.style.display = 'none'
}
// 取消按钮点击事件
cancelBtn.onclick = function () {
// 点击取消的时候，从本地数据拿出来
getData()
// 隐藏遮罩层
gray.style.display = 'none'
// box.style.backgroundColor = '';
// box.style.width = `${0}px`;
// box.style.height = `${0}px`;
edit.style.display = 'none';
// box.style = 'none'
box.id = 'leftBox';
}
function saveData() {
let data = {
width: box.style.width,
height: box.style.height,
backgroundColor: box.style.backgroundColor
}
localStorage.setItem('boxData', JSON.stringify(data))
}
function getData() {
let data = JSON.parse(localStorage.getItem('boxData'))
// console.log(data);
const { width, height, bgc } = data
// console.log(width);
box.style.width = `${width}`
box.style.height = `${height}`
box.style.bgc = `${bgc}`
}
// saveData()
script>
body>
html>