ECMAscript 基礎語法
變量 數據類型 運算符 數組 函數 對象
BOM 瀏覽器對象模型
window對象（獲取瀏覽器寬高）
history對象
location對象
DOM 文檔對象模型 輪播圖
元素獲取 操作屬性 操作樣式 節點 事件 時間對象
作用：（運營在用戶端瀏覽器）
1. 數據驗證
2. 動態創建和刪除元素
3. 操作元素的內容和樣式
4. 模擬動畫
5. 創建cookie
6. ajax 請求數據
。。。。。。
7. JSON格式的數據處理 *
特征：面向對象
1. 基於[對象]和[事件驅動]的松散型 解釋型語言
2. 客戶端腳本語言，實現用戶交互
完成窗口與窗口之間的通信，window對象是其核心對象，
-
history【前進，后退，刷新】 是一個對象 使用【window.history】
-
location【地址】
-
DOM【】
-
screen【屏幕】
-
frames[真窗口]
-
navigation
window對象：
屬性
1-1：獲取瀏覽器寬高
a.ie8及以上
window.innerWidth [獲取瀏覽器寬度]
window.innerHeight [獲取瀏覽器高度]
b.ie8以下
document.documentElement.ClientWidth [寬度]
document.documentElement.ClientHeight 【高度】
1-2： 重新獲取瀏覽器寬高
window.onreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}
1-3：重新設置瀏覽器大小
window.onresize=function（）{
}
1-4：瀏覽器滾動事件
window.onscroll=function （）{
}
2.瀏覽器左上角距離屏幕左上角的偏移量
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
注意：
因為window是核心，可以省略window不寫
方法
alert() 彈出框
prompt() 輸入框
confirm() 提示框，返回true或flase
close() 關閉頁面
open(“url”) 打開頁面（“打開的頁面的路徑【根據本html位置的相對路徑】”）
open("url","","width=300,height=200");
setInterval（fn，毫秒數）：隔毫秒數重復不斷的執行一個函數fn
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
clearInterval（t）：清除setInterval的時間函數
let t =setInterval(fn,3000)
function fn(){
}
clearInterval（t）
setTimeout（fn，1000） 隔一定的時間只執行一次函數
cleanTimeout（t） 清除時間函數 【用法同上】
獲取表單的值
對象.value=
清空=“”
history對象
屬性：
history.length 用來顯示歷史記錄的長度
方法
history.forward() 前進
history.back()后退
history.go(0) 刷新 【1 前進，-1后退；不常用】
location對象
屬性：設計獲取當前頁面的地址
location.href=“ ” 設置或獲取頁面地址 設置新值
location.host：主機名+端口號
location.hostname：主機名
location.port：端口號
location.protocol：協議
location.pathname： 路徑
location.search： ？后面的查詢【搜索】字段
方法
location.reload( ) 重新加載
location.replace（"網頁.html"） 頁面替換，不會增加歷史記錄
location.assign（“網頁.html”） 頁面替換， 能夠增加歷史記錄
獲取元素
獲取body：document.body
獲取html：document.documentElement
1. 獲取id名的元素：
let 變量=document.getElementById("id名")
例子： let box=document.getElementById("id名")
2.獲取class名的元素[得到的是集合，可以通過鍵名訪問]
let 對象=document.getElementsByClassName（“class名”）
通過遍歷改變樣式
集合通過單個下表改變，不能全部用class名同時改變
3. 獲取標簽名的元素[得到的是集合，可以通過鍵名訪問]
let 對象=document.getElementsByTagName（“標簽名”）
4.給對象加類
標簽加1個類名
對象.className=“類名”
div加多個類名
對象.className=“類名1 類名2 ”
5.指定范圍的多層級獲取【集合】
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
多樓層獲取
let box=document.getElementClassName("box");
let box1=box.getElementClassName("box1");
let box2=box1.getElementClassName("box2")
6.獲取選擇器選中的元素
let liss=document.querySelector("【選擇器】"); 獲取選擇器選中的第一個元素
let lis=document.querySelectorAll("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標或者foreach遍歷】
7.屬性選擇器
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
操作樣式
獲取樣式
獲取行內樣式
對象.style.樣式名
獲取通用的樣式【css和行內】
getComputedStyle(對象,null).樣式名
設置行內樣式
對象.style.樣式名=“樣式值”
對象.style=“background：red；border-radius：50%”
批量操作類名
對象.className="class類名"
對象.className=“ ”；
對象.classList.add（“”） 添加類
對象.classList.remove（“”） 刪除類
對象.classList.toggle（“”） 切換類
對象.id="id名"
外部定義一個樣式，加到對象身上，參考第四點
操作屬性
操作標准屬性
已知的，系統自帶
對象.屬性
例子 ： img.src
自定義屬性
獲取
對象.getAttrbutte("name")
設置
對象.setAttrbutte("name","value")
操作內容
innerText：不能識別html的標簽對
innerHTML: 可以識別html的標簽對
對象.innerText=“內容”
對象.innerHTML=“內容”
添加事件
對象.對象事件=function（）{
}
元素的尺寸和位置
對象.offsetWidth:獲取元素的真實寬度
對象.offsetHeight:獲取元素的真實高度
對象.offsetTop：對象的上邊框距離具有定位的父元素的內邊框的垂直距離
對象.offsetLeft：對象的左邊框距離具有定位的父元素的內邊框的水平距離
對象.scrollTop：有滾動條的元素，瀏覽器滾動時在垂直方向的拉動距離
body的兼容
document.body.scrollTop || document.documentElement.scrollTop
對象.scrollLeft：有滾動條的元素，瀏覽器在滾動時在水平方向的拉動距離
動態創建標簽
let div=document.createElement（“標簽名”）
創建的元素放到也面中：
document.body.appendChild（div）
父元素.appendChild（子元素）
引入JS
1. 外部引入方式
<head>
<script src='路徑'></script>
</head>
2. 內部引入方式（在html頁面中放入srcipt標簽，和body同級）
<script>
</script>
3. 放在事件后
<div onclick="alert(1)">文字等或事件</div>
注意：
~js的幾種引入方式是相互關聯的，可以相互操作與訪問
~外部js中不能添加srcipt標簽對
~嵌入式的js中不能添加src屬性
引入js的執行
1. 將srcipt標簽對放最最后
2.在.js文檔中加入
window.onload=function（）{
需要執行的js代碼塊
}
輸出工具
彈出框：alter(' '); 數字可加可不加' ';
輸出到控制台：console.log('輸出到控制台');
輸出到html頁面中[可以識別html的標簽對，即解釋為html語言]：document.write('<h1>輸出到html頁面中 </h1>');
輸入工具
彈出框輸入：var num=prompt("提示文本",[默認值])；
提示工具
confirm("提示內容")；
confirm返回值為true和false
注釋
單行注釋： ctrl+？或者/ //
塊注釋： ctrl+shift+/或者？ /* 塊 */
拼接
1. 用“+”拼接
2. 模板字符串（es6）：
`<td>${i}-${j}</td>`; 拼接部分用``括起來，變量用 ${變量}
識別空格，換行等
變量
一個容器，存儲數據
變量的聲明：
var:
let:
let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在
let命令所在的代碼塊內有效
1. 適用於for循環
2. 先聲明，在使用
3. 不允許在相同作用域內重復聲明同一個變量。
4. let可以識別塊級作用域
5. 不存在變量提升（先訪問后聲明） 報錯：沒有定義
const
聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
聲明常量的
同時進行賦值，不賦值就會報錯可以識別塊級作用域
不能重復聲明
不存在變量提升【先訪問在聲明】
PI；
命名規范：
-
數字。字母。下划線組成
-
不能以數字開頭
-
區分大小寫
-
不能以關鍵字（js中已經用到的）命名
-
不能以保留字（js中將來會用到的）命名
-
有意義
-
遵循的規則：首字母大寫 （Array String Obiect） ；駝峰命名法 （getElementByld）
賦值
-
先聲明再賦值
var num;
num=10; -
聲明的同時賦值
var num=10; -
一次性聲明多個變量，再賦值
var a,b,c;
a=1,b=2;
c=3; -
一次性聲明多個變量同時復制
var a=1,b=2,c=3;
注意事項：
-
變量要先聲明再訪問，變量的默認值是undefined
-
新值可以覆蓋舊值
-
變量可以用var關鍵字重新聲明
-
不用var關鍵字聲明時必須給變量賦值，並且為全局變量，先訪問后聲明變量，值為undefined：js執行時先預解析（即識別var 和function聲明的變量，不賦值），在解析，一句一句執行。
數據類型
根據在內存中的存儲位置划分。基本數據類型存放在棧中，引用數據類型存放在堆中（指針存放在棧中，內容存放在堆中 ）
基本數據類型
-
undefined
-
null 【空占位符】
-
string 【也是對象】
模板字符串 字符編碼 ASCII utf-8 unicode【萬國碼】 gb2312
轉義字符： \ \n[換行] \r \t[制表符] \' \ ""
let 對象=new String（“ ”）；
編碼
對象.charCodeAt(2) 返回第2個位置的字符編碼
String.fromCharCode（字符編碼） 解碼
查找元素
對象.charAt(0) 字符串的第0個位置的元素【查找字符】
查找下標
對象.indexOf（“ ”） 查找對應字符的下標，如果有返回下標，如果沒有，返回-1【第一個字符開始的下標】
對象.lastIndexOf（“”） 倒着看查找，倒序看如果有返回下標，如果沒有，返回-1【第一個字符開始的下標】
對象.search（“”） 正則：有返回0；沒有返回-1；
對象.match（“”） 有的話，返回數組【返回值，下標，包含返回值的數組，】
沒有 返回null
字符串的截取：【返回新值，不改變原內容】
對象.substr（開始下標，【截取的長度】）
對象.substring（開始下標，結束的下標），從開始下標開始到結束下標之前，不取到結束的下標
對象.slice（開始下標，結束的下標），從開始下標開始到結束下標之前，不取到結束的下標【數組的方法】
字符串大小寫【轉換】
let str="AbCdEf";
str.toLowerCase() 轉換為小寫
str.toUpperCase() 轉換為大寫
替換：
str.replace（“山”，“閃”）；
轉換【字符串轉換數組】
let str=“1,2,3,4,5,6”；
arr2=str.split（“，”）； -
boolean
-
number 2e3=2*10^3
二進制： 0b開頭
八進制：以0o{0+字母o}開頭，后跟0-7的數
十六進制：以0x開頭，后跟0-9或者a-f
NaN:not a number 本來期望返回數值的操作，但並未返回數值的操作
引用數據類型
-
object（屬性與方法的集合）數組，函數，對象
-
深拷貝
let arr=【1,2,3,4】
let arr1；
arr1=arr； ：傳址
arr1 和 arr具有相同地址 -
淺拷貝：
let arr=【1,2,3,4】
let arr1=【】
arr.foreach(function（value）{
arr1.push（value）
})
判斷變量的數據類型 ，其結果為字符串
typeof用法：
var num="5555";
typeof num;
| 數據類型 | 值 | 情況 | typeof 的結果【看返回0 1代碼的前三位】 |
|---|---|---|---|
| undefined | undefined | undefined | |
| null | null（空占位符） | object | |
| boolean 布爾型 | true false | boolean | |
| string 字符串型 | 帶" "或者' ' | string | |
| number 數值型 | 整數，小數，八進制，十六進制，十進制 | ||
| object |
運算符
表達式：能夠求值的語句
算術運算符
+ - * / % ++var var++ --var var --
+的特殊性
計算：操作對象是數值型
拼接：操作對象含有字符串，字符串中進行運算時，用（）括起來
自增與自減
++var: ++在前，先算++，在執行本行的其他語句
var++：++在后，先執行本行的其他語句，在算++
關系運算符
返回值為布爾值 ，即true或者false
> < >= <= ==[等於] ===[全等於]--> 數值和數據類型相同 !=[不等於] !==[不全等]
如果比較的兩個對象都是字符串[數字型，字符]，按照ASCII表對應的ASCII碼比較，逐位相比
如果比較的兩個對象都是數值，直接比大小
如果一個操作對象是字符串，另一個是操作對象是數值，先嘗試將字符串轉換為數字，如果轉換成功，按照數字比較大小；如果轉換不成，則返回false
1==true； 0==false ； ==數值相同
=== 數值和數據類型相同
undefined=null
賦值運算符
= +=[num+=10 等價於 num=num+10] -= *= /= %=
邏輯運算符[與或非]
測量值與變量之間的邏輯關系
假：0、false undefined null NaN “ ”【空字符串】
真：其余為真
-
&&與
-
||或
-
！非【用來取反】
A B A && B A || B !A true true true true false true false false true false false true false true true false false false false true
返回值：
第一步：先看與或非兩邊的真假
第二步：在看返回的真假的內容
&& 同真為真，返回第一個假值 【遵循短路原則：看到假值，后邊的不看了】；全為真，返回最后一個真值
|| 同假為假，返回第一個真值 【遵循短路原則：看到真值，后邊的不看了】；全為假，返回最后一個假值
! 取反；返回值只有ture或false
運算符的優先級
算術>關系運算符>邏輯運算符
三元運算符：
表達式?為真的執行語句：為假的執行語句 【類似if else】
一元運算符： typeof + - new
特殊運算符： （） .
流程控制
代碼按照指定條件的執行順序
-
順序結構
-
分支結構
-
循環結構
順序結構
語句按照從上到下的順序進行執行
循環結構
當滿足條件時，重復不斷的執行一段代碼
for循環：明確知道次數
for(初始條件；終止條件；步進值){
}
swith循環
switch(表達式【能夠求值的語句】){
case 值1【表達式能取到的值】：語句1；break；
case 值2【表達式能取到的值】：語句2；break；
...
default: 語句；
}
while循環
while(條件){
滿足條件時，執行語句；
}
例子：
var j=0；
while(j<5){
console.log(1);
j++;
}
do while循環
執行順序先執行循環體，在執行判斷語句
do{
循環體；
}while(條件)
例子：
var i=0;
do{
console.log(1);
i++;
}(i<5)
循環結束
continue
滿足條件終止本次循環
break
滿足條件,終止整個循環
分支結構
當條件成立時執行相應的語句
-
單分支結構
if條件：
if（表達式）{
為真的執行語句【返回值為true執行的語句】
} -
雙分支
if條件：
if（表達式）{
為真的執行語句
}
else{
為假的執行語句
} -
多分支
if條件：
if（表達式1）{
表達式1成立時執行語句
}
else if(表達式2){
表達式1不成立 但 表達式2成立時執行語句
}
else if(表達式3){
表達式1不成立且表達式2不成立【但】表達式3成立時執行語句
}
else{
以上表達式都不成立時執行的語句
} -
嵌套分支
if(){
if(){
}
else{
}
}
else{
}
數學方法
取隨機數
Math.random() ; (0-1)
取整
向下取整【向左取整】： rgb=Math.floor(Math.random());
向上取整【向右取整】： rgb=Math.ceil(Math.random());
次冪[x的y次冪]
Math.pow(x,y)
一維數組
按照順序排列的一組相關數據。
特點：每一個數組元素都有一個特定的鍵名（即俗稱的下標）[字符串類型]
數組元素的默認值時undefined
數組的聲明[初始化數組]
-
先聲明后賦值
var arr=[];
arr[0]=89,arr[0]="adc",....; -
聲明的同時賦值
var arr=[90,89,88,76,56];
數組下標的范圍
訪問數組元素，范圍【0，n-1】
數組的長度
數組名.length; 例子： arr.length
注意：
數組的長度可變
arr=[90,89,88,76,56];
可以隨時添加元素，可跳着添加。如：
arr[6]="aaa"；
數組元素可以時任意的數據類型
arr=[true,null,{name:},[1,2,3]]
遍歷數組元素
訪問數組的每一個元素
1. 用for循環遍歷數組
for(var i=0;i<arr.length;i++){
arr.[i]; 即可訪問arr的每個元素
}
2. 用for in循環遍歷數組
for(var i in arr){
i; //代表arr的鍵名（下標）
arr[i]; //元素
}
3.for of遍歷元素
for（item of arr1）{
arr2.push（item）
}
4.foreach遍歷數組
用法：
arr.forEach(function (value，index){
}）
value[名字隨便起]:數組中的當前元素【必須有】
index[名字隨便起]:數組當前元素的下標【鍵名】【可選】
清空數組
arr.length=0
二維數組
聲明：
var arr=[[1,2.3],["a","b"],[78,89];
訪問：
arr[行][列]
遍歷
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j]
}
}
數組身上的方法
向數組的后面插入一個或多個元素（.push）
arr.push(需要插入的內容)；
刪除數組最后一位：.pop
arr.pop（）
在數組之前插入: .unshift
arr.unshift("")
在數組之前刪除一位：.shift
arr.shift（）
萬能的插入和刪除：.splice（）
arr.splice(開始的位置,長度，“再刪除的位置加入的元素1”，“再刪除的位置加入的元素2”，...);
不想刪除，讓其長度為0；
可以返回刪除的值：arr.splice（）
是否包含某個元素： .includes
arr.includes（“被包含的內容”）;
截取元素： .slice
arr.slice（2,5）：截取第2位開始的。第5位之前的
連接多個數組：.concat
arr.concat([數組1],[數組2])
數組的取反：.reverse
arr.reverse()
把數組轉換為字符串: .join
arr.join（“連接符（-/，/；/..）”）
排序：.sort
arr.sort（（x，y）=> x-y）; 升序
arr.sort（（x，y）=> y-x）; 降序
arr.sort(function（x，y）{
return x-y
})
查找： .find（）
arr.find(item=>item>7) 找到第一個比7大的數
arr.find(item=>item%2==0) 找第一個偶數
arr.find（function(item){
return item%2==0;
}）
查找第一個符合條件的下標： .findIndex（）
let index= arr.findIndex(function(item){
return item > top //返回布爾值，為真時返回下標
})
返回符合條件的真假值：.some()
arr.some（item=>item>8）;
返回每一個符合條件的元素：.every()
arr.every（item=>item<10）;
篩選符合條件的：.filter()
arr.filter（item=>item%2==0）; 返回新數組
遍歷數組（.forEach）
arr.forEach
用法：
arr.forEach(function (value，index){
}）
value[名字隨便起]:數組中的當前元素【必須有】
index[名字隨便起]:數組當前元素的下標【鍵名】【可選】
處理每個元素:.map
arr.map（item=>{return item*10}） //讓數組中的每個元素都執行一個函數，返回一個新數組
全部方法
| concat() | 連接兩個或更多的數組，並返回結果。 |
|---|---|
| copyWithin() | 從數組的指定位置拷貝元素到數組的另一個指定位置中。 |
| every() | 檢測數值元素的每個元素是否都符合條件。 |
| fill() | 使用一個固定值來填充數組。 |
| filter() | 檢測數值元素，並返回符合條件所有元素的數組。 |
| find() | 返回符合傳入測試（函數）條件的數組元素。 |
| findIndex() | 返回符合傳入測試（函數）條件的數組元素索引。 |
| forEach() | 數組每個元素都執行一次回調函數。 |
| indexOf() | 搜索數組中的元素，並返回它所在的位置。 |
| join() | 把數組的所有元素放入一個字符串。 |
| lastIndexOf() | 返回一個指定的字符串值最后出現的位置，在一個字符串中的指定位置從后向前搜索。 |
| map() | 通過指定函數處理數組的每個元素，並返回處理后的數組。 |
| pop() | 刪除數組的最后一個元素並返回刪除的元素。 |
| push() | 向數組的末尾添加一個或更多元素，並返回新的長度。 |
| reduce() | 將數組元素計算為一個值（從左到右）。 |
| reduceRight() | 將數組元素計算為一個值（從右到左）。 |
| reverse() | 反轉數組的元素順序。 |
| shift() | 刪除並返回數組的第一個元素。 |
| slice() | 選取數組的的一部分，並返回一個新數組。 |
| some() | 檢測數組元素中是否有元素符合指定條件。 |
| sort() | 對數組的元素進行排序。 |
| splice() | 從數組中添加或刪除元素。 |
| toString() | 把數組轉換為字符串，並返回結果。 |
| unshift() | 向數組的開頭添加一個或更多元素，並返回新的長度。 |
| valueOf() | 返回數組對象的原始值。 |
函數
把實現某一特定功能的代碼塊封裝起來，並能夠重復調用
定義函數
1. 基本語法（function關鍵字）【調用可以在聲明前，也可以在聲明后】
function 函數名（形參1，形參2,....）{
函數體；
return 返回值；【可有可無】 《並不向用戶顯示，僅是調用的數的值》
}
2. 字面量，自變量【必須先聲明在調用】【預解析】
var 變量=function (參數){
函數體；
}
調用 變量（）
3. 對象的方式【實例化對象】
let aa=new Function（“a”，“b”，“alter（a+b）”）
調用 aa（10,20）
匿名函數定義與調用
(function (){
})()
定義：(function (){
}
調用【一般在定義的時候就調用】：
(function (){
})()
箭頭函數
定義：
let aa=()=>console.log(123);
let aa=(參數)=>{
多行函數體；
}
調用：
aa(實參)
函數的調用
1. 函數名（實參1，實參2，….）
2. 自變量（）
3.自變量（參數1，參數2）
參數
能夠動態改變函數體的變量，使函數更加靈活
形參：
定義函數使寫在括號里的量。其作用為接收實參
形參默認值的傳遞
1. if else分支結構
if(flag==undefined){
}
else{
}
2. 三元運算符【用的多】
flag=flag==underfined？"<":flag
3. 邏輯或||返回第一個真值【用的多】
flag=flag||"<"
4. 定義形參的時候直接賦值:當形參為undefined時給形參默認值
flag=25555;
實參：
函數調用時寫在括號中的值。其作用為給形參傳值
全部的實參由arguments接收
參數傳遞
-
參數可以是任意的數據類型
-
參數的傳遞按順序傳遞：從左到右
-
形參=實參 ：一一對應的傳遞
-
形參>實參：多余的形參賦值為undefined
-
形參<實參：實參由
arguments對象來接收
剩余參數
聲明： ...rest【為數組】
function 函數名(形參1,...rest){
函數體；
}
rest和arguments對象的區別
1. rest接收多余的參數，arguments接收全部的實參
2. rest是數組，能夠使用數組的方法，鍵名從0開始；
arguments對象類似數組，不能使用數組的方法
函數的返回值：return
return 終止函數。遇到return，后面都不執行
返回值可以是任意的數據類型
一個函數內部可以有多條return分支語句，但最終只執行一條return語句
只能返回一個值
回調函數
把一個函數的指針（函數名）作為參數傳遞給另一個函數，當指針調用函數時，這個函數叫做回調函數【高階函數】：形參高階函數和 返回值高階函數
指針類型
function math(num1,num2,callback) {
return callback(num1,num2);
}
function add(num1,num2) {
return num1+num2;
}
function sub(num1,num2) {
return num1-num2;
}
function mult(num1,num2) {
return num1*num2;
}
function div(num1,num2) {
return num1/num2;
}
document.write(math(1,2,div));
函數類型
foreach
arguments對象
用來接收參數的詳細信息
每聲明一個函數，在其內部自動生成arguments對象
arguments對象只在函數內部起作用
不是數組類似數組，可以用鍵名遍歷數組（arguments[i]），其長度為arguments.length
不能用數組身上的方法
閉包函數
內部的函數調用外部的函數的【變量】;
function fn1(){
let a="456";
function fn2(){
console.log(a)
}
return fn2;
}
let fn2=fn1();
fn2()
// js中沒有函數的重載：傳的參數不同，執行不同的函數
作用域
變量起作用的范圍
局部作用域優先於全局作用域[作用域鏈]
-
全局作用域
1. 在整個js中都能訪問的變量，凡是進行修改，變量的值就會改變
2. 類型【情況】
在函數外部用var聲明的變量，即擁有全局作用域
不用var聲明，但是賦值的變量就是全局變量，即擁有全局作用域； -
局部作用域
類型【情況】
形參是局部變量，即擁有局部作用域
在函數內部用var關鍵字聲明的變量，也是局部變量，即擁有局部的作用域。 -
塊級作用域
{
括起來的就是塊級作用域；
}
內置頂層函數
內置：ECMAscript自帶的函數，本身就有；只要求知道如何讓使用，不用關心如何封裝
頂層：在js代碼中的任何位置都可以使用；
escape()：將傳進來的字符串進行編碼
escape("編碼的內容"); 編碼內容一般為中文
unescape（）：對編碼的字符串進行解碼
unescape("字符串的編碼")
Boolean（）：將其余數據類型轉換為布爾型
String（）：將任意數據類型轉換為字符串型
Number（）：將其余數據類型轉換為數值型
情況
1. null：0 “”：0 “ ”：0
2. false：0 true：1
3. undefined：NaN
4. 進制數轉換為十進制
5. 去掉沒有意義的后導0和前導0
6. 字符串： 規范的浮點數，數值型字符串
parseInt（）：將字符串轉換為整數
第一個位置為字母 （+、-）號 空格
轉換不成功，轉換為NaN
parseFloat（）：將字符串轉換為小數
只能轉換規范的浮點數
轉換不成功，返回NaN
isNaN():值是否夠轉換為數值型
能轉換為數值型返回false
不能轉換為數值型返回true
作用：數據類型轉換
強制類型轉換
隱式數據類型轉換：算數運算符，邏輯運算符，條件語句（if，while等）
對象 類
概念
類：一群具有相同特征的對象集合的描述
對象：具體存在的類個體
屬性：對象基礎信息的描述
方法：對象功能的描述
定義對象
構造函數（類）,實例化對象
1. 構造類
function 類名（color，price等其他形參）{
this.color=color；
this.price=price； //實例化時，this指向實例化的對象
this.play=function（）{
}
}
2. 實例化對象
let 對象=new 類名(實參);
3. 對象的屬性【對象屬性的添加】
對象.屬性名=“屬性值”； 訪問：對象.屬性名 / 對象【‘屬性名’】
4. 對象的方法【對象方法的添加】【方法是特殊的屬性】
對象.方法名=function（）{}； 訪問：對象.方法名（）
5. 遍歷【i代表的是屬性名】
for（let i in 對象）{
i；//屬性名，方法
對象【i】；//屬性值
}
6. 對象屬性的增刪改查：
增加： 對象.屬性名=“屬性值”；
刪除： delete 對象.屬性名
修改： 對象.屬性名=“屬性值”
查訊： 對象.屬性名 ； 對象【‘屬性名’】
JSON [注意格式] 【可直接定義對象】
1.定義
let 對象={
屬性名：屬性值， //屬性名可以加引號，也可以不加引號
屬性名：屬性值，
方法名：function（）{
}，
方法名：function（）{
}
}
2.增刪改查
增加： 對象.屬性名=“屬性值”；
刪除： delete 對象.屬性名
修改： 對象.屬性名=“屬性值”
查找： 對象.屬性名 ； 對象【‘屬性名’】
3.遍歷
for（let i in 對象）{
i；//屬性名，方法
對象【i】；//屬性值
}
4.對象.constructor 返回 object
class定義類，實例化對象
重要的關鍵字[方法]
constructor： 返回該對象的構造函數
使用： 對象.constructor
instanceof：判斷函數是否為對象的構造函數？true：false；
使用 : 對象 instanceof 構造函數
原型，原型鏈
最大的類：object:[prototype proto]
生成人類：person：【proto prototype】 proto繼承父類的prototype
生成對象：xb【proto，prototype】 proto繼承人類的prototype
sing改變函數的指針
sing.call（xb，10,20）
sing.apply（sb，【10,20】）
sing.
將小白的say方法傳給小紅
say=xh.say
say.call（xh）
遞歸
函數自己調用自己,必須有一個 出口
function fn（num）{
if（num==0）{
return 1;
}
else{
return num*fn(num-1)
}
}
function fnn(arr){
let arr1=[]
for(let i=0;i<arr.length;i++){
if(typeof arr[i]=="object"){
arr1.push(fnn(arr[i]))
}
else{
arr1.push(arr[i])
}
}
return arr1;
}
console.log(fnn([0,[1,2],[2,3]]))
節點：
整個文檔 元素【標簽】 屬性 文本 注釋【節點】
文檔的節點
document.nodeName #document
document.nodeValue null
document.nodeType 9
元素的節點
let box=documentquerySelector("box")
box.nodeName 大寫的標簽名
box.nodeValue null
box.nodeType 1
| 節點 | nodeName（名字） | nodeValue（值） | nodeType（節點類型） |
|---|---|---|---|
| 文檔節點 | #document | null | 9 |
| 元素節點 | 大寫的標簽名 | null | 1 |
| 屬性節點 | 大寫的屬性名 | 屬性值 | 2 |
| 文本節點 | #text | 文本 | 3 |
| 注釋節點 | #comment | 注釋內容 | 8 |
節點的獲取
1.childNodes：子節點
document.childNodes[1].childNodes
2.parendNode：父節點
let box=document.querySelector("box") ;
3.上一個兄弟節點：previousSibling
box.previousSibling
3.下一個兄弟節點：nextSibling
box.nextSibling
4.上一個兄弟元素節點：previousElementSibling
box.previousElementSibling
5.下一個兄弟元素節點：nextElementSibling
box.nextElementSibling
節點的方法
創建元素節點
let div=document.createElement("div")
在最后插入節點
let box=document.querySelector（“.box”）；
box.appendChild（div）
在之前插入節點.insertBefore(要插入的元素，插入位置之后的元素)
let span=document.querySelector("span")
box.insertBefore(span,div)
創建文本節點
let text=document.createTextNode（"必須有參數"）
text.nodeValue=“這是span標簽”
span.appendChild(text)
創建注釋節點
let comment1=document.createComment（“這是注釋節點”）;
box.appendChild(comment1);
創建屬性節點
let attr=document.createAttribute("id");
添加/設置屬性節點
.setAttribute("name","value");//添加屬性
box.setAttributeNode（attr）
添加：append 刪除：remove
刪除標簽節點 ： box.removeChild(div)
刪除屬性節點： box.removeChild(“屬性名”)
DOM（文檔對象模型）document object model
獲取元素
獲取body：document.body
獲取html：document.documentElement
Dom對象
1. 獲取id名的元素：
let 變量=document.getElementById("id名")
例子： let box=document.getElementById("id名")
2.獲取class名的元素[得到的是集合，可以通過鍵名訪問]
let 對象=document.getElementsByClassName（“class名”）
通過遍歷改變樣式
集合通過單個下表改變，不能全部用class名同時改變
3. 獲取標簽名的元素[得到的是集合，可以通過鍵名訪問]
let 對象=document.getElementsByTagName（“標簽名”）
4.給對象加類
標簽加1個類名
對象.className=“類名”
div加多個類名
對象.className=“類名1 類名2 ”
5.指定范圍的多層級獲取【集合】
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
多樓層獲取
let box=document.getElementClassName("box");
let box1=box.getElementClassName("box1");
let box2=box1.getElementClassName("box2")
6.獲取選擇器選中的元素
let liss=document.querySelector("【選擇器】"); 獲取選擇器選中的第一個元素
let lis=document.querySelectorAll("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標或者foreach遍歷】
7.屬性選擇器
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
操作樣式
獲取樣式
獲取行內樣式
對象.style.樣式名
獲取通用的樣式【css和行內】
getComputedStyle(對象,null).樣式名
設置行內樣式
對象.style.樣式名=“樣式值”
對象.style=“background：red；border-radius：50%”
批量操作類名
對象.className="class類名"
對象.className=“ ”；
對象.classList.add（“”） 添加類
對象.classList.remove（“”） 刪除類
對象.classList.toggle（“”） 切換類
對象.id="id名"
外部定義一個樣式，加到對象身上，參考第四點
操作屬性
操作標准屬性
已知的，系統自帶
對象.屬性
例子 ： img.src
自定義屬性
獲取
對象.getAttrbutte("name")
設置
對象.setAttrbutte("name","value")
操作內容
innerText：不能識別html的標簽對
innerHTML: 可以識別html的標簽對
對象.innerText=“內容”
對象.innerHTML=“內容”
添加事件
對象.對象事件=function（）{
}
元素的尺寸和位置
對象.offsetWidth:獲取元素的真實寬度
對象.offsetHeight:獲取元素的真實高度
對象.offsetTop：對象的上邊框距離具有定位的父元素的內邊框的垂直距離
對象.offsetLeft：對象的左邊框距離具有定位的父元素的內邊框的水平距離
對象.scrollTop：有滾動條的元素，瀏覽器滾動時在垂直方向的拉動距離
body的兼容
document.body.scrollTop || document.documentElement.scrollTop
對象.scrollLeft：有滾動條的元素，瀏覽器在滾動時在水平方向的拉動距離
動態創建標簽
let div=document.createElement（“標簽名”）
創建的元素放到也面中：
document.body.appendChild（div）
父元素.appendChild（子元素）
BOM： 瀏覽器對象模型
完成窗口與窗口之間的通信，window對象是其核心對象，
-
history【前進，后退，刷新】 是一個對象 使用【window.history】
-
location【地址】
-
DOM【】
-
screen【屏幕】
-
frames[真窗口]
-
navigation
window對象：
屬性
1-1：獲取瀏覽器寬高
a.ie8及以上
window.innerWidth [獲取瀏覽器寬度]
window.innerHeight [獲取瀏覽器高度]
b.ie8以下
document.documentElement.ClientWidth [寬度]
document.documentElement.ClientHeight 【高度】
1-2： 重新獲取瀏覽器寬高
window.onreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}
1-3：重新設置瀏覽器大小
window.onresize=function（）{
}
1-4：瀏覽器滾動事件
window.onscroll=function （）{
}
2.瀏覽器左上角距離屏幕左上角的偏移量
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
注意：
因為window是核心，可以省略window不寫
方法
alert() 彈出框
prompt() 輸入框
confirm() 提示框，返回true或flase
close() 關閉頁面
open(“url”) 打開頁面（“打開的頁面的路徑【根據本html位置的相對路徑】”）
open("url","","width=300,height=200");
setInterval（fn，毫秒數）：隔毫秒數重復不斷的執行一個函數fn
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
clearInterval（t）：清除setInterval的時間函數
let t =setInterval(fn,3000)
function fn(){
}
clearInterval（t）
setTimeout（fn，1000） 隔一定的時間只執行一次函數
cleanTimeout（t） 清除時間函數 【用法同上】
獲取表單的值
對象.value=
清空=“”
history對象
屬性：
history.length 用來顯示歷史記錄的長度
方法
history.forward() 前進
history.back()后退
history.go(0) 刷新 【1 前進，-1后退；不常用】
location對象
屬性：設計獲取當前頁面的地址
location.href=“ ” 設置或獲取頁面地址 設置新值
location.host：主機名+端口號
location.hostname：主機名
location.port：端口號
location.protocol：協議
location.pathname： 路徑
location.search： ？后面的查詢【搜索】字段
方法
location.reload( ) 重新加載
location.replace（"網頁.html"） 頁面替換，不會增加歷史記錄
location.assign（“網頁.html”） 頁面替換， 能夠增加歷史記錄
事件
事件的添加方式
節點.onclick=function（e）{
}
只能添加一個
節點.addEventListener("事件【click】",事件處理程序，事件類型【布爾值】【可以不給】)
可以添加多個事件
將事件加在元素身上， 在js中定義事件的函數
<body>
<div class="son" onclick="事件函數（）"></div>
</body>
<script>
function 事件函數（）{
函數體
}
</script>
事件的構成
事件源：誰去觸發事件誰就是事件源
事件：鼠標事件/鍵盤事件
事件處理程序：
常用的web端事件
onclick：單擊
ondblclick：雙擊
onmousedown：按下
onmouseup：抬起
onmousemove：鼠標移動
onmouseover：移入
onmouseout：移出
onmouseenter：移入
onmouseleave：移出
oncontextmenu：右擊事件【默認事件】
對象.oncontextmenu=function(e){
e.preventDefault() //阻止瀏覽器默認右擊行為
}
onmousewheel 滾輪滾動事件
移動端事件
ontouchstart：按下
ontouchmove：移動
ontouchend：抬起
事件對象：
用來保存事件觸發時的信息
w3c ： 在事件處理程序的形參中
ie ： 在window.event中
解決兼容性：let event=e || window.event
鼠標事件對象常用的屬性：
clientX : 距離瀏覽器 X軸 的偏移量 【client設備】
clientY：距離瀏覽器 Y 軸 的偏移量
從 瀏覽器的 哪個位置進來
offsetX：距離事件源 X軸 的偏移量
offsetY：距離事件源 Y軸 的偏移量
從 事件源的 哪個位置進來
screenX：距離屏幕 X軸 的偏移量
screenY：距離屏幕 Y軸 的偏移量
從 屏幕的 哪個位置進來
鍵盤事件
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
onkeypress鍵盤按下：按下功能鍵ctrl shift alt delete esc等不會觸發
鍵盤事件對象常用的屬性
keyCode：鍵盤碼
ctrlKey：是否按下了ctrl
shiftKey：是否按下了shift
altKey：是否按下了alt
key：鍵名
表單事件
oninput：輸入事件
onchange：內容發生改變，並且失去焦點
onblur：失去焦點
onfocus：獲得焦點
onsubmit：提交表單
onselect：文本選中
窗口事件
onscroll：滾動事件
onload：加載
onresize：重新獲取瀏覽器大小
事件流
當觸發一個事件時，由這個事件的容器到整個文檔都會按照特定的順序依次進行觸發
順序：子元素 -》 父元素 【具體的到不具體的】
事件分類
捕獲型事件：true【大到小，不具體的事件源到具體的事件源】
冒泡型事件：false【小到大，具體的事件源到不具體的事件源】
瀏覽器執行事件的順序：doc的捕獲 html的捕獲 body的捕獲 具體元素的捕獲 具體元素的冒泡 body的冒 泡html的冒泡 doc的冒泡
阻止事件流
w3c瀏覽器
box.addeventListener（“click”，function（event）{
let event=event|| window.event
event.stopPropagation（）
},false）
ie瀏覽器
box.addeventListener（“click”，function（event）{
let event=event|| window.event
event.stopPropagation（）
event.returnValue=true；
},false）
事件委派
event.target：目標事件源【記錄】獲取到的是元素/屬性：類型：節點；點誰獲取到誰
ｅｖｅｎｔ．ｔａｒｇｅｔ．ｃｌａｓｓＮａｍｅ 事件源的類名
正則
定義
用來描述或者匹配一系列符合某種規則的字符串，規則可以自己定義
作用
-
數據驗證
-
內容檢索
-
內容替換
-
內容過濾
正則對象
創建正則對象
實例化對象
let reg = new RegExp("正則表達式[即規則]"，"模式修正符")
必須傳入字符串
自變量，字面量
let reg=/正則表達式/模式修正符 ； (//代表定界符)
正則對象常用的方法
test（str） 檢測正則對象是否能夠匹配str ， 返回值 true || false
exec( str ) 檢測正則對象是否能夠匹配str，如果能夠匹配，返回一個擁有特殊屬性的數組，如果不能匹配，返回null
let reg = new RegExp("uek","gi");
let bool=reg.test("www.sxuek.com"); //bool=true
正則表達式
原子
原子：正則表達式最小的內容【只能匹配一位】
\d 匹配 0-9 ;
\D 匹配：除了0-9意外的字符
\w 匹配：數字、字母、下划線
\W 匹配：除了數字字母下划線以外的字符
\s 匹配：空白 \n換行 \r回車 \t 制表符
\S 匹配：除了空白以外的字符
\b 單詞的邊界
\B 非單詞邊界
let str=“abc1”
let reg=/\w/g;
reg.test(str)
原子表【只匹配一個】
定義： [ ]
匹配a-c
let str=“abcdef1”
let reg=/[a-c]/g;
reg.test(str)
匹配 [a-z] 匹配a-z
匹配 [a-zA-Z] 匹配a-z和A-Z
匹配 [a-zA-Z0-9] 匹配a-z和A-Z和0-9
匹配 [a-zA-Z\s] 匹配a-z和A-Z和空格
元字符
. 代表所有的字符
| 或者
原子組
相當於變量默認保存在內存中；可以使用\1 \2等方式依次引用（）中的內容
（？： ）可以使原子組不在內存中存儲，不可以調用
let str1="山西優逸客"
let str2="陝西優逸客"
let reg=/(山西|陝西)優逸客/g；
reg.exec(str1)
let str="<div>hello</div>"
let reg=/<(div)>hello<\/\1>/g
reg.exec(str);
let str="<div>div</div>" //沒有變量名
let reg=/<(div)>\1<\/\1>/g
reg.exec(str);
let str="<div>山西優逸客-山西</div>"
let reg=/<(div)>(山西|陝西)優逸客-\2<\/\1>/g
let reg=/<(div)>(?:山西|陝西)優逸客-\2<\/\1>/g \2不會被引用
數量[手機號/身份證號]
* 0個或者多個 》=0 貪婪
let phone="18335219360";
let reg=/\d*/g
reg.exec(phone)
+ 1個或者多個 》=1
？ 0個或者一個 吝嗇
{11}限制長度為11
{15，18} 長度為 15-18
{6，} 長度為6以及以上
貪婪吝嗇 +？ 變成吝嗇
*?
+?
{11，}？
{11,20}？
邊界判斷【限制長度】
^ 以...開始
$ 以...結束
let reg=/^(0351)-\d{7}$/
let str1="hello word"
let reg=/o\b/
模式修正符
可以搭配使用 gi mi mg 先后順序執行
g 全局 global
記錄下標，下一個下標位置開始
i 不區分大小寫
m 可以換行
正則的使用場所
-
正則對象
-
str對象 中的 str.split（正則對象） 拆分
let str="山西有一棵：1,2.3"
str.split(/[: , .]/) -
str對象 中的 str.replace（正則對象） 替換
let str="山西有課山西有了"
str.replace（/（山西）/g，陝西） -
str對象 中的 str.search（正則對象） 查找
let str="山西有課山西有了"
str.search（/（山西|有一顆）/）
常用的正則
用戶名 /^[a-z0-9_-]{3,16}$/
密碼 /^[a-z0-9_-]{6,18}$/
十六進制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
電子郵箱 /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
URL /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
IP 地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
HTML 標簽 /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
刪除代碼\\注釋 (?<!http:|\S)//.*$
Unicode編碼中的漢字范圍 /^[\u2E80-\u9FFF]+$/
日期對象/函數
自定義時間
let ay=new Date("2018/8/8 12:00:00")
let ay1=new Date("12:00:00 2018/8/8")
let ay2=new Date("2018,0,8") //月份從0開始
獲取當前格林尼治時間
let now=new Date() //獲取當前格林尼治時間
now.setFullYear(2020) 設置年份
now.setMonth(5) 6月份
now.setDate(26) 26號
now.setHours（12） 12時
now.setMinutes(0) 分
now.setSeconds（0） 秒
now.setMilliseconds（0） 毫秒
獲取世界協調時間【用法同上】
now.setUTCFullYear()
now.setUTCMonth（）
now.setUTCDate（）
now.setUTCHours（12） 12時
now.setUTCMinutes(0) 分
now.setUTCSeconds（0） 秒
now.setUTCMilliseconds（0） 毫秒
//獲取時間
now.getFullYear() //now.getUTCFullYear()
now.getMonth（）+1
now.getDate（）
now.getDay() 星期
now.getHours()
now.getMinutes()
now.getSeconds()
now.getMilliseconds（0）
//獲取毫秒數
now.getTime() 1970.1.1.0的毫秒數
時間案例
倒計時
jishi()
setInterval(jishi,2000);
function jishi(){
let arr=daoJiShi();
span9.forEach(function (value,index) {
value.innerText=arr[index];
})
}
function daoJiShi() {
let arr=[];
let now=new Date();
let future=new Date(2018,6,26,18);
let times=future.getTime(); //未來的毫秒數
let time=now.getTime();//現在的毫秒數
let juXianZai=Math.floor((times-time)/1000); //2018.9.1到現在時間的秒數
let Month=Math.floor(juXianZai/(30*24*60*60));
arr.push(Month);
juXianZai=juXianZai%(30*24*60*60);
let Day=Math.floor(juXianZai/(24*60*60));
arr.push(Day);
juXianZai=juXianZai%(24*60*60);
let shi=Math.floor(juXianZai/(60*60));
if(shi>0 & shi<9){
shi="0"+shi;
}
arr.push(shi);
juXianZai=juXianZai%(60*60);
let fen=Math.floor(juXianZai/(60));
if(fen>0 & fen<9){
fen ="0"+fen;
}
arr.push(fen);
let miao=Math.floor(juXianZai%60);
if(miao>0 & miao<9){
miao="0"+miao;
}
arr.push(miao);
return arr;
}
}
輪播圖
雙下標
window.onload=function () {
let Box1=document.querySelectorAll("div.box .box1"); //5個小盒子盒子
let box=document.querySelector("div.box"); //大盒子
let Width=parseInt(getComputedStyle(box,null).width); //小盒子的寬度
let Left=document.querySelector("div.box .left"); //左右兩個盒子
let Right=document.querySelector("div.box .right");
let circle=document.querySelector("div.box .circle"); //小圓圈
let Son=document.querySelectorAll("div.box .circle .son");//小點
console.log(Box1,Width,Left,Right,Son);
let now=0;
let next=0;
flag=true;
let t=setInterval(move2,2000);
//右向左
function move2() {
next++;
if(next==Box1.length){
next=0;
}
// 就緒
Son[next].classList.add("son1");
Son[now].classList.remove("son1");
Box1[next].style.left=Width+"px";
//動畫
animate(Box1[next],{left:0});
animate(Box1[now],{left:-Width},function () {
flag=true;
});
now=next;
}
//左向右
function move3() {
next--;
if(next<0){
next=Box1.length-1;
}
//就緒
Box1[next].style.left=-Width+"px";
Son[next].classList.add("son1");
Son[now].classList.remove("son1");
//動畫
animate(Box1[next],{left:0});
animate(Box1[now],{left:Width},function () {
flag=true;
});
now=next;
}
box.onmouseenter=function () {
clearInterval(t);
}
box.onmouseleave=function () {
t=setInterval(move2,2000)
}
Left.onclick=function () {
if(flag==false){
return;
}
if(next==0){
return;
}
flag=false;
move3();
}
Right.onclick=function () {
if(flag==false){
return;
}
if(next==Box1.length-1){
return;
}
flag=false;