JavaScript
HTML、CSS只能写出静态效果，JS可以制作动态效果
- JavaScript，是一门编程语言，浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。
- DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。
- BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
JavaScript是编程语言，DOM和BOM是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。
1.1 js基础
引入方式：
Script代码块，只能在当前页面使用。<script type="text/javascript"> // 内部编写JavaScript代码 </script>独立js文件，可以被多个引入之后使用。
<script type="text/javascript" src="JavaScript文件路径"></script>
推荐把css在header引入，js代码放在body标签的底部,这样先加载页面文字和样式，体验较好。
js中单行注释用 // ；多行注释用 /* */
局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
常见数据类型
typeof(a)查看类型
数字（Number）：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2"); // 将某值转换成数字，不成功则NaN
parseFloat("1.2"); // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/
字符串(String)
声明
var name = "anlnalanna";
var name = String("anlnalanna");
var age_str = String(18);
// 常用方法
var name = "anlnalanna";
names[0] // 索引
name.length // 获取字符串长度
name.trim() // 去除空白
name.charAt(index) // 根据索引获取字符
name.substring(start,end) // 根据索引获取子序列
str.toLowerCase() str.toUperCase() //大小写转换：
str1.indexOf('l') str1.lastIndexOf('l') //查询索引
str1.substr(1,2)//获取字符（1,2）
str1.substring(1,2)//获取字符（1）
str1.replace('e','a')//替换
str1.split('e')//切片
str1.concat('123')//连接
parseInt()向下取整 Math.ceil()向上取整 parseFloat eval //强制类型转换：
布尔类型（Boolean）
var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
*/
数组（Array）
//声明
var names = ['a', 'b', 'c']
var names = Array('anna', 'nana')
// 常见方法
names[0] // 索引
names.push(ele) // 尾部追加元素
var ele = names.obj.pop() // 尾部移除一个元素
names.unshift(ele) // 头部插入元素
var ele = obj.shift() // 头部移除一个元素
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
names.slice(start,end) // 切片
names.reverse() // 原数组反转
names.join(sep) // 将数组元素连接起来以构建一个字符串
names.concat(val,..) // 连接数组
names.sort() // 对原数组进行排序
names.length //长度
.join给数字拼接
var arr=[1,2,3]
arr.Tostring()
arr.ValueOf()返回初始值
arr.concat()添加进数组里
arr.reverse()反转
arr.sort()排序//按照字母（转换成字符串）排序 所以25>100
points.sort(function(a, b){return a - b});//列表数字排序
arr.slice()切片
//删除子数组 x.splice(start,deleteCount,value,…)（deleteCount删除，value插入）
var a=[1,2,3,4,5,6,7];
a.splice(1,2);//[1,4,5,6,7]
- push,pop栈操作
- shift unshift也是栈操作：unshift在前面插入元素,shift 从前面移除元素
字典（对象Object）
// 声明
info = {
name:'anna',
"age":18
}
// 常用方法
var val = info['name'] // 获取
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除
其他（null、undefine）
-
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。
-
undefined是一个特殊值，表示变量声明但未定义。
var name;
console.log(typeof(name));
条件
if,else，用于判断。
var age = 18;
if(age <18){
}else if(age>=18 and 1 == 1){
}else if(age>=30){
}else{
}
switch,case，用于判断等于某些值。
var num = 18;
switch(num){
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('油腻老男人');
break;
case 100:
console.log('....');
break;
default:
console.log('太大了');
}
循环语句
-
for(var i in ['国产','日韩','欧美'])，默认生成索引，适用于：字符串、元组、字典。
-
for(var i=0;i<10;i++)，自定义索引并设置增加步长，适用于：字符串、元组。（字典索引非有序）
异常处理
在JavaScript的异常处理中有两个注意事项：
- 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
- catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
var name = ''
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
函数
JavaScript中的函数可以简单概括为以下三类：
- 普通函数：
function func(arg){ return arg + 1; }
- 匿名函数
function (arg){ return arg + 1; } // 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
- 自执行函数，自动触发执行。
(function(arg){ console.log(arg); })('anna')传入参数多了不报错，用需要的个数，少了返回NaN
json 序列化（将对象和字符串之间进行转换。）
JSON.stringify(object)，序列化JSON.parse(str)，反序列化
网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。
1.2 DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。
DOM对象：https://www.runoob.com/jsref/dom-obj-document.html
节点：
DOM 代码必须 写在body后面。节点属性：
- 整个文档是一个节点Document
- 每个HTML元素是一个元素节点Element
- HTML元素内的文本是文本节点Text
- HTML属性是属性节点Attribute
- 注释是注释节点comment
var ele=document.getElementsByClassName('p1')[0];
console.log(ele);
console.log('attribute',ele.attributes);
console.log('nodeType',ele.nodeType);
console.log('nodeName',ele.nodeName);
console.log('nodeValue',ele.nodeValue);
console.log('innerHTML',ele.innerHTML); //文本包括标签
console.log('innerText',ele.innerText); //文本不包括标签
//导航属性：
console.log(ele.parentNode);
console.log(ele.firstChild);
console.log(ele.lastChild);
console.log(ele.childNodes);
//text空文本也是节点对象
//常用导航属性：
console.log(ele.parentNode);
console.log(ele.children);
console.log(ele.firstElementChild);
console.log(ele.lastElementChild);
console.log(ele.nextElementSibling);//下一个兄弟标签元素
console.log(ele.previousElementSibling);//上一个兄弟元素标签元素
console.log(ele.childNodes);
选择器
- 直接查找
document.getElementById(arg) // 根据ID获取一个标签对象 document.getElementsByClassName(arg) // 根据class属性获取标签对象集合 document.getElementsByName(arg) // 根据name属性值获取标签对象集合 document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
- 间接查找
var tag = document.getElementById(arg); tag.parentElement // 找当前标签对象的父标签对象 tag.children // 找当前标签对象的所有子标签对象 tag.firstElementChild // 找当前标签对象的第一个子标签对象 tag.lastElementChild // 找当前标签对象最后一个子标签对象 tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象 tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
DOM 元素对象
DOM元素属性和方法：https://www.runoob.com/jsref/dom-obj-all.html
element.appendChild()为元素添加一个新的子元素element.removeChild()删除一个子元素element.replaceChild()替换一个子元素element.remove()删除这个元素nodelist.length返回节点列表的节点数目。（元素之间的空格是文本，文本是节点）如删除表格一行数据：
<td> <input type="button" value="删除" onclick="deleteRow(this);"> </td> <script> //删除表格中当前行的数据 function deleteRow(self) { var rowTr = self.parentElement.parentElement; rowTr.remove(); } </script>文本操作
对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。
- innerText
标签对象.innerText，读取标签内容（仅文本）。标签对象.innerText="an"，修改标签内容（仅文本）。- innerHTML
标签对象.innerHTML，读取标签内容（含标签）。标签对象.innerText="<a href='#'>an</a>"，修改标签内容（标签、文本）。属性对象
值操作针对与用户交互相关的标签，其中内部使用value属性进行操作。
input,textarea,select
单选框radio复选框checkbox，通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。
扩展：标签对象.checked可以对选中状态进行读取和设置。var radios = document.getElementsByName('gender'); for (var i = 0; i < radios.length; i++) { if (radios[i].value === "male") { radios[i].checked = true; } }class 属性操作
DOM中主要提供了三个帮助我们操作class属性值的功能：
标签对象.className，class属性对应的值直接操作。标签对象.classList.remove(cls)，class属性对应值删除某个样式。标签对象.classList.add(cls)，class属性中添加样式。模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .container{ 980px; margin: 0 auto; } .header{ height: 48px; background-color: #499ef3; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.7; } .login{ 400px; height: 300px; background-color: white; border: 1px solid #dddddd; position: fixed; top: 60px; left: 50%; margin-left: -200px; } .hide{ display: none; } </style> </head> <body> <div class="header"> <div style="float: right;margin: 10px;"> <a onclick="showDialog();" style="padding: 5px 10px;background-color: goldenrod;color: white;">登录</a> </div> </div> <div class="body"> <div class="container" style="text-align: center"> <img src="https://w.wallhaven.cc/full/ox/wallhaven-ox83gp.jpg" alt=""> </div> </div> <!--遮罩层--> <div id="shade" class="shade hide"></div> <!--登录框--> <div id="login" class="login hide"> <h2 style="text-align: center">用户登录</h2> <a onclick="hideDialog();" style="padding: 5px 10px;background-color: cornflowerblue;color: white;">关闭</a> </div> <script type="text/javascript"> function showDialog() { document.getElementById('shade').classList.remove('hide'); document.getElementById('login').classList.remove('hide'); } function hideDialog() { document.getElementById('shade').classList.add('hide'); document.getElementById('login').classList.add('hide'); } </script> </body> </html>style 样式操作
如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。
document.getElementById('header').style.backgroundColor = 'green';点赞+1效果
function doFavor(self) { var plusTag = document.createElement('span'); var fontSize = 10; var marginLeft = 10; var marginTop = 10; var opacity = 1; plusTag.innerText = "+1"; plusTag.style.color = 'green'; plusTag.style.position = 'absolute'; plusTag.style.fontSize = fontSize + 'px'; plusTag.style.marginLeft = marginLeft + 'px'; plusTag.style.marginTop = marginTop + 'px'; plusTag.style.opacity = opacity; self.appendChild(plusTag); var interval = setInterval(function() { fontSize += 5; marginLeft += 5; marginTop -= 5; opacity -= 0.2; plusTag.style.fontSize = fontSize + 'px'; plusTag.style.marginLeft = marginLeft + 'px'; plusTag.style.marginTop = marginTop + 'px'; plusTag.style.opacity = opacity; if (opacity <= 0) { self.removeChild(plusTag); clearInterval(interval); } }, 100) }
DOM属性对象（element.attributes[0]）
//获取属性值 document.getElementsByTagName("button")[0].attributes[0].value; //改变属性值 var h=document.getElementsByTagName("H1")[0]; h.getAttributeNode("style").value="color:green";node的增删改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ 400px;height: 150px} .div1{background: skyblue} .div2{background: lightgoldenrodyellow} </style> </head> <body> <div class="div1"> <button onclick="add()">增加</button> <button onclick="del()">删除</button> </div> <div class="div2"> <button onclick="change()">change</button> <p>这是P标签</p> </div> </body> <script> function add() { var ele=document.createElement("p"); var father=document.getElementsByClassName("div1")[0]; ele.innerHTML="hello P";//添加文本 father.appendChild(ele);//父节点添加子节点 } function del() { var father=document.getElementsByClassName("div1")[0]; var son=father.getElementsByTagName("p")[0];// var son=father.lastElementChild; father.removeChild(son); } function change() { var father=document.getElementsByClassName("div2")[0]; var img=document.createElement("img"); img.src="1.png"; var son=father.getElementsByTagName("p")[0]; father.replaceChild(img,son) // father.removeChild(son);father.append(img); } </script> </html>修改HTML内容
InnerHTML和innertext修改css
ele.style.color="red";
修改属性：
img.setAttribute("src","1.png");
创建建属性：
var ele=document.createElement("p");
删除属性：
father.removeChild(son);
关于类的操作：
ele.classNameele.classList.addele.classList.removeinput的checked属性
反选：
input.checked=!input.checked
其他事件：https://www.runoob.com/jsref/dom-obj-event.html
事件
DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。常见事件有：
- onclick，单击时触发事件
- ondblclick，双击触发事件
- onchange，内容修改时触发事件
- onfocus，获取焦点时触发事件
- onblur，失去焦点触发事件
- onsubmit 只能给表单使用
<!-- 标签上绑定的函数，this为window，不是标签，要让变成标签，要传入参数this,并且在函数中传入参数arg,调用arg -->
<iframe frameborder="1" id="iframe" name="ifr" onload="reloadiframe()"></iframe>
默认绑定的事件先发生，再submit。如果返回false，就不会执行submit按钮的事件了
事件传播
两个嵌套的div绑定事件，两个都会执行，先执行里面的，再执行外面的，要阻止传播，使用e.stopPropagation()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event</title> <style> .inner{ 1000px;height:100px;background: gray} .outer{ 3000px;height:300px;background: indianred} </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> <script> var inner=document.getElementsByClassName("inner")[0]; var outer=document.getElementsByClassName("outer")[0]; inner.onclick=function() { this.style.background="black"; alert("inner"); event.stopPropagation();//防止传播 } outer.onclick=function () { alert("outer"); } </script> </html>左侧菜单点击切换:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> body { margin: 0; } .header { height: 48px; background-color: #499ef3; } .body .menu { position: fixed; top: 48px; left: 0; bottom: 0; 220px; border-right: 1px solid #dddddd; overflow: scroll; } .body .content { position: fixed; top: 48px; right: 0; bottom: 0; left: 225px; /* 超出范围的话，出现滚轮 */ overflow: scroll; } .body .menu .title { padding: 8px; border-bottom: 1px solid #dddddd; background-color: #5f4687; color: white; } .body .menu .child { border-bottom: 1px solid #dddddd; } .body .menu .child a { display: block; padding: 5px 10px; color: black; text-decoration: none; } .body .menu .child a:hover { background-color: #dddddd; } .hide { display: none; } </style> </head> <body> <div class="header"></div> <div class="body"> <div class="menu"> <div class="item"> <div class="title" onclick="showMenu(this);">国产</div> <div class="child"> <a href="#">少年的你</a> <a href="#">我不是药神</a> <a href="#">我和我的祖国</a> </div> </div> <div class="item"> <div class="title" onclick="showMenu(this);">欧美</div> <div class="child hide "> <a href="#">战争之王</a> <a href="#">华尔街之狼</a> <a href="#">聚焦</a> </div> </div> </div> <div class="content"></div> </div> <script type="text/javascript"> function showMenu(self) { var childList = document.getElementsByClassName('child'); for (var i = 0; i < childList.length; i++) { childList[i].classList.add('hide'); } self.nextElementSibling.classList.remove('hide'); } </script> </body> </html>搜索关键字：
function getFocus(self) { self.className = 'black'; if (self.value === '请输入关键字' || self.value.trim().length === 0) { self.value = ''; } } function leave(self) { if (self.value.length === 0) { self.value = '请输入关键字'; self.className = 'gray'; } else { self.className = 'black'; } }
1.3 BOM
BOM（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能。更直白一点讲：BOM相当于是一个模块，提供了关于浏览器操作的功能。
提示框
alert，提示框。confirm，确认框（有确认，取消）。
浏览器URL
location.href，获取当前浏览器URL。location.href = "url"，设置URL，即：重定向。location.reload()，重新加载，即：刷新页面。
定时器
setInterval(function(){},1000)，创建多次定时器。（1000为1秒）clearInterval(定时器对象)，删除多次定时器。setTimeout(function(){},1000)，创建单次定时器。clearTimeout(定时器对象)，删除单次定时器。