第七周
這一周主要學(xué)習(xí)運(yùn)用js做網(wǎng)頁特效
第一天:
1. 節(jié)點(diǎn)?厕九,網(wǎng)頁是有很多的節(jié)點(diǎn)組成的? 。
元素節(jié)點(diǎn) ? 指的是 :? 標(biāo)簽 ? ? li? span ? ? 俊鱼,節(jié)點(diǎn)類型是1
文本節(jié)點(diǎn)并闲,2? ? ? 屬性節(jié)點(diǎn) ? 帝火,3
注釋,8文檔购公,9
父子兄弟節(jié)點(diǎn):parentNodenextSibling
孩子? ? childNodes? ? ? ? nodeType == 1? 來判斷 是否是 元素節(jié)點(diǎn)
children只得到元素節(jié)點(diǎn)
獲取節(jié)點(diǎn)屬性? ? getAttribute(“title”)
設(shè)置節(jié)點(diǎn)屬性? ? setAttribute (“class”,”one”)
刪除節(jié)點(diǎn)屬性? ? removeAttribute(“title”);
2.?日期函數(shù) ? Date();
聲明:? var? date = new Date();
使用:? 獲取日期和時(shí)間
getDate()? ? ? ? ? ? ? ? ? 獲取日 1-31
getDay ()? ? ? ? ? ? ? ? ? 獲取星期 0-6
getMonth ()? ? ? ? ? ? ? ? 獲取月? 0-11
getFullYear () ? ? ? ? ? ? 獲取完整年份(瀏覽器都支持)
getHours () ? ? ? ? ? ? ? 獲取小時(shí) 0-23
getMinutes () ? ? ? ? ? ? ? 獲取分鐘 0-59
getSeconds () ? ? ? ? ? ? ? 獲取秒? 0-59
getMilliseconds ()? ? ? ? ? ? 獲取當(dāng)前的毫秒
getTime () ? ? ? 返回累計(jì)毫秒數(shù)(從1970/1/1午夜)
3. 定時(shí)器
定時(shí)器? 不需要人工操作 ? 按照一定的時(shí)間進(jìn)行某種動作靠瞎。
setInterval(“函數(shù)”,間隔時(shí)間 ) ? 每隔 n秒去執(zhí)行一次函數(shù)?求妹,有周期性。
setTimeout在執(zhí)行一次代碼之后父能,延遲一段時(shí)間再執(zhí)行何吝,沒有周期性。
4.案例
時(shí)鐘瓣喊,倒計(jì)時(shí)黔酥,分時(shí)提醒,日歷
第二天
1. ? 按鈕不可用? ? disabled =? “disabled”? ||? true棵帽;
2.setInterval(“函數(shù)”,間隔時(shí)間 ) ? 每隔 n秒去執(zhí)行一次函數(shù)?岖寞,有周期性柜蜈。
setTimeout在執(zhí)行一次代碼之后,延遲一段時(shí)間再執(zhí)行隶垮,沒有周期性秘噪。
3.遞歸調(diào)用 :? 函數(shù)自己調(diào)用自己? 函數(shù)遞歸調(diào)用 ? arguments.callee? ? 返回的是? 正在執(zhí)行的函數(shù) 本身
4. 邏輯運(yùn)算符 ? 與? &&? 或? || ? 非? ! ? ? ? ? ! > && > ||
a&&b,如果a為假蹋偏,則返回a,如果a為真則返回b威始。
a||b像街,如果a為真則返回a,如果a為假則返回b镰绎。
5.轉(zhuǎn)換為 字符型
var num = 12345;
num+ “”
String(num);
num.toString(); ? 10進(jìn)制
num.toString(2) ? 二進(jìn)制
6.根據(jù)字符位置返回字符
charAt(索引號)獲取相應(yīng)位置的字符
charCodeAt獲取相應(yīng)位置的字符
第三天
1.offset家族
offset ? 自己的 偏移
offsetWidth? ? 得到自己的寬度
offsetHeight
構(gòu)成 : ? width? + ? padding? +? border
div? ? width 200 ? border 3px? ? padding-right: 15px
div? offsetWidth =? ? 200 +? 6? +? 15? =? 221
div.offsetLeft
得到距離 這個(gè) div 最近的 帶有定位的 父 盒子 ? 左邊距離
offsetParent? ? ? 返回自己的父親元素 ? (帶有定位的)
parentNode? ? 這個(gè)返回親父親 不管父親是否帶有定位
style.top ? offsetTop ?的區(qū)別
offsetTop ? 只讀? ? 只可以得到結(jié)果 但是不能賦值
style.top? ? 能得到 (行內(nèi)式 )? ? 但是可以給值
style.top ? 得到的是? 25px
offsetTop ? 得到的是 25
2.event對象畴栖,事件對象
3.鼠標(biāo)事件
onmouseover? ? ? onmouseout ? onclick
onmousemove當(dāng)鼠標(biāo)移動的時(shí)候? ? 就是說吗讶,鼠標(biāo)移動一像素就會執(zhí)行的事件
div.onmousemove = function() { 語句 }
當(dāng)鼠標(biāo)再div 身上移動的時(shí)候,就會執(zhí)行扛门。
補(bǔ)充網(wǎng)址編碼的認(rèn)識。
4.緩動公式星立,通俗理解就是一個(gè)過渡過程绰垂。
5.重點(diǎn)案例
小米手機(jī)和輪播圖
第四天
1.HTML基本訪問方法window-documentdocument.titledocument.headdocument.bodydocument.documentElement(約等于document.html)
2. scrollTop被卷去的頭部劲装,隱藏在屏幕上方的距離
scrollLeft左邊劃出區(qū)的部分
scrollTo(x,y)去往頁面的x和y坐標(biāo)的位置window.scrollTo(x,y)
4.JSONjs對象表示法數(shù)據(jù)傳輸
JSON指的是JavaScript對象表示法(JavaScriptObjectNotation)
JSON是輕量級的文本數(shù)據(jù)交換格式
JSON獨(dú)立于語言*
JSON具有自我描述性占业,更易理解
var json = {}對象var arr = [] ;數(shù)組varnum;變量
var json = { width: “100px” ,height: 100 }
第五天
1.3個(gè)window事件
重新加載事件unload纯赎,屏幕滾動事件on scroll犬金,窗口改變事件onrpsize
window.onscroll = fucntion() {? fun (); }
fun()? ? function() {iffss }
2.簡單冒泡機(jī)制
事件冒泡: 當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候晚顷,比如說鼠標(biāo)點(diǎn)擊了一個(gè)按鈕,同樣的事件將會在那個(gè)元素的所有祖先元素中被觸發(fā)瞳氓。這一過程被稱為事件冒泡权均;這個(gè)事件從原始元素開始一直冒泡到DOM樹的最上層叽赊。
順序
E 6.0:
div -> body -> html -> document
其他瀏覽器:
div -> body -> html -> document -> window不是所有的事件都能冒泡必指。以下事件不冒泡:blur恕洲、focus、load户辞、unload
3.獲取用戶選擇的內(nèi)容
4.動畫原理癞谒,封裝動畫函數(shù)