總結(jié)學(xué)過(guò)的JavaScript
入門
js是什么?
js即javascript耍攘,它是一種輕量級(jí)的腳本語(yǔ)言讲竿。運(yùn)行在瀏覽器客戶端.
js引入方式
內(nèi)嵌式:所有js代碼寫(xiě)到一個(gè)<script></script>,此script標(biāo)簽可以放到html的任何地方:
<script type="text/javascript">
js代碼
</script>
外鏈?zhǔn)?br>
所有的js代碼寫(xiě)到一個(gè)外部js文件內(nèi)(該文件后綴名為.js),
在html內(nèi)通過(guò)script上的src屬性引入過(guò)來(lái)。
<script src="js文件"></script>
事件引入
在開(kāi)始標(biāo)簽上通過(guò)加事件引入js代碼
<button onclick="js代碼">按鈕</button>
注釋方式
單行注釋://注釋內(nèi)容
多行注釋:
/*
注釋內(nèi)容
*/
輸出方式
警告框:alert()
向文檔內(nèi)部寫(xiě)入內(nèi)容:document.write(內(nèi)容)
控制臺(tái)日志輸出:console.log()
變量與數(shù)據(jù)類型
數(shù)據(jù)類型
基本數(shù)據(jù)類型
字符串類型 string
數(shù)字類型 number
布爾類型 Boolean:true / false
null
undefined
復(fù)合(引用)數(shù)據(jù)類型:對(duì)象
變量
變量命名規(guī)范:
1.必須以字母、下劃線、美元符號(hào)$開(kāi)頭,后面以是字母概荷、下劃線、美元符號(hào)或數(shù)字碌燕。
2.變量區(qū)分大小寫(xiě)
3.變量名不能使用關(guān)鍵字和保留字
聲明變量:var 變量名
初始化變量:var 變量名 = 變量值;
如:var a = 10误证;
變量的值可以任何一種類型
運(yùn)算符
賦值運(yùn)算符:= 一個(gè)等號(hào),把右側(cè)的值賦值給左側(cè)變量
算術(shù)運(yùn)算符
加號(hào)+:
1.加法運(yùn)算 加號(hào)兩側(cè)同時(shí)為數(shù)字,進(jìn)行加法運(yùn)算
2.字符拼接 加號(hào)兩側(cè)的任何一側(cè)為字符串修壕,表示字符串拼接 得到結(jié)果是字符串類型
減號(hào)-
乘號(hào)
除號(hào)/
取余%
1.對(duì)應(yīng)算術(shù)運(yùn)算符號(hào)兩側(cè)同時(shí)為數(shù)字時(shí)進(jìn)行對(duì)應(yīng)運(yùn)算愈捅。
2.符號(hào)兩側(cè)的任何一側(cè)為非數(shù)字,運(yùn)算時(shí)會(huì)把該側(cè)強(qiáng)制轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算慈鸠,轉(zhuǎn)換成功進(jìn)行對(duì)應(yīng)算術(shù)運(yùn)算改鲫,轉(zhuǎn)換不成功,得到結(jié)果NaN(Not a Number)
+=
-=
*=
/=
%=
例如:
var a = 10;
a += 2像棘; --->a = a + 2
自增與自減
a++
++a
a--
--a
a++
++a
等價(jià)于 a = a + 1
比較運(yùn)算符(關(guān)系運(yùn)算符)
大于 >
小于 <
等于 ==
不等于 !=
大于等于 >=
小于等于 <=
恒等 ===
返回值:布爾值 true / false
邏輯運(yùn)算符
邏輯與 &&
true && true --->true
true && false --->false
false && true --->false
false && false --->false
邏輯與&&兩側(cè)同時(shí)為真才為真稽亏,其他情況都為假
邏輯或 ||
true || true --->true
true || false --->true
false || true --->true
false || false --->false
邏輯或||兩側(cè)同時(shí)為假才為假,其他情況都為真
邏輯非 !
!true -->false
!false -->true
非真即假缕题,非假即真
檢測(cè)數(shù)據(jù)類型
typeof(待檢測(cè)的數(shù)據(jù))
typeof 待檢測(cè)的數(shù)據(jù)
window對(duì)象的方法
alert() 警告框 無(wú)返回值
confirm() 確認(rèn)對(duì)話框 有返回值
返回值:布爾值
點(diǎn)擊【確認(rèn)】按鈕截歉,返回true,點(diǎn)擊【取消】按鈕烟零,返回false
prompt(提醒文本瘪松,【默認(rèn)】) 提示輸入對(duì)話框
返回值:字符串 / null
點(diǎn)擊【確認(rèn)】按鈕,返回輸入框中的值(字符串類型)锨阿,點(diǎn)【取消】按鈕宵睦,返回null
分支
單分支
if(條件){
語(yǔ)句;
}
如果條件成立,執(zhí)行語(yǔ)句
雙分支
if(條件){
語(yǔ)句1;
}else{
語(yǔ)句2;
}
條件成立(true)墅诡,執(zhí)行語(yǔ)句1壳嚎,條件不成立(false)執(zhí)行語(yǔ)句2.
多分支
if(條件1){
語(yǔ)句1;
}else if(條件2){
語(yǔ)句2末早;
}
...
else{
語(yǔ)句;
}
如果條件1成立(true),執(zhí)行語(yǔ)句1烟馅;否則,看條件2是否成立然磷,如果條件2成立(true),執(zhí)行語(yǔ)句2郑趁,否則.... 如果條件1,條件2姿搜,.... 均不成立寡润,執(zhí)行else后的語(yǔ)句
一般常用來(lái)做區(qū)間段的判斷,也可以用來(lái)做等值判斷
等值判斷 只能做等值判斷
switch(表達(dá)式){
case 常量1:
語(yǔ)句1舅柜;
break;
case 常量2:
語(yǔ)句2悦穿;
break;
....
default:
語(yǔ)句;
}
如果表達(dá)式值是常量1,執(zhí)行語(yǔ)句1业踢,否則,看表達(dá)式的值是否是常量2礁扮,如果是常量2知举,執(zhí)行語(yǔ)句2,否則... 如果表達(dá)式的值不是常量1太伊,常量2雇锡,... ,執(zhí)行default后的語(yǔ)句。
注:
常量必須是整數(shù)類型或字符串類型
循環(huán)
while循環(huán)
while(循環(huán)條件){
循環(huán)操作;
}
循環(huán)條件成立僚焦,執(zhí)行循環(huán)操作(可能被執(zhí)行多次)
特點(diǎn):先判斷锰提,后執(zhí)行
最少執(zhí)行0次
do-while循環(huán)
do{
循環(huán)操作;
}while(循環(huán)條件);
先執(zhí)行一次循環(huán)操作,再判斷循環(huán)條件是否成立,條件成立立肘,再次執(zhí)行循環(huán)操作.
特點(diǎn):先執(zhí)行,再判斷
不管條件是否成立,至少執(zhí)行一次舅踪。
for循環(huán)
for(初始化變量 ; 循環(huán)條件 ; 變量更新){
循環(huán)操作;
}
循環(huán)條件成立绕沈,執(zhí)行循環(huán)操作。
特點(diǎn):先判斷融蹂,再執(zhí)行旺订。
最少執(zhí)行0次
執(zhí)行順序:初始化變量 ---> 循環(huán)條件(true) ---> 循環(huán)操作 ---> 變量更新
跳轉(zhuǎn)語(yǔ)句
break:一般用在循環(huán)內(nèi),跳出整個(gè)循環(huán) 循環(huán)停止
continue:一般用在循環(huán)內(nèi),跳出當(dāng)前循環(huán) 循環(huán)進(jìn)入下一輪
數(shù)組
增刪改查
IndexOf(A): 在數(shù)組里面查找A元素所在的下標(biāo) 0開(kāi)始
push(A): 把A添加的數(shù)組最后面
pop(): 刪除數(shù)組最后一個(gè)
unshift(A): 把A添加到數(shù)組的最前面
shift(): 刪除數(shù)組的第一個(gè)元素
splice(A,B): 刪除數(shù)組中的B個(gè)元素從A下標(biāo)開(kāi)始
splice(A,B,C): 刪除數(shù)組中的B個(gè)元素從A下標(biāo)開(kāi)始 再添加C元素
合并
A.concat(B): 把B合并在A的后面
創(chuàng)建數(shù)組
var arr = new Array()
var arr = [....]
length 數(shù)組長(zhǎng)度
sort()排序
function asc(a,b){if(a>b){return 1}esle{return-1}}
function desc(a,b){if(a>b){return -1}esle{return 1}}
str.split("分隔符") 將字符分割為數(shù)組
arr.join(“連接符”) 將數(shù)組連接為字符串
arr.reverse() 反轉(zhuǎn)
對(duì)象
定義:多個(gè)鍵值對(duì)應(yīng)的集合,鍵是不重復(fù)
創(chuàng)建
var obj1 = new Object()
var obj2 = {....}
訪問(wèn)
obj.key
obj["key"]
寫(xiě)入
obj.key=value
obj["key"]=value
屬性也可以是函數(shù)
obj.key = function(){};
訪問(wèn) obj.key();
遍歷
for(var key of arr){
console.log("鍵:",key);
console.log("值:",obj[key])
}
json
定義:javascript對(duì)象表現(xiàn)方式超燃,本質(zhì)是字符串
前后端傳遞數(shù)據(jù)通常用json字符串格式
值:null区拳,true,false 意乓,Object樱调,String,Array,Number
JSON.stringify(obj) 把obj對(duì)象轉(zhuǎn)換為json字符串
JSON.parse(str) 把字符串轉(zhuǎn)換為javascript對(duì)象
DOM
選擇器
document.getElementById(id): 通過(guò)id來(lái)獲取html元素 單個(gè)
document.getElementsByTageName(tag): 通過(guò)tag標(biāo)簽名來(lái)獲取html元素(累數(shù)組 多個(gè))
document.getElementsByName(class): 通過(guò)class類名來(lái)獲取html元素(累數(shù)組 多個(gè))
document.querySelectorAll(css選擇器): 通過(guò)css選擇器來(lái)獲取html元素(累數(shù)組 多個(gè))
document.querySelectorcss(css選擇器): 通過(guò)css選擇器來(lái)獲取html元素(單個(gè))
獲取和改變層的內(nèi)容
獲取
innerHTML : 獲取元素的內(nèi)容 包括標(biāo)簽
innerText: 獲取元素的內(nèi)容 過(guò)濾標(biāo)簽
改變
innerHTML:設(shè)置元素的html內(nèi)容
innerText: 設(shè)置元素的文本內(nèi)容
定義
當(dāng)瀏覽器去解析html標(biāo)簽完畢后會(huì)生成一個(gè)dom樹(shù)形構(gòu)
會(huì)有三種類型節(jié)點(diǎn):
元素類型
文本類型
屬性類型
節(jié)點(diǎn)之間會(huì)用關(guān)系
父子
兄弟
附:
操作html有三種方式
html方式
Dom 核心方式
xml方式
屬性操作
getAttribute(屬性名)
setAttribute(屬性名,屬性值)
創(chuàng)建
createElement(標(biāo)簽名)
添加
parent.append(被添加的元素)
parent.insertBefore(被提交的元素洽瞬,在之前)
刪除
parent.removeChild(被刪除的元素)
節(jié)點(diǎn)關(guān)系
parentElement: 父元素節(jié)點(diǎn)
Children: 子節(jié)點(diǎn)
lastElementChild: 最后一個(gè)子節(jié)點(diǎn)
firstElementChild: 第一個(gè)子節(jié)點(diǎn)
nextElementSibling:下一個(gè)兄弟子節(jié)點(diǎn)
previousElementSibling : 上一個(gè)兄弟子節(jié)點(diǎn)
其他關(guān)系節(jié)點(diǎn)
parentNode: 父節(jié)點(diǎn)
firstChild: 第一個(gè)子節(jié)點(diǎn)
lastChild : 最后一個(gè)子節(jié)點(diǎn)
nextElementSibling : 下一個(gè)兄弟子節(jié)點(diǎn)
節(jié)點(diǎn)類型
nodeType:節(jié)點(diǎn)的類型
3 文本節(jié)點(diǎn)
1 元素節(jié)點(diǎn)
nodeValue : 節(jié)點(diǎn)的值
nodeName : 節(jié)點(diǎn)的名稱
table表格操作
table.insertRow(0) :插入行
tr.insertCell(0):插入列
tr.rowIndex :獲取是第幾行
table.deleteRow(index): 刪除行
間隔調(diào)用
setInterval(fn本涕,time)
clearInterval()
延遲調(diào)用
setTimeout(fn;time)
clearTimeout()
事件
onclick
focus 獲取焦點(diǎn)
blur 失去焦點(diǎn)
submite 提交
window
screen : 屏幕
width : 寬
height : 高
availWidth 可用寬
availWidth 可用高
history: 歷史記錄
back()后退
forWard()前進(jìn)
go(2)前進(jìn)兩步
go(-3) 后退三步
length 歷史記錄的長(zhǎng)度
location
屬性: href地址
方法
reload()刷新
assign() 跳轉(zhuǎn) 有歷史記錄
replace()跳轉(zhuǎn) 沒(méi)有歷史記錄
location.href=" ";
navigator
useAgent 瀏覽器頭信息 : 可識(shí)別當(dāng)前瀏覽器是什么瀏覽器
open(url伙窃,name菩颖,feature): 打開(kāi)一個(gè)新窗口
url 打開(kāi)的地址
name 窗口名稱
feature “ width=100,height=100,top=100,left = 100”
js css
行內(nèi)樣式: el.style.fontSize="18px"
傳統(tǒng)class改變: el.className="red",設(shè)置元素的類名為red
classList
add()添加
remove()刪除
toggle()切換
獲取到css最終值
document.defaultView.getComputedStyle(el,null).css屬性
css中高度獲取
clientHeight 元素內(nèi)容的高
offsetHeight 元素內(nèi)容+邊框的高
scrollHeight 元素內(nèi)容+滾動(dòng)區(qū)域的高
滾動(dòng)距離獲取
scrollTop 元素滾動(dòng)頂部的距離
scrollLeft 元素滾動(dòng)左側(cè)的距離
元素在頁(yè)面中個(gè)位置
el.getBoundingClientRect()
top : 距瀏覽器可視區(qū)域頂部的距離
left
width
height
el.offsetTop
e.offsetLeft
距離已定位的父親(body)元素距離
事件
事件
事件流:冒泡为障、捕獲
阻止冒泡
e.stopPropagation()
阻止默認(rèn)事件
e.preventDefault()
常用事件
鍵盤(pán)
onkeydown:按下
onkeyup:彈起
onkeypress:鍵盤(pán)按下
窗口
onscroll:滾動(dòng)
onresize:調(diào)整大小
onload:加載
onunload:卸載
鼠標(biāo)
右鍵菜單:oncontextMenu
鼠標(biāo)滾動(dòng):onmousewheel
wheelDelta
向下 -150
向上 150
鼠標(biāo)拖放
ondragstart:開(kāi)始拖動(dòng)
ondragover:拖放在元素上面
ondrop:拖放松開(kāi)
鼠標(biāo)單擊 onclick
雙擊 ondblclick
鼠標(biāo)經(jīng)過(guò) onmouseover
鼠標(biāo)離開(kāi) onmouseout
表單
onchange表單發(fā)生改變
onblur 失去焦點(diǎn)
onfocus 獲取焦點(diǎn)
onsubmit 提交
事件參數(shù)
target 目標(biāo)
srcElement事件元素
x,y
pageX:相對(duì)于頁(yè)面的偏移
client:相對(duì)于視口的偏移
offset:相對(duì)于當(dāng)前元素的偏移
wheelDelta:鼠標(biāo)滾動(dòng)值(判斷方向)
keyCode鍵盤(pán)值:是哪個(gè)鍵被按下了
stopPropagation():阻止事件冒泡
preventDefault():阻止默認(rèn)事件
拖動(dòng)事件的參數(shù)
dataTransfer數(shù)據(jù)傳遞器
setData(k,v):設(shè)置傳輸數(shù)據(jù)
getData(k):獲取傳輸數(shù)據(jù)
事件的綁定
1 html標(biāo)簽 調(diào)用:
< div onclick="func()">
2.script DOM 1 級(jí):
el.onclick=function(e){} 匿名
el.onclick=fun; 函數(shù)名式:
function fun(){}
3.script DOM2
el.addEventListener("click",function(){})
el.addEventListener("click",fun);
function fun(){}
區(qū)別
標(biāo)簽調(diào)用 可操作性小晦闰, 方便理解
DOM1 后面的調(diào)用與前面代碼一致,會(huì)覆蓋前面
DOM2 最好:
1.控制事件冒泡捕獲
2.可以取消綁定
匿名函數(shù)式 復(fù)用性低
本地存儲(chǔ)
cookie:
1. 保存在客戶的小量數(shù)據(jù)(2k)
2. 有時(shí)間限制 會(huì)過(guò)期
3. 服務(wù)器端可以修改鳍怨,瀏覽器端(前端)也可以修改
4. 每次發(fā)送http請(qǐng)求都會(huì)攜帶cookie
5. cookie有域名限制呻右,只能獲取同一個(gè)域名的cookie
cookie
名稱=值:name=value;
過(guò)期時(shí)間=日期:;expires = d;
訪問(wèn)路徑=路徑:;path=/;
sessionStorage
localStorage
|本地存儲(chǔ)
定義
1. 可以存5M內(nèi)容 (各瀏覽器不一樣)
2. 不會(huì)過(guò)期,不會(huì)銷毀
3. 不會(huì)被發(fā)送到服務(wù)器
4. api完善 操作簡(jiǎn)單
setItem(name,value):存儲(chǔ)數(shù)據(jù)
getItem(name):獲取本地?cái)?shù)據(jù)
removeItem(name):刪除本地?cái)?shù)據(jù)
clear():清空當(dāng)前域名所有本地?cái)?shù)據(jù)
類型隱式轉(zhuǎn)換:布爾值
定義:當(dāng)非布爾類型的數(shù)據(jù)要參與布爾運(yùn)算時(shí)候會(huì)被自動(dòng)換行為布爾
數(shù)字
0 為false
非0 為true
字符串
空 為false
非空 為true
undefined 轉(zhuǎn)為false
null 轉(zhuǎn)換為false
數(shù)組 都會(huì)被轉(zhuǎn)換為true
函數(shù)的參數(shù)有形參鞋喇,沒(méi)有實(shí)參 運(yùn)行的時(shí)候 值為undefined 轉(zhuǎn)布爾為false
類型隱式轉(zhuǎn)換声滥,轉(zhuǎn)字符串
類型隱式轉(zhuǎn)換,轉(zhuǎn)數(shù)字
字符串模板
定義用 ``
變量用 ${變量名}
sessionStorage
功能與方法與localStorage一致但是關(guān)閉瀏覽器 數(shù)據(jù)清空
正則RegExp
作用
匹配侦香,捕獲有規(guī)律的字符串
創(chuàng)建
表達(dá)式 /表達(dá)式/
實(shí)例化Reg new RegExp(表達(dá)式,修飾符)
正則修飾符
g 全局匹配
i 忽略大小寫(xiě)
m 多行
正則的方法
re.test(str):字符串是否匹配正則
re.exec(str) :匹配捕獲匹配到字符串
匹配到字符串
index:字符串所在字符的下標(biāo)
input:字符串
如果re是全局正則落塑,exec可以循環(huán)執(zhí)行多次 匹配不到返回null
字符串與正則相關(guān)方法
match
非全局:
匹配到字符串
index:字符串所在字符的下標(biāo)
input:字符串
全局
返回一個(gè)匹配到的字符串?dāng)?shù)組
replace(正則,新的的字符):$0-$1
正則元字符
\d 數(shù)字
\w 0-9 a-z A-Z _
\s 空白 空格
\D 非\d 除了數(shù)字
\W 除了\w
\S 除了\s
. 任意字符(除了\n之外)
\ 轉(zhuǎn)義特殊字符
| 或者
() 分組
\n 換行
\b : 匹配邊界 字符串的開(kāi)頭和結(jié)尾 空格的兩邊都是邊界 =>不占用字符串位數(shù)
^ : 限定開(kāi)始位置 => 本身不占位置
$ : 限定結(jié)束位置 => 本身不占位置
[a-z] : 任意字母 []中的表示任意一個(gè)都可以
[^a-z] : 非字母 []中^代表除了
[abc] : abc三個(gè)字母中的任何一個(gè) [^abc]除了這三個(gè)字母中的任何一個(gè)字符
正則次數(shù)
? 0次或者1次
* 0次或者多次
+ 一次或者多次
{n} : 正好n次;
{n,} : n到多次
{n,m} : n次到m次
boostrap
引入文件
1. bootstrap.css
2. jquery
3.bootstrap.js