JS篇

打開網(wǎng)頁讓網(wǎng)頁顯示某個(gè)內(nèi)容:

alert("hello world");

打開網(wǎng)頁顯示對話框可以輸入內(nèi)容:

prompt("請輸入內(nèi)容:");

打開網(wǎng)頁顯示一個(gè)確認(rèn)的對話框:

confirm("你好嗎?");

在HTML網(wǎng)頁中寫入某個(gè)內(nèi)容:

document.write("hello world2");

在控制臺顯示內(nèi)容:

console.log("hello world3");

console.error("錯(cuò)誤信息");

console.warn("警告信息");

定義變量名稱

var num;

var num1, num2, num3;

定義函數(shù)

function 函數(shù)名(形參1腹尖,形參2...){

return 返回值;

}

獲取元素函數(shù);

document.getElementById(id) 用id去獲取

document.querySelector(css3選擇器) 用CSS3選擇器去獲取

document.querySelectorAll(CSS3選擇器) 用CSS3選擇器去獲取

document.querySelectorAll 如果想要取多個(gè)元素中的某個(gè)元素秽浇,就寫值[n]

n為多少偷溺,就取那個(gè)值酒来,這個(gè)值從0開始。

備注:id和CSS3選擇器都需要加引號

在控制臺輸出內(nèi)容醋拧,主要用來調(diào)試代碼

console.log()

事件函數(shù);

onclick() 點(diǎn)擊元素時(shí)候觸發(fā)

onmouseover 鼠標(biāo)移到元素上觸發(fā)

onmouseout 鼠標(biāo)從元素移走觸發(fā)

事件函數(shù)的格式

元素.onclick=function(){

這里寫處理代碼

};

頁面加載完后的函數(shù):

window.onload 頁面里所有內(nèi)容加載完成就觸發(fā)這個(gè)事件

格式

window.onload = function(){

這里寫處理代碼

};

驗(yàn)證值類型的函數(shù):

typeof(數(shù)據(jù))糜工;

instanceof(數(shù)據(jù));

把其他類型數(shù)據(jù)轉(zhuǎn)化成數(shù)字(整數(shù)):

parseInt(數(shù)據(jù));

或者Number(數(shù)據(jù));

parseFloat(數(shù)據(jù));(浮點(diǎn)型數(shù)字)

檢測值是不是NaN:

isNaN()

轉(zhuǎn)布爾值:

Boolean(數(shù)據(jù))

轉(zhuǎn)字符串:

String(數(shù)據(jù))

備注:alert,document.write會把數(shù)據(jù)強(qiáng)行轉(zhuǎn)化成string

取非行間樣式

IE7 低版本方法 obj.currentStyle[attr] attr就是要取的某個(gè)對象的具體樣式值

高版本方法 getComputedStyle(obj,false)[attr]

JS數(shù)組添加刪除函數(shù)

push(元素) 從尾部添加

unshift(元素) 從頭部添加

pop() 從尾部彈出

shift() 從頭部彈出

從中間添加刪除函數(shù)

splice(開始,長度惠拭,元素...)

先刪除,后插入

刪除

splice(開始庸论,長度)

插入

splice(開始,0职辅,元素..)

JS中sort只能認(rèn)識字符串,數(shù)字排序方法:

obj.sort(function(n1,n2){ return n1-n2;};

JS定時(shí)器函數(shù)

開啟定時(shí)器

setInterval(函數(shù),時(shí)間單位是毫秒) 間隔型 無限執(zhí)行

setTimeout(函數(shù)聂示,時(shí)間單位是毫秒)? 延時(shí)型 只執(zhí)行一次

停止定時(shí)器

clearInterval()

clearTimeout()

備注:關(guān)閉定時(shí)器方法

timer=serInterval()

clearInterval(timer)

JS獲取系統(tǒng)時(shí)間

Date對象

getHours getMinutes gerSeconds

字符串的解決低版本瀏覽器兼容問題

charAt()

獲取系統(tǒng)的年月日星期等元素函數(shù)

getFullYear() 年

getMonth() 月

getDate() 日

getDay() 星期

DOM基礎(chǔ)

childNodes DOM尋找子節(jié)點(diǎn)函數(shù) 可用children代替

nodeType DOM中判斷節(jié)點(diǎn)的類型 1是元素節(jié)點(diǎn) 3是文本節(jié)點(diǎn)

parentNode DOM中尋找父節(jié)點(diǎn)

offsetParent DOM尋找實(shí)際位置定位的父節(jié)點(diǎn)

DOM方式操作元素屬性

獲取 getAttribute(名稱)

設(shè)置 setAttribute(名稱域携,值)

刪除 removerAttribute(名稱)

DOM創(chuàng)建標(biāo)簽

document.createElement('標(biāo)簽名')

給某個(gè)標(biāo)簽添加子節(jié)點(diǎn)

標(biāo)簽名.appendChild(值)

插入元素

insertBefore(值,在哪個(gè)標(biāo)簽前插入)

文檔碎片(低版本瀏覽器提高DOM操作性能)

document.createDocumentFragment()

轉(zhuǎn)換成小寫字母

toLowerCase()

模糊搜索函數(shù)

search(值)備注:判斷值是否等于-1就可以做到模糊搜索

JS取絕對值

Math.abs()

向上取整

Math.cell()

向下取整

Math.floor()

JS中取代offsetLeft的函數(shù):

function getStyle(obj,name){

if(obj.currentStyle){

return obj.currentStyle[name];

}

else{

return getComputedStyle(obj,false)[name];

}

};

四舍五入取整函數(shù)

Math.round()

事件綁定(避免企業(yè)開發(fā)中代碼覆蓋造成BUG)

IE

attachEvent(事件名稱鱼喉,函數(shù)) 綁定事件

detachEvent(事件名稱秀鞭,函數(shù)) 解除綁定

備注:attachEvent事件名稱要帶on

DOM方式(針對chrome和FF)

addEventListener(事件名稱,函數(shù)扛禽,false)

removeEventListener(事件名稱锋边,函數(shù),false)

備注:addEventListener事件名稱不要帶on,用jQuery寫法旋圆。

事件捕獲

SetCapture()讓網(wǎng)頁中其他元素的所有事件變成你設(shè)置的那個(gè)事件

cookie使用方法

設(shè)置cookie

function setCookie(name,value,Day){

var oDate=new Date();

oDate.setDate(oDate.getDate()+Day);

document.cookie=name+"="+value+";expires="+oDate;

}

獲得cookie

function getCookie(name){

var arr=document.cookie.split("; ");

for(var i=0;i<arr.length;i++)

{ var arr2=arr[i].split("=");

if(arr2=name){

return arr2[1]

}

}else{

return "";

}

}

刪除cookie

function removeCookie(name){

document.cookie(name,1,-1);

}

正則表達(dá)式

search

字符串搜索

i-忽略大小寫

match

\d 找一個(gè)數(shù)字 /d/d找兩個(gè)數(shù)字 /d+找多個(gè)數(shù)字

g-全部找出

replace

\d 數(shù)字 = [0-9]

\w 英文,數(shù)字麸恍,下劃線 = [a-z0-9_]

\s 空白字符

\D 非數(shù)字 = [^0-9]

\W 非英文灵巧,數(shù)字,下劃線 = [^a-z0-9_]

\S 非空白字符

{n} 正好出現(xiàn)n次

{n,m} 最少n次抹沪,最多m次

{n,} 最少n次刻肄,最多不限制

+ = {1,} 相當(dāng)于最少1次,最多不限制

? = {0,1} 表示可有可無

* = {0,} 相當(dāng)于最少0次融欧,最多不限制

^ 字符串行首

$ 字符串行尾

/^\w+@[a-z0-9]+\.[a-z]+$/i 郵箱正則表達(dá)式

JS這塊可以說是前端開發(fā)的重中之重了敏弃,反正前端能力怎么樣就是看你的JS能力,JS這方面也是最難學(xué)的噪馏,內(nèi)容多麦到,需要理解,不適用死記硬背欠肾,特別的其中的原型瓶颠,繼承,this等等刺桃,都是需要理解而不是去背的東西粹淋。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子桃移,更是在濱河造成了極大的恐慌屋匕,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件借杰,死亡現(xiàn)場離奇詭異过吻,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)第步,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進(jìn)店門疮装,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人粘都,你說我怎么就攤上這事廓推。” “怎么了翩隧?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵樊展,是天一觀的道長。 經(jīng)常有香客問我堆生,道長专缠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任淑仆,我火速辦了婚禮涝婉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蔗怠。我一直安慰自己墩弯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布寞射。 她就那樣靜靜地躺著渔工,像睡著了一般。 火紅的嫁衣襯著肌膚如雪桥温。 梳的紋絲不亂的頭發(fā)上引矩,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天,我揣著相機(jī)與錄音侵浸,去河邊找鬼旺韭。 笑死,一個(gè)胖子當(dāng)著我的面吹牛掏觉,可吹牛的內(nèi)容都是我干的茂翔。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼履腋,長吁一口氣:“原來是場噩夢啊……” “哼珊燎!你這毒婦竟也來了惭嚣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤悔政,失蹤者是張志新(化名)和其女友劉穎晚吞,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谋国,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡槽地,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芦瘾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捌蚊。...
    茶點(diǎn)故事閱讀 40,498評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖近弟,靈堂內(nèi)的尸體忽然破棺而出缅糟,到底是詐尸還是另有隱情,我是刑警寧澤祷愉,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布窗宦,位于F島的核電站,受9級特大地震影響二鳄,放射性物質(zhì)發(fā)生泄漏赴涵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一订讼、第九天 我趴在偏房一處隱蔽的房頂上張望髓窜。 院中可真熱鬧,春花似錦欺殿、人聲如沸寄纵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽擂啥。三九已至哄陶,卻和暖如春帆阳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背屋吨。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工蜒谤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人至扰。 一個(gè)月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓鳍徽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親敢课。 傳聞我的和親對象是個(gè)殘疾皇子阶祭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5绷杜? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,513評論 1 45
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品濒募,去做同樣的事情鞭盟,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,777評論 2 17
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點(diǎn)這里 看全部問題和答案點(diǎn)這里 本文由我...
    自you是敏感詞閱讀 763評論 0 3
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化瑰剃,入門級到專家級齿诉,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,588評論 0 7