1.回顧上節內容(JavaScript)css
一.JavaScript概述html
1.ECMAScript和JavaScript的關係前端
2.ECMAScript的歷史vue
3.JavaScript是一門先後端均可以寫的一門語言,操做和瀏覽器的一些交互的內容,也能夠操做文檔樹,html其實就是一顆文檔樹.python
4.ES6就是指ECMAScript6jquery
儘管ECMAScript是一個重要標準,但它並非JavaScript惟一的部分,固然,也不是惟一被標準化的部分,實際上一個完整的JavaScript實現由如下3個部分組成:vue-router
核心(ECMAScript)json
文檔對象模型(DOM):Document object model(整合js,css,html)bootstrap
瀏覽器對象模型(BOM):Browser object model(整合js和瀏覽器),這個指的是和瀏覽器進行打交道.js自己能夠和瀏覽器打交道,也就是操做瀏覽器,經過瀏覽器實現某些效果後端
5.js能夠操做html對象內的全部內容
6.js引入方式,直接在html中的<script>內寫,或者在引入js文件寫.
7.js中的語句以分號(;)爲結束符,也就是說和索引沒有關係
8.JavaScript語言基礎
(1)變量聲明
(2)JavaScript的數據類型:數值(Number)//字符串(String)[字符串的一些操做](重點)!!!!!//布爾值(Boolean)
JavaScript擁有動態類型(python也是動態的)
必定要多寫,多寫纔會明白,纔會清楚
(3)NaN,表示不是一個數字(Not a Number),也就是說是一個值,但不是數字
(4)字符串中的 .trim()屬性是獲得一個新值,移除空白
(5)後邊的項目主要是針對BOM和DOM的操做,也就是熟練前面的HTML+JS+CSS
(6)後邊的jquery用的比較多,可是這個也是很重要的.
(7)js中的數值類型,不區分整形和浮點型,就只有一種數字類型.
(8)null(空)和underfined(未定義)
(9)數組類型,對比python中的列表(重點concat鏈接//sort排序有點複雜//splice(三個參數,刪除並添加新元素),經常使用排序)
(10)for循環,循環的寫法==>數組經過索引取值
(11)對象(Object):JavaScript中的全部事物都是對象:字符串,數值,數組,函數...js容許自定義對象.
對象只是帶有屬性和方法的特殊數據類型.
數組:(重點)對比python中的列表
(12)注意:後邊項目中用的最多的仍是jquery和bootstrap.js基礎仍是用獲得的,js中BOM和DOM用的仍是比較少的
(13)
typeof null //"object" typeof undefined //"undefined" typeof NaN //"number"
(14)foreach() (等學到後面再說這個)
(15)splice()
(16)map() (後面再講)
(17)自定義對象
(18)類型查詢
(19)運算符
算術運算符
比較運算符
邏輯運算符
賦值運算符
(20)流程控制
if-else
if-else if-else #多條件
switch切換
for遍歷
while
三元運算
二.js函數:
1函數定義
2.
(1)普通函數定義
(2)帶參數的函數 //內置的arguments對象
(3)帶返回值的函數
(4)匿名函數方式,多和其餘函數配合使用,後邊會用到
(5)當即執行函數,頁面加載到這裏,這個函數就直接執行了,不須要被調用執行
(6)=>, 定義函數,能夠理解爲匿名函數,可是用的很少
(7)函數中的arguments參數(看一下就好了)
注意:函數只能返回一個值,若是返回多個值,只能講其放在數組或對象中返回
(8)函數的全局變量和局部變量和變量生存週期
(9)做用域:首先在函數內部查找變量,找不到則到外層函數查找,逐步找到最外層.
3.閉包:內層函數調用外層函數的變量
(10)詞法分析(深坑),把重點放在案例上,詞法分析的過程不太容易懂
(11)內置對象和方法(下圖初步分析)
(12)自定義對象
圖1
建立對象:
圖2
注意：
ES6中提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以當作鍵。
也就是說，Object結構提供了「字符串--值」的對應，Map結構提供了「值--值」的對應，是一種更完善的Hash結構實現。
map的使用:（map也是瞭解內容，有興趣的能夠研究一下）
(13)擴展:JavaScript面向對象之繼承:(目前做爲了解)
(14)Date對象:
A:建立Date對象
B:Date對象的方法:
(15)json對象,實現先後端交互
(16)RE模塊(RegExp對象),正則(內容不少,用到了再看),複習的時候再看
(17)Math對象,相似於python的內置函數
三.前端基礎之BOM和DOM
超哥blog:
https://www.cnblogs.com/clschao/articles/10092991.html
(1)window對象
(2)navigator對象(瞭解便可)
(3)location
test:
(4)彈出框
能夠再JavaScript中建立三種消息框:警告框,確認框,提示框.
alert是用來做爲彈出框的,可是這個不能在瀏覽器中寫,這個沒有什麼顯示效果,只有返回true
(5)計時器
test結果:
(6)DOM
1.查找標籤
直接查找
document.getElementById 根據ID獲取一個標籤 document.getElementsByClassName 根據class屬性獲取（能夠獲取多個元素，因此返回的是一個數組） document.getElementsByTagName 根據標籤名獲取標籤合集
代碼測試1:
獲取div標籤
(7)間接查找
(8)節點操做
建立節點(就是建立標籤)
添加節點
刪除節點
替換節點
屬性節點
var divEle = document.getElementById("d1") divEle.innerText #輸入這個指令，一執行就能獲取該標籤和內部全部標籤的文本內容 divEle.innerHTML #獲取的是該標籤內的全部內容，包括文本和標籤
attribute操做
獲取值操做
class操做提取css操做
test1:
test3:
test4:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>--> <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>--> <style> .d1{ color:red; } .d2{ color:blue; } </style> </head> <body> <div id="d1" class="d1 d2 d3 d4" xxx=""> hello world <div> Nihao </div> </div> <div> <input type="text" id="username"> </div> <script> </script> </body> </html>
2.事件onclick的兩種綁定方式
事件就是頁面上的動態效果,DOM就是修改標籤,使標籤動起來,捕獲這些效果.
onclick:左鍵點擊一下(好比這個搜索框)
test1結果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">提交</button> </body> </html>
綁定方法一:效果:點擊觸發改變顏色,這種方式不經常使用,由於這種方式沒有和html分割開.修改事件很差改
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="f1(this);">提交</button> <script> function f1(ths) { ths.style.color='red'; } </script> </body> </html>
綁定方法2:btn2 經常使用,徹底經過js綁定方式進行綁定
效果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="f1(this);">提交</button> <button id="btn2">確認</button> <script> function f1(ths) { ths.style.color='red'; } var btn2=document.getElementById('btn2'); btn2.onclick=function () { this.style.color='blue'; } </script> </body> </html>
測試三:
經過點擊提交,將下面寫的顏色改爲其餘顏色:
效果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="f1(this);">提交</button> <button id="btn2">確認</button> <div id="xxx">大海啊,全都是水</div> <script> function f1(ths) { ths.style.color='red'; var div1=document.getElementById('xxx'); div1.style.color='yellow'; } var btn2=document.getElementById('btn2'); btn2.onclick=function () { this.style.color='blue'; } </script> </body> </html>
擴展:每次點擊btn3,添加一句重複的話
(1)向標籤裏,添加標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>--> <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>--> <style> .c1{ background-color: green; } </style> </head> <body> <button id="btn" onclick="f1(this);"> 提交 </button> <button id="btn2"> 確認 </button> <button id="btn3"> 添加 </button> <div id="div2"> <!--<p>約嗎?今天情人節!</p>--> </div> <div id="xxx"> 大海啊,全是水 </div> <script> //事件綁定方式1 function f1(ths){ ths.style.color='red'; var div1 = document.getElementById('xxx'); div1.style.color = 'yellow'; } //事件綁定方式2 var btn2 = document.getElementById('btn2'); btn2.onclick = function () { this.style.color='blue'; } var btn3 = document.getElementById('btn3'); btn3.onclick = function () { var divELe = document.getElementById('div2'); var p1 = document.createElement('p'); //p1.classList.add('c1'); p1.innerText = '約嗎?今天情人節,我很孤單'; divELe.appendChild(p1); } </script> </body> </html>
不註釋倒數第三行;結果就是添加了類屬性
知識點:建立p標籤
3.onblur和onfocus事件
onfocus:目的,點擊輸入框,若是輸入框沒有字,顯示原來默認的字,若是輸入框有字,則不顯示,顯示輸入的字
onfocus 元素得到焦點。 // 練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="username" value="請輸入內容"> <script> var inpEle=document.getElementById('username'); inpEle.onfocus=function () { if (this.value === '請輸入內容') { this.value = ''; } }; inpEle.onblur=function () { console.log('>>>>>>',this.value.trim()); if(this.value.trim().length===0){ this.value='請輸入內容'; } } </script> </body> </html>
4.window.onload解釋
5.小米商城講解