一、JavaScript
JavaScript——》ECMAScript+BOM+DOM
ECMAScript:Js語法規(guī)范
BOM：瀏覽器對象模型
DOM：文檔對象模型
1亏钩、BOM——》以window（窗口）為對象進(jìn)行對話
window.open('URL')——》新建窗口打開URL網(wǎng)頁
window.close()——》關(guān)閉當(dāng)前網(wǎng)頁
window.setTimeOut(事件(一般是函數(shù)）欺旧，時間間隔（單位是毫秒）)——》延時多少毫秒后執(zhí)行事件；var aaa=window.setTimeOut(事件(一般是函數(shù)）彻坛，時間間隔（單位是毫秒）)
window.setInterval(一般是函數(shù)）踏枣，時間間隔（單位是毫秒）)——》間隔多少毫秒執(zhí)行一次事件钙蒙；
window.clearInterval(變量名)/window.clearInterval(變量名)——>停止計(jì)時器命令,括號內(nèi)跟變量名,所以如果要使用停止命令,則需要對計(jì)時命令進(jìn)行變量命名;例如:window.clearInterval(aaa)
window.location——》用于獲取當(dāng)前頁面地址，配合document.write()使用可在當(dāng)前頁面顯示地址信息马昨，例如document.write(window.location)
window.location.hostname——》獲取當(dāng)前頁面域名
window.location.pathname——》獲取當(dāng)前頁面路徑和文件名
window.location.port——》獲取...端口
window.location.protocol——》獲取...協(xié)議（http或者h(yuǎn)ttps）
window.location.href——》獲取...頁面地址
window.location.assign('')——》加載括號文檔
window.history.back()——>返回上一個歷史頁面
window.history.forward()——>進(jìn)入下一個歷史頁面
window.navigator ——>獲取包含訪問者在內(nèi)的瀏覽器信息
new date() ——>獲取當(dāng)前時間
========================================
JS在瀏覽器中創(chuàng)建三個消息框:警告框/確認(rèn)框/提示框
window.alert('...')——>警告框,框中有確認(rèn)按鈕和括號內(nèi)容
window.confirm('...')——>確認(rèn)框,框中有確認(rèn)和取消按鈕以及括號內(nèi)容
window.prompt('...','默認(rèn)值')——>提示框,框中需要用戶輸入內(nèi)容并點(diǎn)擊確認(rèn)按鈕才可進(jìn)行下一步操作;
2、DOM——>HTML
1屹篓、獲取HTML元素(標(biāo)簽)
注明:使用JS對HTML元素進(jìn)行修改時,需要獲取其元素
a匙奴、通過ID獲取
b、通過標(biāo)簽名獲取
c谍肤、通過類名
目前總共有5種獲取元素的方式
通過document對象獲取頁面元素（標(biāo)簽）的常用方法有5個哗伯；
1、document.getElementById('...')——》通過ID獲取單個元素,不需要加#焊刹；
2.document.getElementsByTagName('...')——>通過標(biāo)簽名獲取標(biāo)簽的列表(偽列表);后面跟[x]可獲取列表中下標(biāo)對應(yīng)的單個元素;
3.document.getElementsByClassName('...')——>通過類名獲取標(biāo)簽的列表;
4.document.querySelector('...')——>通過樣式表選擇器獲取單個元素;括號里可以是標(biāo)簽名虐块、類名、ID非凌；
5.document.querySelectorAll('...')——>通過樣式表選擇器獲取元素的列表(偽列表);括號里可以是標(biāo)簽名、類名颁糟、ID喉悴；
2、修改HTML元素屬性
a箕肃、innerHTML——>修改元素內(nèi)容
將獲取的元素實(shí)現(xiàn)設(shè)置為一變量,再對變量就行修改
如: var aaa=document.querySelector('')
aaa.innerHTML='新內(nèi)容'
b、textcontent——>修改元素內(nèi)容
注意:innerHTML能識別新內(nèi)容中的實(shí)體替換字符
例如: 空格字符,會以空格呈現(xiàn)在內(nèi)容中
但是textcontent不能識別實(shí)體替換符,例如 會以 呈現(xiàn),而不是空格;
c障贸、其他屬性 attribute
例如img標(biāo)簽的src屬性,a標(biāo)簽的href屬性,還有標(biāo)簽的name,value等等屬性;
3吟宦、修改CSS樣式
修改CSS樣式語法同修改HTML元素屬性
a、先獲取某個標(biāo)簽,并賦予一變量;
var aaa=document.querySelector('')
b袁波、選擇要修改的樣式屬性并賦新值;
aaa.style.property='新值'
例如:修改文本顏色:aaa.style.color='blue'
修改字體大小:aaa.style.fontSize='18px'
注意:JS標(biāo)簽中的屬性名都是駝峰式命名方法,跟style標(biāo)簽中的屬性名不一樣;變量名后面必跟style;
4、事件 event
我們可以對HTML的元素和標(biāo)簽的內(nèi)容和屬性進(jìn)行修改;也可將修改屬性這個事件綁定在其他觸發(fā)事件上,
觸發(fā)事件包含但不限于:mouseover ——鼠標(biāo)劃過
mouseout——鼠標(biāo)離開
mousedown——鼠標(biāo)按下
mouseup——鼠標(biāo)松開
mousemove——鼠標(biāo)移動
keydown——鍵盤按下
keyup——鍵盤彈起
例如 <h1 onmousedown='this.style.color='red'' onmouseup='this.style.color='white''>人生苦短 我用Python</h1>
效果是鼠標(biāo)按下,字體變紅,鼠標(biāo)彈起,字體變白;
注意:this相當(dāng)于Python中的self;
5睡蟋、事件監(jiān)聽 addEventListener()
當(dāng)我們需要在觸發(fā)事件發(fā)生時修改某個標(biāo)簽屬性,就需要監(jiān)聽此標(biāo)簽的觸發(fā)事件;
格式: element.addEventListener(觸發(fā)事件event,修改屬性事件function(){},true/false(默認(rèn)是false))
elementmen——某個標(biāo)簽,一般是一個變量,即先獲取標(biāo)簽并將其賦值給一個變量;
觸發(fā)事件——即本監(jiān)聽的事件,一般指的就是鼠標(biāo)點(diǎn)擊/移動,鍵盤點(diǎn)擊事件,例如'click','mousedown'
修改屬性事件——一般是一個回調(diào)函數(shù);當(dāng)觸發(fā)事件發(fā)生,即執(zhí)行回調(diào)函數(shù);
true/false——當(dāng)事件發(fā)生時,執(zhí)行的回調(diào)函數(shù)會有捕獲/冒泡現(xiàn)象發(fā)生;
冒泡:參數(shù)值為false,默認(rèn)參數(shù)為false; 子標(biāo)簽執(zhí)行回調(diào)函數(shù)后,其父標(biāo)簽也會隨后執(zhí)行回調(diào)函數(shù),然后是其父父標(biāo)簽,由內(nèi)向外傳,傳至<body>標(biāo)簽為止;
捕獲:參數(shù)值為true;與冒泡執(zhí)行函數(shù)的順序相反,由外到內(nèi)傳,由<body>傳至當(dāng)前標(biāo)簽;
注意:冒泡和捕獲現(xiàn)象發(fā)生的前提是父標(biāo)簽們對同一個觸發(fā)事件也進(jìn)行了監(jiān)聽,并有相應(yīng)的回調(diào)函數(shù)執(zhí)行;
阻止冒泡/捕獲——>在回電函數(shù)中加入代碼串——evt/this.stopPropagation;
刪除事件監(jiān)聽:
格式:element.removeEventListener(event,function)
目的:刪除某元素的某個觸發(fā)事件發(fā)生時會執(zhí)行相應(yīng)回調(diào)函數(shù)的功能;
6戳杀、元素的增刪改
a/增加子標(biāo)簽 appendChild()
第一步:創(chuàng)建新標(biāo)簽/元素 var aa=document.createElement('...') 括號內(nèi)跟標(biāo)簽名(p/img/a/div/li/h1-h6)
第二步:將其添加至父元素里面 bb.document.appendChild(aa) 將aa創(chuàng)建的標(biāo)簽添加至bb父標(biāo)簽中
注意:insertBefore(子元素,位置)也能添加子元素,appendChild()是將子元素添加在父元素下的最后面,insertBefore()能將子元素添加在任何位置;
例如: bb.document.insertBefore(aa,bb.firstChild)
b/刪除子標(biāo)簽
第一步:獲取要被刪除的標(biāo)簽 var aa=document.getElementById('...') 獲取被刪子元素賦值給aa
第二步:以其父元素的身份執(zhí)行刪除命令 bb.document.removeChild(aa) 在父元素bb中執(zhí)行刪除命令
c/替換子標(biāo)簽
第一步:獲取新舊子元素
第二步:在父元素中執(zhí)行替換命令
例如:cc.documen.replaceChild(aa,bb) ——用bb元素替換cc中的aa子元素
d/修改標(biāo)簽屬性和內(nèi)容詳見######1/2
三豺瘤、jQuery
詳見二階段day9-10
jQuery用法詳解
http://www.runoob.com/jquery/jquery-tutorial.html
