[TOC]
## 1.控制语句
### 1.1条件判断
> 多个判断,switch(){case}
~~~
var x = 1;
switch (x) {
case 1:{/*x=1时执行该语句内容*/
console.log('x 等于1');
break;
}
case 2:{/*x=2时执行该语句内容*/
console.log('x 等于2');
break;
}
default:{/*case里面的情况无一发生时，执行该语句*/
console.log('x 等于其他值');
}
}
~~~
### 1.2 循环
> while()循环
~~~
//eg:
var a=0;
while(a<=10){
//只要a<=10为true就一直循环
console.log(a);
a++;
}
~~~
> for...in...循环：获取对象属性的值
~~~
var obj = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in obj) {
alert(obj[key]);
}
~~~
### 1.3break和continue（牢记）
> 1.break 达到条件,跳出循环
~~~
for (var i = 0; i < 10; i++) {
if (i == 5) {
break;
}
console.log(i); //0,1,2,3,4
}
~~~
> 2.continue 结束本次循环,继续开始下一次
~~~
for(var i=0;i<5;i++){
if(i==2){continue};
console.log(i); //0,1,3,4
}
~~~
## 2.DOM基础
### 1.什么是DOM？
> W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
**DOM的支持性:凡是好用的IE9以下都不支持**
*DOM:document object model
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：*
### 2.节点
> 节点树就是由一个个节点组成
> 父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
#### 2.1如何获取节点
~~~
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
~~~
#### 例子1：
~~~
<div>
<button id="all">选中所有的</button>
<button id="no">不选</button>
<button id="reverse">反选</button>
<h3>选择爱好</h3>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">棒球
<input type="checkbox">乒乓球
</div>
~~~
~~~
<script>
var all = document.getElementById("all");
var no = document.getElementById("no");
var reverse = document.getElementById("reverse");
var inputs = document.getElementsByTagName("input");
all.onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
no.onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
reverse.onclick = function(){
for(var i=0;i<inputs.length;i++){
/* inputs[i].checked = (inputs[i].checked==true)?false:true; */
inputs[i].checked = !(inputs[i].checked);
}
}
</script>
~~~
#### 例子2：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示
~~~
<div id="div" style="display:block"></div>
<button id="btn">切换</button>
<script>
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){
var value = div.style.display;
if(value == "block"){
div.style.display = "none"
}else{
div.style.display = "block"
}
}
</script>
~~~
#### 2.2修改元素节点的内容,样式
**修改元素节点的内容**
~~~
1. innerHTML
2. textContent
/*little demo*/
<div id="test">
hello world
</div>
<script>
var test = document.getElementById("test");
test.onclick = function(){
// this.innerHTML = "<p>change</p>";
this.textContent = "<p>change</p>";
}
</script>
~~~
**修改样式**
~~~
<style>
.current{
color: brown;
}
.bg{
background: #fafa;
}
.fs{
font-size: 40px;
}
</style>
<p id="test" class="current">hello world</p>
<script>
var test = document.getElementById("test");
test.onclick = function(){
// this.style.background = "#f1f1f1";
// this.className = "current";
// this.style.cssText = "color:red;font-size:30px;background-color:green;"//添加css样式
// this.classList.add("fs","bg","current");//添加class名字
// this.classList.remove("fs");//移除class名字
this.classList.toggle("current");//toggle:在add和remove之间切换
console.log(this.classList.contains("current"));//是否包含某个class，结果返回boolean值
}
</script>
~~~
> 隔行变色
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
~~~
css实现方法
~~~
<style>
//偶数项
ul>li:nth-child(odd){
color:red;
}
//奇数项
ul>li:nth-child(even){
color:green;
}
</style>
~~~
js实现方法
~~~
<script>
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.backgroundColor = "red";
}else{
lis[i].style.backgroundColor = "green"
}
}
</script>
~~~
### 3. textContent,nodeValue
#### 3.1node.textContent
> textContent属性返回当前节点和它的所有后代节点的文本内容。
#### 3.2Node.nodeValue
> 只有文本节点（text）和注释节点（comment）,有文本值，因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null
### 4.节点的分类nodeType
* nodeType==1 为元素节点
* nodeType==2 为属性节点
* nodeType==3 位文本节点
~~~
<body id="body">
<p id="test">hello word</p>
<script>
var attr = document.body.getAttributeNode("id");//getAttribute() 方法返回指定属性名的属性值，以 Attr 对象.
var test = document.getElementById("test").firstChild;
/*nodeType 属性返回以数字值返回指定节点的节点类型。*/
console.log(document.body.nodeType);//输出 1
console.log(attr.nodeType);//输出 2
console.log(test.nodeType);//输出 3
</script>
</body>
~~~
### 5.增加获取节点
#### 5.1appendChild()
> 该方法可向节点的子节点列表的末尾添加新的子节点
~~~
createElement(); //创建元素节点
createTextNode(); //创建文本节点
var p = document.createElement("p");
var txt = document.createTextNode("hello world");
//创建属性节点
var attr = document.createAttribute("class");
attr.value = "democlass";
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p)
~~~
> parentNode.insertBefore(newNode,targetElementNode)
#### 5.2insertBefore() 方法
> 该方法在您指定的已有子节点之前插入新的子节点;insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
~~~
<ul id="parent">
<li>hello world</li>
</ul>
<script>
var parent = document.getElementById("parent");
for (let i = 0; i < 3; i++) {
var li = document.createElement("li");
li.innerHTML = "java" + i;
parent.insertBefore(li, parent.firstElementChild)
}
</script>
~~~
### 6.删除节点
~~~
parentNode.removeChild(childNode)
//removeChild() 方法指定元素的某个指定的子节点。
~~~
### 7.修改节点(替换节点)
>parentNode.replaceChild(newNode,oldNode);
replaceChild() 方法可将某个子节点替换为另一个。
~~~
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
~~~
### 8.克隆节点
> node.cloneNode(true)
**cloneNode(deep) 方法克隆所有属性以及它们的值。如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。**
~~~
<p id="test">hello world</p>
<script>
var test = document.getElementById("test");
var cTest = test.cloneNode(true);
console.log(cTest);
document.body.appendChild(cTest);
</script>
~~~
## 3. DOM事件
> JavaScript与HTML之间的交互式通过事件实现的
> **不熟悉的地方：bootstrap Vue，onloaf-document.readState事件**
### 3.1onfocus、onblur事件
~~~
onfocus 事件在对象获得焦点时发生。(即鼠标点击到对象上时) onfocus 事件的相反事件为 onblur 事件。
~~~
egs：简书输入框的伸缩实现
~~~
<style>
input{
width: 200px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<input type="text" id="txt">
<script>
var txt = document.getElementById("txt");
$("#txt").focus(function(){
$(this).animate({width:"300px"},1000)
})
$("#txt").blur(function(){
$(this).animate({width:"200px"}),1000
})
</script>
~~~
### 3.2onmouseover、onmouseout事件（鼠标移入、移出事件）
egs:
~~~
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<p id="test" class="animated">hello world</p>
<script>
/*
onmouseover--鼠标移入
onmouseout--鼠标移出
*/
var test = document.getElementById("test");
test.onmouseover = function(){
this.classList.add("shake");
}
test.onmouseout = function(){
this.classList.remove("shake");
}
</script>
~~~
### 3.3onloadonload事件
该事件会在页面或图像加载完成后立即发生。
egs：
~~~
window.onload = function(){
if(document.readyState == "complete"){//readyState 属性返回当前文档的状态（载入中……）。该属性返回以下值:uninitialized - 还未开始载入loading - 载入中interactive - 已加载，文档与用户可以开始交互complete - 载入完成
//coding
alert("已加载完成");
}
}
~~~
### 3.4onchange事件
onchange 事件会在域的内容改变时发生,它支持的标签有input,select,textarea
egs:
~~~
<input type="text" id="txt">
<script>
var txt = document.getElementById("txt");
txt.onchange = function(){
if(this.value == "im"){
alert("请输入密码：")
}else{
alert("禁止输入！");
}
}
</script>
~~~
### 3.5onsubmit事件
onsubmit 事件会在表单中的确认按钮被点击时发生。
egs:
~~~
<form id="submit">
<p><input type="text" placeholder="输入你的密码：" id="user"></p>
<input type="submit">
</form>
<script>
var submit = document.getElementById("submit");
var user = document.getElementById("user");
submit.onsubmit = function(event){
if(user.value == "123"){
alert("you win");
window.location.href = "http://www.baidu.com";
}
else{
alert("请输入密码：");
}
return false;
}
</script>
~~~
### 3.6onresize事件
onresize 事件会在窗口或框架被调整大小时发生。
egs:
~~~
<script>
// window.innerWidth-->获取浏览器窗口的width
window.onresize= function(){
alert(window.innerWidth)
}
</script>
~~~
### 3.7onscroll事件
onscroll 事件在元素滚动条在滚动时触发
egs:
~~~
<script>
/*
document.documentElement.scrollTop滚动条距离顶部的高度
*/
window.onscroll = function(){
// var height = window.scrollY;
var height = document.documentElement.scrollTop;
console.log(height);
}
</script>
~~~
### 3.8onkey键盘事件
> onkeydown:用户按下一个键盘按键时发生
onkeypress:在键盘按键按下并释放一个键时发生
onkeyup:在键盘按键松开时发生
keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码
eg1:
~~~
<script>
document.onkeydown = function(event){//键盘按下去触发
alert(event.keyCode);//读取键盘值
}
</script>
~~~
eg2:
~~~
<p>你还可以输入<em id="em" style="color:red;">0</em>/300</p>
<textarea cols="30" rows="10" id="txt"></textarea>
<script>
var em = document.getElementById("em");
var txt = document.getElementById("txt");
txt.onkeydown = function(){
var len = this.value.length;
em.innerHTML = len;
}
</script>
~~~
### 3.9冒泡事件
egs:
~~~
<style>
#parent{
width: 200px;
height: 200px;
border: 1px solid #333;
}
#child{
margin: 30px;
width: 100px;
height: 100px;
border: 1px solid #ff2d51;
}
</style>
</head>
<body>
<div id="parent">
parent
<div id="child">child</div>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = function(){
alert("parent");
}
child.onclick = function(event){
alert("child");//点击子元素，若父元素与子元素有同样的事件，父元素的事件也会触发；这便是事件冒泡
//阻止事件冒泡
// event.stopPropagation();
}
</script>
~~~
## 4.BOM
> BOM(browser object model)浏览器对象模型
### 4.1window
window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。
~~~
var age =15;
//声明一个全局变量,相当于window.age=15;
~~~
**所有的全局变量和全局方法都被归在window上**
### 4.2Window对象的方法
#### 1.语法:window.alert()
#### 2.语法:window.confirm(“msg”)
功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;
egs:
~~~
<button id="btn">你想剁手吗？</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
var value = window.confirm("are you sure");
if(value){
window.location.href = "https://www.taobao.com";
}else{
window.location.href = "http://www.hudazx.cn"
}
}
</script>
~~~
#### 3.语法:window.prompt(“text,defaultText”)
> 参数说明:
> text:在对话框中显示的文本
> defaultText:默认输入文本
> 返回值:点取消按钮,返回null
> 点确定按钮,返回输入的文本
egs:
~~~
<script>
var value = window.prompt("请输入你的年龄");
if(value>=18){
alert("你可以进网吧了");
}else{
alert("小屁孩快走开")
}
</script>
~~~
#### 4.语法:window.open(pageURL,name,parameters)
~~~
功能:打开一个新的窗口或查找一个已命名的窗口
~~~
> 参数说明:
> pageURL:子窗口的路基
> name:子窗口的句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
> parameters：窗口参数(各参数之间用逗号分隔)
> window.close()
> 功能:关闭窗口
egs:
~~~
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// window.open("https://www.baidu.com");
window.open("https://www.baidu.com","baidu",'width=400px,height=200px,top=0px');
// window.close();//关闭窗口
}
</script>
~~~
### 4.3window对象方法——定时器
* 1.超时调用-setTimeout()
* 2.间歇调用-setInterval()
JavaScript是单线程语言,所有代码按顺序执行
**setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式**
~~~
<script>
setTimeout(function() {//会执行一次
alert(1);
}, 1000);
</script>
~~~
~~~
参数说明:
1.code：要调用的函数或要执行的JavaScript代码
2.millisec：在执行代码前需要等待的毫秒数
setTimeout方法返回一个id值，通过它取消超时调用
clearTimeout()
~~~
**setInterval(code,millisec)
功能:每隔一段时间执行一次代码
clearInterval()clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。**
eg:num=0,max=3每过一秒num++,当num>max清除定时器
~~~
<script>
var num=0;
var max=3;
var timer;
function go(){
num++;
if(num>max){
clearTimeout(timer);
}else{
timer=setTimeout(go,1000);
alert(num);
}
}
go();
</script>
~~~
### 4.4location对象
location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。
~~~
location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
语法：location.host
功能:返回服务器名称和端口号
语法：location.hostname
功能:返回不带端口号的服务器名称
语法：location.pathname
功能：返回URL中的目录和(或)文件名
语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串
~~~
### 4.5history对象
~~~
history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能:回到历史记录的上一步
相当于是用了history.go(-1)
//-1表示前一步,-2前两部
语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()
语法：history.go(-n)
功能:回到历史记录的前n部
语法:history.go(n)
功能:回到历史记录的后n步
~~~
egs:
~~~
/*在第一个页面添加一个链接，使得可以跳转到另一个页面，在另一个页面添加按钮之类的元素，使用js的history.back()回退到上一个页面*/
<button id="back">back06</button>
<script>
var back = document.getElementById("back");
back.onclick = function(){
history.back();
}
</script>
~~~
### 4.6screen对象
~~~
screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight
document.documentElement.clientWidth;//页面布局视口的width
screen.availWidth;//显示设备的width
window.devicePixelRatio;//设备与布局视口的像素比
~~~
### 4.7navigator对象
~~~
1.需要掌握Navigator对象的userAgent属性
2.需要掌握如何判断浏览器的类型
3.需要掌握如何判断设备的终端是移动还是PC
UserAgent:用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。*
//检测浏览器类型
/*关于如何才能看到检测效果，f12打开控制台，切换为iphone端，刷新页面即可显示效果*/
if(/Android|iphone|webOS/i.test(navigator.userAgent)){
location.href="https://www.baidu.com/"
}else if(/ipad/i.test(navigator.userAgent)){
location.href="https://www.sogou.com/"
}
~~~
## 5.this的指向问题
> 在事件函数中,this指向正在执行事件的对象
egs:
~~~
<input type="button" value="hello" id="test">
<script>
var value = "change";
var test = document.getElementById("test");
test.onclick = function(){
console.log(this.value);//hello
setTimeout(function(){
console.log(this.value);//change
},300)
setTimeout(()=>{//箭头函数this指向test
console.log(this.value);//hello
},300)
go();//change 函数正常调用，this指向window
}
function go(){
console.log(this.value);
}
</script>
~~~
> 案例中，我们发现当调用方法时this会指向我们所定义的全局变量value，而非函数test，使得控制台输出change,当使用箭头函数和直接输出this.value，控制台才会输出hello，对此，我们还另外提出两种解决方案
~~~
/*还是同一个案例*/
test.onclick = function(){
//方法1 将this赋值给一个变量
/* var self = this;
setTimeout(function() {
console.log(self.value);//hello
}, 300); */
//方法2 bind bind可以改变函数内部this关键字的指向
//bind
setTimeout(function() {
console.log(this.value);//hello
}.bind(this), 300);
}
~~~
有关bind的一个小例子：
~~~
<script>
var name = "zhang";
var obj = {
name:"厉害了",
};
var func = function(){
console.log(this.name);//cheng
}.bind(obj);
func();
</script>
~~~
