前言
之前講都是js的純基本語法,表達式啥的辩稽,跟瀏覽器無關,可以使用node和控制臺執(zhí)行从媚;
往后講的只有瀏覽器里才會有逞泄。
HTML的加載順序
- 從上到下,從外到里依次加載
- js的三種引入方式
- 內聯<script>
- 行內屬性上寫
- 外鏈.js文件
總之
<script>標簽內拜效,屬性值中喷众,.js文件里直接寫js代碼。
你告訴js內存紧憾,要做某個事到千,
DOM響應到有這個事情發(fā)生,把結果映射到瀏覽器讓我們看到
及時響應
如果改了顏色背景赴穗,都需要css渲染憔四,渲染過程可以忽略不計膀息。
main.style.color = ["red","blue"][Math.random()2 | 0]
Math.random()表示0到1之間的隨機小數,不包括0和1
Math.random()2 | 0 表示0或者1
DOM API學習
DOM結構的操作
- 對象引用了赵,相當于拉了個線潜支,
=== 對象類型等完全一樣,如果不是基礎類型(字符串柿汛,數字)冗酿,那就是同一個東西,修改一個另一個也會修改络断。 - 集合不是數組已烤,但類數組。
document.all[0] 是按照加載順序取的,從上到下妓羊,從外到里依次加載
document.getElemntBy系列
document.referrer 從哪里來的URL,返回""或者url字符串
document.lastModified 最后修改時間
![Uploading 1-sibling_578152.jpg . . .]
document.domain 當前url的域名胯究,可以被修改,
但是只允許從二級修改到頂級域名(XXX.com, XX.cn, XXX.com.cn)
frame操作不能跨域躁绸,可以修改到頂級域裕循,名假裝同域名進行操作,
但是如果當前頁,面有關聯太多,比如登錄請求净刮,都會發(fā)到頂級上剥哑,非常局限。
-
并且css和js必須使用絕對路徑淹父,不然(相對路徑)都會訪問頂級上株婴。副作用很大。
document.cookie暑认,返回一個字符串,例如 "M9xo_2132_lastvisit=1437095802;BAIDU_DUP_lcr=https://www.baidu.com/;pgv_pvi=1186400050; __utmc=14869410;username=wsc"
cookie 是唯一可以服務端和客戶端同時操作的東西困介,
比如一個請求發(fā)到服務端,服務端修改完告訴瀏覽器你也該改了蘸际。
同時用腳本也可以修改座哩。
https://github.com/shy2850/xhcms_2014/blob/master/js/module/cookie.js
要精確的對 cookie 進行讀取其實很簡單,就是對字符串進行操作js全局對象
-
escape(string)
可對字符串進行編碼,這樣就可以在所有的計算機上讀取該字符串粮彤。
返回: 已編碼的string 的副本根穷。
其中某些字符被替換成了十六進制的轉義序列。 -
stringObject.indexOf(searchvalue,fromindex)
可返回某個指定的字符串值在字符串對象中首次出現的位置导坟。
fromindex
規(guī)定開始檢索的位置屿良。它的合法取值是0到 stringObject.length - 1
。
如省略該參數惫周,則將從字符串的首字符開始檢索尘惧。 -
toGMTString()
可根據格林威治時間 (GMT) 把 Date 對象轉換為字符串,并返回結果闯两。
-
HTML DOM Element 對象
注意
HTML 是對XML的擴展褥伴,但是不全,所以有時候要查XML DOM參考手冊文檔
-
.nextElementSibling
IE6不支持漾狼,但有.nextSibling
跟前者等價重慢。例,需要用.nextSibling
寫兼容【大坑】 - 如果前者是肯定意義直接返回前者逊躁,否則就返回后者似踱。如此邏輯可以使用下面的方式:
return a || b
//結果是精確的值,不是true稽煤、false,或運算的短路邏輯
var a=1,b=2; a || b //1
var a=0,b=2; a || b //2
var a=null,b=2; a || b //2 - 在父的最前和最末位置分別插入
parentNode.appendChild(newNode)
parentNode.insertBefore(newNode,parentNode.childNodes[0])
//不用children(不包含空白的text節(jié)點)
after
是有IE6兼容性問題的
removeNode
//移除節(jié)點
cloneNode
//復制節(jié)點 - 元素屬性和css的操作
- case 表達式 原因核芽?
- class操作
css操作,提倡修改class來修改樣式
做一個忽閃忽閃的東西酵熙,可以鍛煉思維
通過以下方式修改所有的css樣式
main.style .backgroundColor = "red";
dom.style[name] = value;//name是變量時轧简,就不能再【點】了
修改容易,獲取.css樣式表里的樣式難:
getComputedStyle(main)[backgroundColor]
所以盡量不取.css里的樣式進行對比匾二。
25ke 1:08
事件哮独,事件綁定的兼容見圖片
- 事件綁定,比較復雜察藐,雜亂皮璧。先選中,再綁定事件
行內屬性賦值的方式
選中再賦值分飞,只能賦值一次悴务,也就是只能添加一個事件但是選中添加監(jiān)聽,可以綁定多個事件譬猫,不會修改或者覆蓋讯檐,只會附加更多事件
mouseenter,是先離開再進入的時候染服,跟mouseleave相對
而mouseout ,是在其子元素上也會觸發(fā)裂垦,。肌索。蕉拢。?
dblclick 雙擊诚亚。
mouseenter等這些IE6都不支持晕换,因為不支持addEventListen(),要用attachEvent標準的this就是dom標簽,非標準的則不是,需要處理一下,把this替換過來
在內部新創(chuàng)建個方法站宗,執(zhí)行的時候闸准,把方法執(zhí)行的主對像硬修改成dom,在dom上執(zhí)行
listener.call(dom,event)
//event 繼續(xù)傳遞下去
等價于dom.listener()
事件很混亂的時候,去掉一個梢灭,在對比夷家,在修改蒸其。
新建的臨時的變量就是前端的緩存方法。
事件代理
為啥阻止冒泡库快?如何阻止
點擊子不連帶著觸發(fā)父綁定的事件方法-阻止冒泡摸袁,而IE6下不用阻止冒泡
停止事件傳播:e.stopPropagation()
為啥綁定到父上?
考慮性能消耗义屏,如何一次綁定完全靠汁?還是要綁定上父上面
target 是真正被點擊的子標簽 豆胸,非標準的則不是鳖枕,log一下target,略就,怎么全刪了兄墅?remove和removeChild的區(qū)別
e.target || e.srcElement
分別代表(標準和IE瀏覽器)
25ke 01:53只是不從父main往上冒泡了,但是還會從子冒泡到他本身踢星?
事件怎么全解綁了?
移除只能一個個移除隙咸,首先把事件函數緩存起來斩狱。
用for循環(huán)移除所有事件。沒有統(tǒng)一的移除方法扎瓶。
事件綁定原則
能只綁一遍所踊,就不綁多遍,一次綁定概荷,事件很金貴的
css小節(jié)
- 絕對定位的層級會較普通的高秕岛,但是使用relative的更高∥笾ぃ可以用z-index調整
- 行內標簽有float的可以設置寬高继薛,總之脫離文檔流的,都可以設置寬高
- 盡量使用百分比愈捅。
- 想對誰定位遏考,要寫,不然就是相對應body,
- 而且IE必須主動指定
left:0;top:0;
-
overflow:hidden;
或者line-height:0;
- 把元素的所有style屬性都改成默認的蓝谨,方法:
inner.style.cssText = "";
但是IE就不支持 - 樣式表里要杜絕寫id
25ke 02:16
星級評分自己動手寫灌具。
模擬下拉框
事件綁定和選取是最常用的功能,寫的多了就是在寫jquery這樣的框架
少使用鼠標譬巫,多用鍵盤
26ke 25min
Q.create("div",{})?select.js
對象.getAttribute("")//獲取所有屬性:id type class name
或者對象.selected
必須是表單元素咖楣,才能直接.value,.selceted;
否則必須用.getAttribute("value")
.tagName.toUpCase() === 'A'//因為會自己解析出來就轉成大寫芦昔,所以才诱贿。。
ie6 不支持dispaly:block
ie6 下 option 是大寫
總結
ctrl+d對網友收藏
云香水識的簡書
云香水識的runjs.cn
d3.js
webGL
表單操作
27-10min