ECMAscript 基礎(chǔ)語法
變量 數(shù)據(jù)類型 運(yùn)算符 數(shù)組 函數(shù) 對象
BOM 瀏覽器對象模型
window對象（獲取瀏覽器寬高）
history對象
location對象
DOM 文檔對象模型 輪播圖
元素獲取 操作屬性 操作樣式 節(jié)點(diǎn) 事件 時間對象
作用：（運(yùn)營在用戶端瀏覽器）
1. 數(shù)據(jù)驗(yàn)證
2. 動態(tài)創(chuàng)建和刪除元素
3. 操作元素的內(nèi)容和樣式
4. 模擬動畫
5. 創(chuàng)建cookie
6. ajax 請求數(shù)據(jù)
邀桑。什猖。。。粱檀。伙菊。
7. JSON格式的數(shù)據(jù)處理 *
特征：面向?qū)ο?/p>
1. 基于[對象]和[事件驅(qū)動]的松散型 解釋型語言
2. 客戶端腳本語言，實(shí)現(xiàn)用戶交互
BOM： 瀏覽器對象模型
完成窗口與窗口之間的通信蛀恩，window對象是其核心對象疫铜，
?history【前進(jìn)，后退双谆，刷新】 是一個對象 使用【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：重新設(shè)置瀏覽器大小
window.onresize=function（）{
}
1-4：瀏覽器滾動事件
window.onscroll=function （）{
}
2.瀏覽器左上角距離屏幕左上角的偏移量
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
注意：
因?yàn)閣indow是核心壳咕，可以省略window不寫
方法
alert() 彈出框
prompt() 輸入框
confirm() 提示框席揽，返回true或flase
close() 關(guān)閉頁面
open(“url”) 打開頁面（“打開的頁面的路徑【根據(jù)本html位置的相對路徑】”）
open("url","","width=300,height=200");
setInterval（fn，毫秒數(shù)）：隔毫秒數(shù)重復(fù)不斷的執(zhí)行一個函數(shù)fn
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
clearInterval（t）：清除setInterval的時間函數(shù)
let t =setInterval(fn,3000)
function fn(){
}
clearInterval（t）
setTimeout（fn谓厘，1000） 隔一定的時間只執(zhí)行一次函數(shù)
cleanTimeout（t） 清除時間函數(shù) 【用法同上】
獲取表單的值
對象.value=
清空=“”
history對象
屬性：
history.length 用來顯示歷史記錄的長度
方法
history.forward() 前進(jìn)
history.back()后退
history.go(0) 刷新 【1 前進(jìn)幌羞，-1后退；不常用】
location對象
屬性：設(shè)計獲取當(dāng)前頁面的地址
location.href=“ ” 設(shè)置或獲取頁面地址 設(shè)置新值
location.host：主機(jī)名+端口號
location.hostname：主機(jī)名
location.port：端口號
location.protocol：協(xié)議
location.pathname： 路徑
location.search： 竟稳？后面的查詢【搜索】字段
方法
location.reload( ) 重新加載
location.replace（"網(wǎng)頁.html"） 頁面替換属桦，不會增加歷史記錄
location.assign（“網(wǎng)頁.html”） 頁面替換， 能夠增加歷史記錄
DOM（文檔對象模型）document object model
獲取元素
獲取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. 獲取標(biāo)簽名的元素[得到的是集合，可以通過鍵名訪問]
let 對象=document.getElementsByTagName（“標(biāo)簽名”）
4.給對象加類
標(biāo)簽加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("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標(biāo)或者foreach遍歷】
7.屬性選擇器
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
操作樣式
獲取樣式
獲取行內(nèi)樣式
對象.style.樣式名
獲取通用的樣式【css和行內(nèi)】
getComputedStyle(對象,null).樣式名
設(shè)置行內(nèi)樣式
對象.style.樣式名=“樣式值”
對象.style=“background：red讲逛；border-radius：50%”
批量操作類名
對象.className="class類名"
對象.className=“ ”亏吝；
對象.classList.add（“”） 添加類
對象.classList.remove（“”） 刪除類
對象.classList.toggle（“”） 切換類
對象.id="id名"
外部定義一個樣式，加到對象身上盏混，參考第四點(diǎn)
操作屬性
操作標(biāo)準(zhǔn)屬性
已知的蔚鸥，系統(tǒng)自帶
對象.屬性
例子 ： img.src
自定義屬性
獲取
對象.getAttrbutte("name")
設(shè)置
對象.setAttrbutte("name","value")
操作內(nèi)容
innerText：不能識別html的標(biāo)簽對
innerHTML: 可以識別html的標(biāo)簽對
對象.innerText=“內(nèi)容”
對象.innerHTML=“內(nèi)容”
添加事件
對象.對象事件=function（）{
}
元素的尺寸和位置
對象.offsetWidth:獲取元素的真實(shí)寬度
對象.offsetHeight:獲取元素的真實(shí)高度
對象.offsetTop：對象的上邊框距離具有定位的父元素的內(nèi)邊框的垂直距離
對象.offsetLeft：對象的左邊框距離具有定位的父元素的內(nèi)邊框的水平距離
對象.scrollTop：有滾動條的元素，瀏覽器滾動時在垂直方向的拉動距離
body的兼容
document.body.scrollTop || document.documentElement.scrollTop
對象.scrollLeft：有滾動條的元素许赃，瀏覽器在滾動時在水平方向的拉動距離
動態(tài)創(chuàng)建標(biāo)簽
let div=document.createElement（“標(biāo)簽名”）
創(chuàng)建的元素放到也面中：
document.body.appendChild（div）
父元素.appendChild（子元素）
引入JS
1. 外部引入方式
<head>
<script src='路徑'></script>
</head>
2. 內(nèi)部引入方式（在html頁面中放入srcipt標(biāo)簽止喷，和body同級）
<script>
</script>
3. 放在事件后
<div onclick="alert(1)">文字等或事件</div>
注意：
~js的幾種引入方式是相互關(guān)聯(lián)的，可以相互操作與訪問
~外部js中不能添加srcipt標(biāo)簽對
~嵌入式的js中不能添加src屬性
引入js的執(zhí)行
1. 將srcipt標(biāo)簽對放最最后
2.在.js文檔中加入
window.onload=function（）{
需要執(zhí)行的js代碼塊
}
輸出工具
彈出框：alter(' '); 數(shù)字可加可不加' ';
輸出到控制臺：console.log('輸出到控制臺');
輸出到html頁面中[可以識別html的標(biāo)簽對混聊，即解釋為html語言]：document.write('<h1>輸出到html頁面中 </h1>');
輸入工具
彈出框輸入：var num=prompt("提示文本",[默認(rèn)值])弹谁；
提示工具
confirm("提示內(nèi)容")；
confirm返回值為true和false
注釋
單行注釋： ctrl+句喜？或者/ //
塊注釋： ctrl+shift+/或者预愤？ /* 塊 */
拼接
1. 用“+”拼接
2. 模板字符串（es6）：
`<td>${i}-${j}</td>`; 拼接部分用``括起來，變量用 ${變量}
識別空格咳胃，換行等
變量
一個容器植康，存儲數(shù)據(jù)
變量的聲明：
var:
let:
let命令，用來聲明變量展懈。它的用法類似于var销睁，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效
1. 適用于for循環(huán)
2. 先聲明存崖，在使用
3. 不允許在相同作用域內(nèi)重復(fù)聲明同一個變量冻记。
4. let可以識別塊級作用域
5. 不存在變量提升（先訪問后聲明） 報錯：沒有定義
const
聲明一個只讀的常量。一旦聲明来惧，常量的值就不能改變冗栗。
聲明常量的同時進(jìn)行賦值，不賦值就會報錯
可以識別塊級作用域
不能重復(fù)聲明
不存在變量提升【先訪問在聲明】
PI；
命名規(guī)范：
?數(shù)字贞瞒。字母偶房。下劃線組成
?不能以數(shù)字開頭
?區(qū)分大小寫
?不能以關(guān)鍵字（js中已經(jīng)用到的）命名
?不能以保留字（js中將來會用到的）命名
?有意義
?遵循的規(guī)則：首字母大寫 （Array String Obiect） 趁曼；駝峰命名法 （getElementByld）
賦值
?先聲明再賦值
var num;
num=10;
?聲明的同時賦值
var num=10;
?一次性聲明多個變量军浆，再賦值
var a,b,c;
a=1,b=2;
c=3;
?一次性聲明多個變量同時復(fù)制
var a=1,b=2,c=3;
注意事項(xiàng)：
?變量要先聲明再訪問，變量的默認(rèn)值是undefined
?新值可以覆蓋舊值
?變量可以用var關(guān)鍵字重新聲明
?不用var關(guān)鍵字聲明時必須給變量賦值挡闰，并且為全局變量乒融，先訪問后聲明變量，值為undefined：js執(zhí)行時先預(yù)解析（即識別var 和function聲明的變量摄悯，不賦值）赞季，在解析，一句一句執(zhí)行奢驯。
數(shù)據(jù)類型
根據(jù)在內(nèi)存中的存儲位置劃分申钩。基本數(shù)據(jù)類型存放在棧中瘪阁，引用數(shù)據(jù)類型存放在堆中（指針存放在棧中撒遣，內(nèi)容存放在堆中 ）
基本數(shù)據(jù)類型
?undefined
?null 【空占位符】
?string 【也是對象】
模板字符串 字符編碼 ASCII utf-8 unicode【萬國碼】 gb2312
轉(zhuǎn)義字符： \ \n[換行] \r \t[制表符] \' \ ""
let 對象=new String（“ ”）；
編碼
對象.charCodeAt(2) 返回第2個位置的字符編碼
String.fromCharCode（字符編碼） 解碼
查找元素
對象.charAt(0) 字符串的第0個位置的元素【查找字符】
查找下標(biāo)
對象.indexOf（“ ”） 查找對應(yīng)字符的下標(biāo)管跺，如果有返回下標(biāo)义黎，如果沒有，返回-1【第一個字符開始的下標(biāo)】
對象.lastIndexOf（“”） 倒著看查找豁跑，倒序看如果有返回下標(biāo)廉涕，如果沒有，返回-1【第一個字符開始的下標(biāo)】
對象.search（“”） 正則：有返回0艇拍；沒有返回-1狐蜕；
對象.match（“”） 有的話，返回數(shù)組【返回值卸夕，下標(biāo)馏鹤，包含返回值的數(shù)組，】
沒有 返回null
字符串的截冉慷摺：【返回新值湃累，不改變原內(nèi)容】
對象.substr（開始下標(biāo)，【截取的長度】）
對象.substring（開始下標(biāo)，結(jié)束的下標(biāo)）黄橘，從開始下標(biāo)開始到結(jié)束下標(biāo)之前侵佃，不取到結(jié)束的下標(biāo)
對象.slice（開始下標(biāo)，結(jié)束的下標(biāo)）宵统，從開始下標(biāo)開始到結(jié)束下標(biāo)之前，不取到結(jié)束的下標(biāo)【數(shù)組的方法】
字符串大小寫【轉(zhuǎn)換】
let str="AbCdEf";
str.toLowerCase() 轉(zhuǎn)換為小寫
str.toUpperCase() 轉(zhuǎn)換為大寫
替換：
str.replace（“山”，“閃”）马澈；
轉(zhuǎn)換【字符串轉(zhuǎn)換數(shù)組】
let str=“1,2,3,4,5,6”瓢省；
arr2=str.split（“，”）痊班；
?boolean
?number 2e3=2*10^3
二進(jìn)制： 0b開頭
八進(jìn)制：以0o{0+字母o}開頭勤婚，后跟0-7的數(shù)
十六進(jìn)制：以0x開頭，后跟0-9或者a-f
NaN:not a number 本來期望返回數(shù)值的操作涤伐，但并未返回數(shù)值的操作
引用數(shù)據(jù)類型
?object（屬性與方法的集合）數(shù)組馒胆，函數(shù)，對象
?深拷貝
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）
})
判斷變量的數(shù)據(jù)類型 ，其結(jié)果為字符串
typeof用法：
var num="5555";
typeof num;
數(shù)據(jù)類型
值
情況
typeof 的結(jié)果【看返回0 1代碼的前三位】
undefined undefined undefined
null null（空占位符） object
boolean 布爾型 true false boolean
string 字符串型 帶" "或者' ' string
number 數(shù)值型 整數(shù)器净，小數(shù)型雳，八進(jìn)制，十六進(jìn)制山害，十進(jìn)制
object
運(yùn)算符
表達(dá)式：能夠求值的語句
算術(shù)運(yùn)算符
+ - * / % ++var var++ --var var --
+的特殊性
計算：操作對象是數(shù)值型
拼接：操作對象含有字符串纠俭，字符串中進(jìn)行運(yùn)算時，用（）括起來
自增與自減
++var: ++在前粗恢，先算++柑晒，在執(zhí)行本行的其他語句
var++：++在后，先執(zhí)行本行的其他語句眷射，在算++
關(guān)系運(yùn)算符
返回值為布爾值 匙赞，即true或者false
> < >= <= ==[等于] ===[全等于]--> 數(shù)值和數(shù)據(jù)類型相同 !=[不等于] !==[不全等]
?如果比較的兩個對象都是字符串[數(shù)字型，字符]妖碉，按照ASCII表對應(yīng)的ASCII碼比較涌庭，逐位相比
?如果比較的兩個對象都是數(shù)值，直接比大小
?如果一個操作對象是字符串欧宜，另一個是操作對象是數(shù)值坐榆，先嘗試將字符串轉(zhuǎn)換為數(shù)字，如果轉(zhuǎn)換成功冗茸，按照數(shù)字比較大邢啤；如果轉(zhuǎn)換不成夏漱，則返回false
?1==true豪诲； 0==false ； ==數(shù)值相同
?=== 數(shù)值和數(shù)據(jù)類型相同
?undefined=null
賦值運(yùn)算符
= +=[num+=10 等價于 num=num+10] -= *= /= %=
邏輯運(yùn)算符[與或非]
測量值與變量之間的邏輯關(guān)系
假：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
返回值：
第一步：先看與或非兩邊的真假
第二步：在看返回的真假的內(nèi)容
&& 同真為真，返回第一個假值 【遵循短路原則：看到假值，后邊的不看了】交播；全為真重虑，返回最后一個真值
|| 同假為假，返回第一個真值 【遵循短路原則：看到真值秦士，后邊的不看了】缺厉；全為假，返回最后一個假值
! 取反伍宦；返回值只有ture或false
運(yùn)算符的優(yōu)先級
算術(shù)>關(guān)系運(yùn)算符>邏輯運(yùn)算符
三元運(yùn)算符：
表達(dá)式?為真的執(zhí)行語句：為假的執(zhí)行語句 【類似if else】
一元運(yùn)算符： typeof + - new
特殊運(yùn)算符： （） .
流程控制
代碼按照指定條件的執(zhí)行順序
?順序結(jié)構(gòu)
?分支結(jié)構(gòu)
?循環(huán)結(jié)構(gòu)
順序結(jié)構(gòu)
語句按照從上到下的順序進(jìn)行執(zhí)行
循環(huán)結(jié)構(gòu)
當(dāng)滿足條件時芽死，重復(fù)不斷的執(zhí)行一段代碼
for循環(huán)：明確知道次數(shù)
for(初始條件乏梁；終止條件次洼；步進(jìn)值){
}
swith循環(huán)
switch(表達(dá)式【能夠求值的語句】){
case 值1【表達(dá)式能取到的值】：語句1；break遇骑；
case 值2【表達(dá)式能取到的值】：語句2卖毁；break；
...
default: 語句落萎；
}
while循環(huán)
while(條件){
滿足條件時亥啦，執(zhí)行語句；
}
例子：
var j=0练链；
while(j<5){
console.log(1);
j++;
}
do while循環(huán)
執(zhí)行順序先執(zhí)行循環(huán)體翔脱，在執(zhí)行判斷語句
do{
循環(huán)體；
}while(條件)
例子：
var i=0;
do{
console.log(1);
i++;
}(i<5)
循環(huán)結(jié)束
continue
滿足條件終止本次循環(huán)
break
滿足條件,終止整個循環(huán)
分支結(jié)構(gòu)
當(dāng)條件成立時執(zhí)行相應(yīng)的語句
?單分支結(jié)構(gòu)
if條件：
if（表達(dá)式）{
為真的執(zhí)行語句【返回值為true執(zhí)行的語句】
}
?雙分支
if條件：
if（表達(dá)式）{
為真的執(zhí)行語句
}
else{
為假的執(zhí)行語句
}
?多分支
if條件：
if（表達(dá)式1）{
表達(dá)式1成立時執(zhí)行語句
}
else if(表達(dá)式2){
表達(dá)式1不成立 但 表達(dá)式2成立時執(zhí)行語句
}
else if(表達(dá)式3){
表達(dá)式1不成立且表達(dá)式2不成立【但】表達(dá)式3成立時執(zhí)行語句
}
else{
以上表達(dá)式都不成立時執(zhí)行的語句
}
?嵌套分支
if(){
if(){
}
else{
}
}
else{
}
數(shù)學(xué)方法
取隨機(jī)數(shù)
Math.random() ; (0-1)
取整
向下取整【向左取整】： rgb=Math.floor(Math.random());
向上取整【向右取整】： rgb=Math.ceil(Math.random());
次冪[x的y次冪]
Math.pow(x,y)
一維數(shù)組
按照順序排列的一組相關(guān)數(shù)據(jù)媒鼓。
特點(diǎn)：每一個數(shù)組元素都有一個特定的鍵名（即俗稱的下標(biāo)）[字符串類型]
數(shù)組元素的默認(rèn)值時undefined
數(shù)組的聲明[初始化數(shù)組]
?先聲明后賦值
var arr=[];
arr[0]=89,arr[0]="adc",....;
?聲明的同時賦值
var arr=[90,89,88,76,56];
數(shù)組下標(biāo)的范圍
訪問數(shù)組元素届吁，范圍【0，n-1】
數(shù)組的長度
數(shù)組名.length; 例子： arr.length
注意：
數(shù)組的長度可變
arr=[90,89,88,76,56];
可以隨時添加元素绿鸣，可跳著添加疚沐。如：
arr[6]="aaa"；
數(shù)組元素可以時任意的數(shù)據(jù)類型
arr=[true,null,{name:},[1,2,3]]
遍歷數(shù)組元素
訪問數(shù)組的每一個元素
1. 用for循環(huán)遍歷數(shù)組
for(var i=0;i<arr.length;i++){
arr.[i]; 即可訪問arr的每個元素
}
2. 用for in循環(huán)遍歷數(shù)組
for(var i in arr){
i; //代表arr的鍵名（下標(biāo)）
arr[i]; //元素
}
3.for of遍歷元素
for（item of arr1）{
arr2.push（item）
}
4.foreach遍歷數(shù)組
用法：
arr.forEach(function (value潮模，index){
}）
value[名字隨便起]:數(shù)組中的當(dāng)前元素【必須有】
index[名字隨便起]:數(shù)組當(dāng)前元素的下標(biāo)【鍵名】【可選】
清空數(shù)組
arr.length=0
二維數(shù)組
聲明：
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]
}
}
數(shù)組身上的方法
向數(shù)組的后面插入一個或多個元素（.push）
arr.push(需要插入的內(nèi)容)亮蛔；
刪除數(shù)組最后一位：.pop
arr.pop（）
在數(shù)組之前插入: .unshift
arr.unshift("")
在數(shù)組之前刪除一位：.shift
arr.shift（）
萬能的插入和刪除：.splice（）
arr.splice(開始的位置,長度，“再刪除的位置加入的元素1”擎厢，“再刪除的位置加入的元素2”究流，...);
不想刪除，讓其長度為0动遭；
可以返回刪除的值：arr.splice（）
是否包含某個元素： .includes
arr.includes（“被包含的內(nèi)容”）;
截取元素： .slice
arr.slice（2,5）：截取第2位開始的芬探。第5位之前的
連接多個數(shù)組：.concat
arr.concat([數(shù)組1],[數(shù)組2])
數(shù)組的取反：.reverse
arr.reverse()
把數(shù)組轉(zhuǎn)換為字符串: .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大的數(shù)
arr.find(item=>item%2==0) 找第一個偶數(shù)
arr.find（function(item){
return item%2==0;
}）
查找第一個符合條件的下標(biāo)： .findIndex（）
let index= arr.findIndex(function(item){
return item > top //返回布爾值炎疆，為真時返回下標(biāo)
})
返回符合條件的真假值：.some()
arr.some（item=>item>8）;
返回每一個符合條件的元素：.every()
arr.every（item=>item<10）;
篩選符合條件的：.filter()
arr.filter（item=>item%2==0）; 返回新數(shù)組
遍歷數(shù)組（.forEach）
arr.forEach
用法：
arr.forEach(function (value卡骂，index){
}）
value[名字隨便起]:數(shù)組中的當(dāng)前元素【必須有】
index[名字隨便起]:數(shù)組當(dāng)前元素的下標(biāo)【鍵名】【可選】
處理每個元素:.map
arr.map（item=>{return item*10}） //讓數(shù)組中的每個元素都執(zhí)行一個函數(shù)，返回一個新數(shù)組
全部方法
concat()
連接兩個或更多的數(shù)組形入，并返回結(jié)果全跨。
copyWithin() 從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中。
every() 檢測數(shù)值元素的每個元素是否都符合條件亿遂。
fill() 使用一個固定值來填充數(shù)組浓若。
filter() 檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組蛇数。
find() 返回符合傳入測試（函數(shù)）條件的數(shù)組元素挪钓。
findIndex() 返回符合傳入測試（函數(shù)）條件的數(shù)組元素索引。
forEach() 數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)耳舅。
indexOf() 搜索數(shù)組中的元素碌上，并返回它所在的位置。
join() 把數(shù)組的所有元素放入一個字符串浦徊。
lastIndexOf() 返回一個指定的字符串值最后出現(xiàn)的位置馏予，在一個字符串中的指定位置從后向前搜索。
map() 通過指定函數(shù)處理數(shù)組的每個元素盔性，并返回處理后的數(shù)組霞丧。
pop() 刪除數(shù)組的最后一個元素并返回刪除的元素。
push() 向數(shù)組的末尾添加一個或更多元素冕香，并返回新的長度蛹尝。
reduce() 將數(shù)組元素計算為一個值（從左到右）。
reduceRight() 將數(shù)組元素計算為一個值（從右到左）暂筝。
reverse() 反轉(zhuǎn)數(shù)組的元素順序箩言。
shift() 刪除并返回數(shù)組的第一個元素。
slice() 選取數(shù)組的的一部分焕襟，并返回一個新數(shù)組陨收。
some() 檢測數(shù)組元素中是否有元素符合指定條件。
sort() 對數(shù)組的元素進(jìn)行排序鸵赖。
splice() 從數(shù)組中添加或刪除元素务漩。
toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果它褪。
unshift() 向數(shù)組的開頭添加一個或更多元素饵骨，并返回新的長度。
valueOf() 返回數(shù)組對象的原始值茫打。
函數(shù)
把實(shí)現(xiàn)某一特定功能的代碼塊封裝起來居触，并能夠重復(fù)調(diào)用
定義函數(shù)
1. 基本語法（function關(guān)鍵字）【調(diào)用可以在聲明前妖混，也可以在聲明后】
function 函數(shù)名（形參1，形參2,....）{
函數(shù)體轮洋；
return 返回值制市；【可有可無】 《并不向用戶顯示，僅是調(diào)用的數(shù)的值》
}
2. 字面量弊予，自變量【必須先聲明在調(diào)用】【預(yù)解析】
var 變量=function (參數(shù)){
函數(shù)體祥楣；
}
調(diào)用 變量（）
3. 對象的方式【實(shí)例化對象】
let aa=new Function（“a”，“b”汉柒，“alter（a+b）”）
調(diào)用 aa（10,20）
匿名函數(shù)定義與調(diào)用
(function (){
})()
定義：(function (){
}
調(diào)用【一般在定義的時候就調(diào)用】：
(function (){
})()
箭頭函數(shù)
定義：
let aa=()=>console.log(123);
let aa=(參數(shù))=>{
多行函數(shù)體误褪；
}
調(diào)用：
aa(實(shí)參)
函數(shù)的調(diào)用
1. 函數(shù)名（實(shí)參1，實(shí)參2碾褂，….）
2. 自變量（）
3.自變量（參數(shù)1兽间，參數(shù)2）
參數(shù)
能夠動態(tài)改變函數(shù)體的變量，使函數(shù)更加靈活
形參：
定義函數(shù)使寫在括號里的量斋扰。其作用為接收實(shí)參
形參默認(rèn)值的傳遞
1. if else分支結(jié)構(gòu)
if(flag==undefined){
}
else{
}
2. 三元運(yùn)算符【用的多】
flag=flag==underfined渡八？"<":flag
3. 邏輯或||返回第一個真值【用的多】
flag=flag||"<"
4. 定義形參的時候直接賦值:當(dāng)形參為undefined時給形參默認(rèn)值
flag=25555;
實(shí)參：
函數(shù)調(diào)用時寫在括號中的值啃洋。其作用為給形參傳值
全部的實(shí)參由arguments接收
參數(shù)傳遞
?參數(shù)可以是任意的數(shù)據(jù)類型
?參數(shù)的傳遞按順序傳遞：從左到右
?形參=實(shí)參 ：一一對應(yīng)的傳遞
?形參>實(shí)參：多余的形參賦值為undefined
?形參<實(shí)參：實(shí)參由arguments對象來接收
剩余參數(shù)
聲明： ...rest【為數(shù)組】
function 函數(shù)名(形參1,...rest){
函數(shù)體传货；
}
rest和arguments對象的區(qū)別
1. rest接收多余的參數(shù)，arguments接收全部的實(shí)參
2. rest是數(shù)組宏娄，能夠使用數(shù)組的方法问裕，鍵名從0開始；
arguments對象類似數(shù)組孵坚，不能使用數(shù)組的方法
函數(shù)的返回值：return
return 終止函數(shù)粮宛。遇到return，后面都不執(zhí)行
返回值可以是任意的數(shù)據(jù)類型
一個函數(shù)內(nèi)部可以有多條return分支語句卖宠，但最終只執(zhí)行一條return語句
只能返回一個值
回調(diào)函數(shù)
把一個函數(shù)的指針（函數(shù)名）作為參數(shù)傳遞給另一個函數(shù)巍杈，當(dāng)指針調(diào)用函數(shù)時，這個函數(shù)叫做回調(diào)函數(shù)【高階函數(shù)】：形參高階函數(shù)和 返回值高階函數(shù)
指針類型
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));
函數(shù)類型
foreach
arguments對象
用來接收參數(shù)的詳細(xì)信息
每聲明一個函數(shù)扛伍，在其內(nèi)部自動生成arguments對象
arguments對象只在函數(shù)內(nèi)部起作用
不是數(shù)組類似數(shù)組筷畦，可以用鍵名遍歷數(shù)組（arguments[i]），其長度為arguments.length
不能用數(shù)組身上的方法
閉包函數(shù)
內(nèi)部的函數(shù)調(diào)用外部的函數(shù)的【變量】;
function fn1(){
let a="456";
function fn2(){
console.log(a)
}
return fn2;
}
let fn2=fn1();
fn2()
// js中沒有函數(shù)的重載：傳的參數(shù)不同刺洒，執(zhí)行不同的函數(shù)
作用域
變量起作用的范圍
局部作用域優(yōu)先于全局作用域[作用域鏈]
?全局作用域
1. 在整個js中都能訪問的變量鳖宾，凡是進(jìn)行修改，變量的值就會改變
2. 類型【情況】
在函數(shù)外部用var聲明的變量逆航，即擁有全局作用域
不用var聲明鼎文，但是賦值的變量就是全局變量，即擁有全局作用域因俐；
?局部作用域
類型【情況】
形參是局部變量拇惋，即擁有局部作用域
在函數(shù)內(nèi)部用var關(guān)鍵字聲明的變量周偎，也是局部變量，即擁有局部的作用域撑帖。
?塊級作用域
{
括起來的就是塊級作用域栏饮；
}
內(nèi)置頂層函數(shù)
內(nèi)置：ECMAscript自帶的函數(shù)，本身就有磷仰；只要求知道如何讓使用袍嬉，不用關(guān)心如何封裝
頂層：在js代碼中的任何位置都可以使用；
escape()：將傳進(jìn)來的字符串進(jìn)行編碼
escape("編碼的內(nèi)容"); 編碼內(nèi)容一般為中文
unescape（）：對編碼的字符串進(jìn)行解碼
unescape("字符串的編碼")
Boolean（）：將其余數(shù)據(jù)類型轉(zhuǎn)換為布爾型
String（）：將任意數(shù)據(jù)類型轉(zhuǎn)換為字符串型
Number（）：將其余數(shù)據(jù)類型轉(zhuǎn)換為數(shù)值型
情況
1. null：0 “”：0 “ ”：0
2. false：0 true：1
3. undefined：NaN
4. 進(jìn)制數(shù)轉(zhuǎn)換為十進(jìn)制
5. 去掉沒有意義的后導(dǎo)0和前導(dǎo)0
6. 字符串： 規(guī)范的浮點(diǎn)數(shù)灶平，數(shù)值型字符串
parseInt（）：將字符串轉(zhuǎn)換為整數(shù)
第一個位置為字母 （+伺通、-）號 空格
轉(zhuǎn)換不成功，轉(zhuǎn)換為NaN
parseFloat（）：將字符串轉(zhuǎn)換為小數(shù)
只能轉(zhuǎn)換規(guī)范的浮點(diǎn)數(shù)
轉(zhuǎn)換不成功逢享，返回NaN
isNaN():值是否夠轉(zhuǎn)換為數(shù)值型
能轉(zhuǎn)換為數(shù)值型返回false
不能轉(zhuǎn)換為數(shù)值型返回true
作用：數(shù)據(jù)類型轉(zhuǎn)換
強(qiáng)制類型轉(zhuǎn)換
隱式數(shù)據(jù)類型轉(zhuǎn)換：算數(shù)運(yùn)算符罐监，邏輯運(yùn)算符，條件語句（if瞒爬，while等）
對象 類
概念
類：一群具有相同特征的對象集合的描述
對象：具體存在的類個體
屬性：對象基礎(chǔ)信息的描述
方法：對象功能的描述
定義對象
構(gòu)造函數(shù)（類）,實(shí)例化對象
1. 構(gòu)造類
function 類名（color弓柱，price等其他形參）{
this.color=color；
this.price=price侧但； //實(shí)例化時矢空，this指向?qū)嵗膶ο?/p>
this.play=function（）{
}
}
2. 實(shí)例化對象
let 對象=new 類名(實(shí)參);
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定義類疹启，實(shí)例化對象
重要的關(guān)鍵字[方法]
constructor： 返回該對象的構(gòu)造函數(shù)
使用： 對象.constructor
instanceof：判斷函數(shù)是否為對象的構(gòu)造函數(shù)古程？true：false；
使用 : 對象 instanceof 構(gòu)造函數(shù)
原型喊崖，原型鏈
最大的類：object:[prototype proto]
生成人類：person：【proto prototype】 proto繼承父類的prototype
生成對象：xb【proto挣磨，prototype】 proto繼承人類的prototype
sing改變函數(shù)的指針
sing.call（xb雇逞，10,20）
sing.apply（sb，【10,20】）
sing.
將小白的say方法傳給小紅
say=xh.say
say.call（xh）
遞歸
函數(shù)自己調(diào)用自己,必須有一個 出口
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]]))
節(jié)點(diǎn)：
整個文檔 元素【標(biāo)簽】 屬性 文本 注釋【節(jié)點(diǎn)】
文檔的節(jié)點(diǎn)
document.nodeName #document
document.nodeValue null
document.nodeType 9
元素的節(jié)點(diǎn)
let box=documentquerySelector("box")
box.nodeName 大寫的標(biāo)簽名
box.nodeValue null
box.nodeType 1
節(jié)點(diǎn)
nodeName（名字）
nodeValue（值）
nodeType（節(jié)點(diǎn)類型）
文檔節(jié)點(diǎn) #document null 9
元素節(jié)點(diǎn) 大寫的標(biāo)簽名 null 1
屬性節(jié)點(diǎn) 大寫的屬性名 屬性值 2
文本節(jié)點(diǎn) #text 文本 3
注釋節(jié)點(diǎn) #comment 注釋內(nèi)容 8
節(jié)點(diǎn)的獲取
1.childNodes：子節(jié)點(diǎn)
document.childNodes[1].childNodes
2.parendNode：父節(jié)點(diǎn)
let box=document.querySelector("box") ;
3.上一個兄弟節(jié)點(diǎn)：previousSibling
box.previousSibling
3.下一個兄弟節(jié)點(diǎn)：nextSibling
box.nextSibling
4.上一個兄弟元素節(jié)點(diǎn)：previousElementSibling
box.previousElementSibling
5.下一個兄弟元素節(jié)點(diǎn)：nextElementSibling
box.nextElementSibling
節(jié)點(diǎn)的方法
創(chuàng)建元素節(jié)點(diǎn)
let div=document.createElement("div")
在最后插入節(jié)點(diǎn)
let box=document.querySelector（“.box”）茁裙；
box.appendChild（div）
在之前插入節(jié)點(diǎn).insertBefore(要插入的元素塘砸，插入位置之后的元素)
let span=document.querySelector("span")
box.insertBefore(span,div)
創(chuàng)建文本節(jié)點(diǎn)
let text=document.createTextNode（"必須有參數(shù)"）
text.nodeValue=“這是span標(biāo)簽”
span.appendChild(text)
創(chuàng)建注釋節(jié)點(diǎn)
let comment1=document.createComment（“這是注釋節(jié)點(diǎn)”）;
box.appendChild(comment1);
創(chuàng)建屬性節(jié)點(diǎn)
let attr=document.createAttribute("id");
添加/設(shè)置屬性節(jié)點(diǎn)
.setAttribute("name","value");//添加屬性
box.setAttributeNode（attr）
添加：append 刪除：remove
刪除標(biāo)簽節(jié)點(diǎn) ： box.removeChild(div)
刪除屬性節(jié)點(diǎn)： 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. 獲取標(biāo)簽名的元素[得到的是集合掉蔬，可以通過鍵名訪問]
let 對象=document.getElementsByTagName（“標(biāo)簽名”）
4.給對象加類
標(biāo)簽加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("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標(biāo)或者foreach遍歷】
7.屬性選擇器
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
操作樣式
獲取樣式
獲取行內(nèi)樣式
對象.style.樣式名
獲取通用的樣式【css和行內(nèi)】
getComputedStyle(對象,null).樣式名
設(shè)置行內(nèi)樣式
對象.style.樣式名=“樣式值”
對象.style=“background：red；border-radius：50%”
批量操作類名
對象.className="class類名"
對象.className=“ ”矾瘾；
對象.classList.add（“”） 添加類
對象.classList.remove（“”） 刪除類
對象.classList.toggle（“”） 切換類
對象.id="id名"
外部定義一個樣式女轿，加到對象身上，參考第四點(diǎn)
操作屬性
操作標(biāo)準(zhǔn)屬性
已知的壕翩，系統(tǒng)自帶
對象.屬性
例子 ： img.src
自定義屬性
獲取
對象.getAttrbutte("name")
設(shè)置
對象.setAttrbutte("name","value")
操作內(nèi)容
innerText：不能識別html的標(biāo)簽對
innerHTML: 可以識別html的標(biāo)簽對
對象.innerText=“內(nèi)容”
對象.innerHTML=“內(nèi)容”
添加事件
對象.對象事件=function（）{
}
元素的尺寸和位置
對象.offsetWidth:獲取元素的真實(shí)寬度
對象.offsetHeight:獲取元素的真實(shí)高度
對象.offsetTop：對象的上邊框距離具有定位的父元素的內(nèi)邊框的垂直距離
對象.offsetLeft：對象的左邊框距離具有定位的父元素的內(nèi)邊框的水平距離
對象.scrollTop：有滾動條的元素蛉迹，瀏覽器滾動時在垂直方向的拉動距離
body的兼容
document.body.scrollTop || document.documentElement.scrollTop
對象.scrollLeft：有滾動條的元素，瀏覽器在滾動時在水平方向的拉動距離
動態(tài)創(chuàng)建標(biāo)簽
let div=document.createElement（“標(biāo)簽名”）
創(chuàng)建的元素放到也面中：
document.body.appendChild（div）
父元素.appendChild（子元素）
BOM： 瀏覽器對象模型
完成窗口與窗口之間的通信放妈，window對象是其核心對象北救，
?history【前進(jìn)，后退芜抒，刷新】 是一個對象 使用【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：重新設(shè)置瀏覽器大小
window.onresize=function（）{
}
1-4：瀏覽器滾動事件
window.onscroll=function （）{
}
2.瀏覽器左上角距離屏幕左上角的偏移量
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
注意：
因?yàn)閣indow是核心珍策，可以省略window不寫
方法
alert() 彈出框
prompt() 輸入框
confirm() 提示框，返回true或flase
close() 關(guān)閉頁面
open(“url”) 打開頁面（“打開的頁面的路徑【根據(jù)本html位置的相對路徑】”）
open("url","","width=300,height=200");
setInterval（fn挽绩，毫秒數(shù)）：隔毫秒數(shù)重復(fù)不斷的執(zhí)行一個函數(shù)fn
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
clearInterval（t）：清除setInterval的時間函數(shù)
let t =setInterval(fn,3000)
function fn(){
}
clearInterval（t）
setTimeout（fn膛壹，1000） 隔一定的時間只執(zhí)行一次函數(shù)
cleanTimeout（t） 清除時間函數(shù) 【用法同上】
獲取表單的值
對象.value=
清空=“”
history對象
屬性：
history.length 用來顯示歷史記錄的長度
方法
history.forward() 前進(jìn)
history.back()后退
history.go(0) 刷新 【1 前進(jìn)，-1后退唉堪；不常用】
location對象
屬性：設(shè)計獲取當(dāng)前頁面的地址
location.href=“ ” 設(shè)置或獲取頁面地址 設(shè)置新值
location.host：主機(jī)名+端口號
location.hostname：主機(jī)名
location.port：端口號
location.protocol：協(xié)議
location.pathname： 路徑
location.search： ？后面的查詢【搜索】字段
方法
location.reload( ) 重新加載
location.replace（"網(wǎng)頁.html"） 頁面替換肩民，不會增加歷史記錄
location.assign（“網(wǎng)頁.html”） 頁面替換唠亚， 能夠增加歷史記錄
事件
事件的添加方式
節(jié)點(diǎn).onclick=function（e）{
}
只能添加一個
節(jié)點(diǎn).addEventListener("事件【click】",事件處理程序，事件類型【布爾值】【可以不給】)
可以添加多個事件
將事件加在元素身上持痰， 在js中定義事件的函數(shù)
<body>
<div class="son" onclick="事件函數(shù)（）"></div>
</body>
<script>
function 事件函數(shù)（）{
函數(shù)體
}
</script>
事件的構(gòu)成
事件源：誰去觸發(fā)事件誰就是事件源
事件：鼠標(biāo)事件/鍵盤事件
事件處理程序：
常用的web端事件
onclick：單擊
ondblclick：雙擊
onmousedown：按下
onmouseup：抬起
onmousemove：鼠標(biāo)移動
onmouseover：移入
onmouseout：移出
onmouseenter：移入
onmouseleave：移出
oncontextmenu：右擊事件【默認(rèn)事件】
對象.oncontextmenu=function(e){
e.preventDefault() //阻止瀏覽器默認(rèn)右擊行為
}
onmousewheel 滾輪滾動事件
移動端事件
ontouchstart：按下
ontouchmove：移動
ontouchend：抬起
事件對象：
用來保存事件觸發(fā)時的信息
w3c ： 在事件處理程序的形參中
ie ： 在window.event中
解決兼容性：let event=e || window.event
鼠標(biāo)事件對象常用的屬性：
clientX : 距離瀏覽器 X軸 的偏移量 【client設(shè)備】
clientY：距離瀏覽器 Y 軸 的偏移量
從 瀏覽器的 哪個位置進(jìn)來
offsetX：距離事件源 X軸 的偏移量
offsetY：距離事件源 Y軸 的偏移量
從 事件源的 哪個位置進(jìn)來
screenX：距離屏幕 X軸 的偏移量
screenY：距離屏幕 Y軸 的偏移量
從 屏幕的 哪個位置進(jìn)來
鍵盤事件
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
onkeypress鍵盤按下：按下功能鍵ctrl shift alt delete esc等不會觸發(fā)
鍵盤事件對象常用的屬性
keyCode：鍵盤碼
ctrlKey：是否按下了ctrl
shiftKey：是否按下了shift
altKey：是否按下了alt
key：鍵名
表單事件
oninput：輸入事件
onchange：內(nèi)容發(fā)生改變灶搜，并且失去焦點(diǎn)
onblur：失去焦點(diǎn)
onfocus：獲得焦點(diǎn)
onsubmit：提交表單
onselect：文本選中
窗口事件
onscroll：滾動事件
onload：加載
onresize：重新獲取瀏覽器大小
事件流
當(dāng)觸發(fā)一個事件時，由這個事件的容器到整個文檔都會按照特定的順序依次進(jìn)行觸發(fā)
順序：子元素 -》 父元素 【具體的到不具體的】
事件分類
捕獲型事件：true【大到小工窍，不具體的事件源到具體的事件源】
冒泡型事件：false【小到大割卖，具體的事件源到不具體的事件源】
瀏覽器執(zhí)行事件的順序：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：目標(biāo)事件源【記錄】獲取到的是元素/屬性：類型：節(jié)點(diǎn)；點(diǎn)誰獲取到誰
ｅｖｅｎｔ．ｔａｒｇｅｔ．ｃｌａｓｓＮａｍｅ 事件源的類名
正則
定義
用來描述或者匹配一系列符合某種規(guī)則的字符串淹仑，規(guī)則可以自己定義
作用
?數(shù)據(jù)驗(yàn)證
?內(nèi)容檢索
?內(nèi)容替換
?內(nèi)容過濾
正則對象
創(chuàng)建正則對象
實(shí)例化對象
let reg = new RegExp("正則表達(dá)式[即規(guī)則]"丙挽，"模式修正符")
必須傳入字符串
自變量肺孵，字面量
let reg=/正則表達(dá)式/模式修正符 ； (//代表定界符)
正則對象常用的方法
test（str） 檢測正則對象是否能夠匹配str 颜阐， 返回值 true || false
exec( str ) 檢測正則對象是否能夠匹配str平窘，如果能夠匹配，返回一個擁有特殊屬性的數(shù)組凳怨，如果不能匹配瑰艘，返回null
let reg = new RegExp("uek","gi");
let bool=reg.test("IT培訓(xùn)認(rèn)準(zhǔn)優(yōu)逸客,專注品質(zhì)IT教育,成就IT高薪就業(yè) - 優(yōu)逸客官網(wǎng)"); //bool=true
正則表達(dá)式
原子
原子：正則表達(dá)式最小的內(nèi)容【只能匹配一位】
\d 匹配 0-9 ;
\D 匹配：除了0-9意外的字符
\w 匹配：數(shù)字、字母肤舞、下劃線
\W 匹配：除了數(shù)字字母下劃線以外的字符
\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和空格
元字符
. 代表所有的字符
| 或者
原子組
相當(dāng)于變量默認(rèn)保存在內(nèi)存中磅叛；可以使用\1 \2等方式依次引用（）中的內(nèi)容
（？： ）可以使原子組不在內(nèi)存中存儲萨赁，不可以調(diào)用
let str1="山西優(yōu)逸客"
let str2="陜西優(yōu)逸客"
let reg=/(山西|陜西)優(yōu)逸客/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>山西優(yōu)逸客-山西</div>"
let reg=/<(div)>(山西|陜西)優(yōu)逸客-\2<\/\1>/g
let reg=/<(div)>(?:山西|陜西)優(yōu)逸客-\2<\/\1>/g \2不會被引用
數(shù)量[手機(jī)號/身份證號]
* 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}？
邊界判斷【限制長度】
^ 以...開始
$ 以...結(jié)束
let reg=/^(0351)-\d{7}$/
let str1="hello word"
let reg=/o\b/
模式修正符
可以搭配使用 gi mi mg 先后順序執(zhí)行
g 全局 global
記錄下標(biāo)化焕，下一個下標(biāo)位置開始
i 不區(qū)分大小寫
m 可以換行
正則的使用場所
1.正則對象
2.str對象 中的 str.split（正則對象） 拆分
let str="山西有一棵：1,2.3"
str.split(/[: , .]/)
3.str對象 中的 str.replace（正則對象） 替換
let str="山西有課山西有了"
str.replace（/（山西）/g萄窜，陜西）
4.str對象 中的?str.search（正則對象） 查找
let str="山西有課山西有了"
str.search（/（山西|有一顆）/）
常用的正則
用戶名 /^[a-z0-9_-]{3,16}$/
密碼 /^[a-z0-9_-]{6,18}$/
十六進(jìn)制值 /^#?([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 標(biāo)簽 /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
刪除代碼\\注釋 (?<!http:|\S)//.*$
Unicode編碼中的漢字范圍 /^[\u2E80-\u9FFF]+$/
日期對象/函數(shù)
自定義時間
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開始
獲取當(dāng)前格林尼治時間
let now=new Date() //獲取當(dāng)前格林尼治時間
now.setFullYear(2020) 設(shè)置年份
now.setMonth(5) 6月份
now.setDate(26) 26號
now.setHours（12） 12時
now.setMinutes(0) 分
now.setSeconds（0） 秒
now.setMilliseconds（0） 毫秒
獲取世界協(xié)調(diào)時間【用法同上】
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）
//獲取毫秒數(shù)
now.getTime() 1970.1.1.0的毫秒數(shù)
時間案例
倒計時
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(); //未來的毫秒數(shù)
let time=now.getTime();//現(xiàn)在的毫秒數(shù)
let juXianZai=Math.floor((times-time)/1000);?//2018.9.1到現(xiàn)在時間的秒數(shù)
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;
}
}
輪播圖
雙下標(biāo)
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");//小點(diǎn)
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;
move2();
}
Son.forEach(function(value,index){
value.onclick=function(){
if(index==now){
return;
}
else if(index>now){
Son[index].classList.add("son1");
Son[now].classList.remove("son1");
//就緒
Box1[now].style.left=-Width+"px";
Box1[index].style.left=0;
}
else if(index<now){
Son[index].classList.add("son1");
Son[now].classList.remove("son1");
//就緒
Box1[now].style.left=Width+"px";
Box1[index].style.left=0+"px";
}
now=next=index;
}
})
}
單下標(biāo)
tupian下包含 a a下包含img
tupian x y 同級
let tupian = daohang.getElementsByClassName("tupian")[0];
let a1 = tupian.getElementsByTagName("a");
let img = tupian.getElementsByTagName("img");
let z = daohang.getElementsByClassName("z")[0];
let y = daohang.getElementsByClassName("y")[0];
let x = daohang.getElementsByClassName("x")[0];
let Son = x.getElementsByClassName("son");
num = 0;
let t = setInterval(move, 2000);
function move() {
num++;
if (num == img.length) {
num = 0;
}
for (let i = 0; i < img.length; i++) {
a1[i].style.zIndex = 20;
Son[i].className = "son";
}
Son[num].className = "son son1";
a1[num].style.zIndex = "30"
}
img.onmouseenter = function () {
clearInterval(t)
}
img.onmouseleave = function () {
t = setInterval(move, 2000)
}
tupian.onmouseenter = function () {
clearInterval(t);
}
tupian.onmouseleave = function () {
t = setInterval(move, 2000);
}
z.onclick = function () {
a1[num].style.zIndex = 20;
}
y.onclick = function () {
move();
}
for (let i = 0; i < Son.length; i++) {
Son[i].onclick = function () {
for (let j = 0; j < Son.length; j++) {
Son[j].className = "son";
}
a1[i].style.zIndex = "40";
Son[i].className = "son son1";
num = i;
}
}
function move1() {
num--;
if (num < 0) {
num = a1.length - 1;
}
for (let j = 0; j < a1.length; j++) {
a1[j].style.zIndex = 20;
Son[j].className = "son"
}
Son[num].className = "son son1"
a1[num].style.zIndex = 30;
}
z.onclick = function () {
move1();
}
透明度輪播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>輪播</title>
<script src="jquery-3.2.1.js"></script>
</head>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
height: 250px;
width: 500px;
margin: 0 auto;
position: relative;
}
div.box?.imgbox{
height: 100%;
width: 100%;
position: relative;
}
div.box?.imgbox div{
height: 100%;
width: 100%;
position: absolute;
top:0;
left:0;
opacity: 0;
}
div.box?.imgbox .active{
opacity: 1;
}
div.box?.next{
height: 50px;
width: 15px;
position: absolute;
right: 0;
top:50%;
margin-top:-25px;
background: black;
opacity: 0.8;
}
div.box?.pre{
height: 50px;
width: 15px;
position: absolute;
left: 0;
top:50%;
margin-top:-25px;
background: black;
opacity: 0.8;
}
div.box?ul{
height: 10px;
width: 50px;
position: absolute;
bottom:25px;
right:25px;
display: flex;
justify-content: space-between;
align-items: center;
}
div.box?ul li{
height: 10px;
width: 10px;
border-radius: 50%;
background: white;
}
div.box?ul .active{
background: #b0b0b0;
}
</style>
<body>
<div class="box">
<div class="imgbox">
<div class="active" style="background: red;"></div>
<div style="background: green;"></div>
<div style="background: yellow;"></div>
</div>
<div class="next"></div>
<div class="pre"></div>
<ul>
<li class="active"></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
</body>
</html>
<script>
$(function(){
let num=0;
let t=setInterval(move,2000);
function move(type="next"){
if(type=="next"){
num++;
}else if(type=="pre"){
num--;
}
if(num>=$("div.box?.imgbox div").length){
num=0
}
if(num<0){
num=$("div.box?.imgbox div").length-1
}
$("div.box?.imgbox div")
.removeClass("active")
.eq(num).addClass("active")
$("div.box?ul li")
.removeClass("active")
.eq(num).addClass("active")
}
$("div.box?.pre").click(function(){
move("pre")
})
$("div.box?.next").click(function(){
move()
})
$("div.box").hover(function(){
clearInterval(t)
},
function(){
t=setInterval(move,2000);
})
$("li").click(function(){
let a=$(this).index();
$("div.box?.imgbox div")
.removeClass("active")
.eq(a).addClass("active")
$("div.box?ul li")
.removeClass("active")
.eq(a).addClass("active")
num=a
})
})
</script>
