[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>
~~~
