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     inputinput      inputfocus      聚焦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.valueif (qq.test(value)) {alert('输入合法')} else {alert('输入不合法')}}

2.修改盒子大小的案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><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><!-- 要求：input输入任何对应值 点击后面的按钮div显示对应的效果--><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>Title</title><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*300</a><a href="#" id="size2">200*300</a><a href="#" id="size3">300*200</a><a href="#" id="size4">100*300</a></p><h2>颜色</h2><p><a href="#" id="color1">#ff0000</a><a href="#" id="color2">#00ff00</a><a href="#" id="color3">#0000ff</a><a href="#" id="color4">#00ffff</a></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>