w一：rem布局公式
document.documentElement.style.fontSize=20*document.documentElement.clientWidth/30
二：WEB標準
結(jié)構(gòu) 表現(xiàn) 行為分離
三：樣式層級排序
为居！important>id>class>標簽>*
四：網(wǎng)頁解析順序
html? css? js
五：改變定時器中this全局變量的指向：
箭頭函數(shù)(this指向是固定的,普通函數(shù)this應(yīng)該指向全局對象window铜邮，但是碎连，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時所在的對象)
六：js批量修改樣式
1：setStyle(element, {width: '200px', background: 'red'});
2:element.style.cssText="width: 200px; height:300px; background:yellow"
3：with(element.style)
{
width='300px';
height='500px';
background='yellow';
}
七：獲取非行間樣式
1：獲取非行間css樣式
function getStyle(obj,attr){? ? ? ? //獲取非行間樣式塘装，obj是對象，attr是值
if(obj.currentStyle){? ? ? ? ? ? ? ? //針對ie獲取非行間樣式
return? obj.currentStyle[attr];
}
else{
return? getComputedStyle(obj,false)[attr];? ? //針對非ie
};
};
2：為對象寫入css樣式
function css(obj,attr,value){? ? ? //對象性雄，樣式的烁，值。傳2個參數(shù)的時候為獲取樣式胁孙，3個是設(shè)置樣式
if(arguments.length == 2){? ? ? ? //arguments參數(shù)數(shù)組，當參數(shù)數(shù)組長度為2時表示獲取css樣式
returngetStyle(obj,attr);? ? ? //返回對象的非行間樣式用上面的getStyle函數(shù)
}
else{
if(arguments.length == 3){? ? ? ? //當傳三個參數(shù)的時候為設(shè)置對象的某個值
obj.style[attr] = value;
};
};
};
八：math()中常用方法
1：math.ceil()? 向上取整
2：math.floor()? 向下取整
3：math.round()? 四舍五入為最接近的數(shù)
4：math.random()? 0-1之間的隨機數(shù)
5：math.abs()? 返回絕對值
6：math.parseInt()? 保留整數(shù)部分
7：math.sqrt() 返回平方根
8：math.max(x,y)? 返回最大值
9：math.min(x,y)? 返回最小值
10：toSource()? 返回對象的源代碼
11：valueOf()? 返回對象的原始值
12：log(x)? 返回數(shù)的自然對數(shù)
13：pow(x,y)? x的y次冪
九：字符串常用方法
1：charAt() 返回指定位置的字符
2：concat() 合并字符串
3：substr(a,length)? 截取包含a之后的length個長度的字符串
4：indexof() 返回某個值在字符串中首次出現(xiàn)的位置 沒有出現(xiàn)返回-1
5：lastIndexof() 返回某個值在字符串中最后一出現(xiàn)的位置
6：tolowercase() 字符串轉(zhuǎn)化為小寫
7：touppercase()? 字符串轉(zhuǎn)化為大寫
8：split()? 字符串轉(zhuǎn)化為數(shù)組
9：length() 返回字符串的長度
10：equals() 比較兩個字符串是否相等
11：replace("被替換的"称鳞，"替換的")? 替換字符串中的值
12：trim() 去掉字符串收尾空格
十：數(shù)組中常用方法
1：push() 尾部添加-----pop()? 尾部刪除
2：unshift()? 頭部添加----shift() 頭部刪除
3：reverse() 顛倒順序
4：concat()? 合并數(shù)組
5：join() 數(shù)組轉(zhuǎn)字符串
6：sort() 按照字母表順序排序
? ? 傳入函數(shù)按數(shù)值大小排序：arr.sort(function(a,b){return a-b})
7：slice(a,b)? 從包括下標a截取到不包括下標b
? ? ? slice(index) index后面全部截取
8： splice(a,b)? ? 從a開始截取b個
? ? ? splice(a,b,c)? ? 從下標a開始刪除b個 把c加進去
? ? ? splice(index)? index后面全部截取
十一：js中分號用法
事件函數(shù)結(jié)束要加分號?
十二：關(guān)于return
? 1：事件中調(diào)用函數(shù)時用return返回值實際上是對window.event.returnvalue進行設(shè)置浊洞。
2:：該值決定了當前操作是否繼續(xù)。
? ? ? ? 當返回的是true時胡岔，將繼續(xù)操作。
? ? ? ? 當返回是false時枷餐，將中斷操作靶瘸。
3：return 主要是用來封裝函數(shù)
4：如果函數(shù)沒有返回值 則返回undefined
5：return false---- 可以阻止事件冒泡和默認事件? 阻止回調(diào)函數(shù)并立即返回
十三：計時器
1.倒計定時器：timename=setTimeout("function();",delaytime);
2.循環(huán)定時器：timename=setInterval("function();",delaytime);
3：倒計時定時器是在指定時間到達后觸發(fā)事件，而循環(huán)定時器就是在間隔時間到來時反復(fù)觸發(fā)事件（模擬循環(huán)）毛肋，兩者的區(qū)別在于：前者只是作用一次怨咪，而后者則不停地作用。
4：clearTimeout(計時器名) 清除已設(shè)置的setTimeout對象
? ? ? clearInterval(計時器名) 清除已設(shè)置的setInterval對象
十四：switch語句中break和continue用法
1：break用于跳出循環(huán)
2：continue用于跳過循環(huán)中的一個迭代繼續(xù)執(zhí)行后面
3：switch語句適用于離散式值? if else()適用于區(qū)間式判斷
十五：循環(huán)語句
1：for (var i=開始值;i<=結(jié)束值;i++) {}
2：while()
3：forEach()與map()類似
? ? ? constdata=[1,2,3,4,5,6];
? ? ? data.map(function(value,index,arr) {
? ? ? ? console.log(value);? ? ? ? ? //1,2,3,4,5,6
})
? ? ? 在循環(huán)中润匙，有時候我們急需跳出整個循環(huán)或某一次的循環(huán)語句不進行執(zhí)行诗眨，這時我們需要用到break語句和continue語句。這兩個語句都存在于循環(huán)語句中孕讳，前者終止整個循環(huán)匠楚，后者阻止某次循環(huán)的執(zhí)行
十六：三目運算
b?x:y? 如果b條件成立 執(zhí)行x 否則執(zhí)行y
十七：js中什么是真什么是假
1：哪些地方會進行真假判斷
if() else if()? switch() while() for() &&? || 等
2：真（true）
非零數(shù)字? 非空字符串? 函數(shù)? 能找到的元素（空數(shù)組[]和空json{}也為真）
3：假（false）
0? NAN? ? 空字符串? ? null? ? 未定義? 找不到的元素
十八：ES6之前的數(shù)據(jù)類型
number? string? ? object? ? function? null? undefined? symbol?
十九：檢測數(shù)據(jù)類型方法
typeof():返回數(shù)據(jù)類型的字符串
a isinstanceof (b)? :深度檢測 a是不是b的實例對象
二十：undefined出現(xiàn)的情況
1：函數(shù)沒有返回值
2：訪問一個不存在的屬性’
3：聲明未賦值
4：函數(shù)傳參無值
二十一：undefined? ? not? defined? ? null
1:undefined未定義
2：not defined ：壓根沒有這個元素
3：null 空指針
二十二：隱式轉(zhuǎn)換
1：字符串和數(shù)字相加 數(shù)字轉(zhuǎn)字符串
2：數(shù)字字符串相減，字符串轉(zhuǎn)成數(shù)字厂财。如果字符串不是純數(shù)字就會轉(zhuǎn)成NaN芋簿。兩個字符串相減也先轉(zhuǎn)成數(shù)字。
3：==也會發(fā)生隱式轉(zhuǎn)換
? ? .undefined==null? ? true
? ? .字符串和數(shù)字比較時璃饱，字符串轉(zhuǎn)數(shù)字
? ? .數(shù)字為布爾比較時与斤，布爾轉(zhuǎn)數(shù)字
? ? .字符串和布爾比較時，兩者轉(zhuǎn)數(shù)字
二十三：嚴格模式（"use strict"）
好處：
-消除Javascript語法的一些不合理、不嚴謹之處撩穿，減少一些怪異行為;
- 消除代碼運行的一些不安全之處磷支，保證代碼運行的安全；
- 提高編譯器效率食寡，增加運行速度雾狈；
- 為未來新版本的Javascript做好鋪墊。
二十四：js預(yù)解析
1：js預(yù)解析是什么：在當前作用域下 js運行之前會把帶有var function關(guān)鍵字的事先聲明 從上到下執(zhí)行js代碼
2：js會對什么進行預(yù)解析
? ? ? var后面的變量? ? 函數(shù)? ? 函數(shù)傳參的變量
3：通過var關(guān)鍵字定義的變量進行預(yù)解析的時候,都是聲明(declear),不管它有沒有賦值,此時都會賦值為undefined? 凡是傳參 直接賦值傳參
4：function進行預(yù)解析的時候,聲明且定義了,但他存儲的數(shù)據(jù)的那個空間是代碼即字符串
5：預(yù)解析中想實現(xiàn)立即執(zhí)行的函數(shù),放把這段函數(shù)到()里面自執(zhí)行
6：js在什么情況下會進行預(yù)解析
? ? ? 遇到script標簽對時
? ? ? 遇到函數(shù)時:因為變量是有作用域的
二十五：this問題
1：計時器中不可以用this 此時this指向window
? ? ---解決辦法：1-在定時器外給this存儲在一個變量中 定時器內(nèi)指向變量
? ? ? ? ? ? ? ? ? ? ? ? ? 2-箭頭函數(shù)（改變this指向）
2：行間不能嵌套this
3：事件中嵌套一層函數(shù)不能用this
4：attachEvent()事件中不能用
二十六：i的問題
1：循環(huán)中加事件 事件中不能用i
2：循環(huán)中加計時器 計時器中不能i
解決辦法--：1-自定義屬性（低級瀏覽器不能用 因為第一次加載時會把自定義屬性過掉）
? ? ? ? ? ? ? ? ? ? 2-封閉空間 （自執(zhí)行函數(shù)）
二十七：select中option的增刪改查
1：添加一個選項
var obj=document.getElementById('mySelect');
obj.add(new Option("文本","值"));? ? ? //這個只能在IE中有效
obj.options.add(new Option("text","value"));? //這個兼容IE與firefox
}
2：刪除一個選項
index,要刪除選項的序號冻河，這里取當前選中選項的序號
var index=obj.selectedIndex;
obj.options.remove(index);
}
3：獲取
var index=obj.selectedIndex; //序號箍邮，取當前選中選項的序號
var val = obj.options[index].text;
4：修改
var index=obj.selectedIndex; //序號，取當前選中選項的序號
var val = obj.options[index]=new Option("新文本","新值");
二十八：將json字符串解析成json數(shù)據(jù)格式方法
1：var dataObj=eval("("+data+")");
2;data =(new Function("","return "+json))();
二十九：js DOM事件
onscroll? onresize? ? ondbclick? onmousemove? onmouseover? onmouseout? onmouseenter? onmouseleave? ? onkeyup? onkeydown? onkeypress? onchange? ? onfocus? onerror? onload? oncontextmenu? onmousewheel?
三十：onmousemove? out和onmouseenter? leave區(qū)別
前一組支持時間冒泡 后一組不支持事件冒泡
fromElement? :對于mouseover和mouseout事件 引用移出鼠標的元素
toElement:對于mouseover和mouseout事件 引用移入鼠標的元素
三十一：事件中兼容性寫法
var event=event||window.event
1：事件綁定移除
高級瀏覽器：element.addEventListner(type callback false)? removeEvent()
IE8一下:element.attachEvent("on"+type,callback)
detachEvent()
2:事件源(兼容火狐)
vartarget=event.target||event.srcElement;
3：阻止事件冒泡
IE8下：event.cancelBubble=true
高級瀏覽器：event.stopprogration()
4:阻止默認事件
IE8下：event.returnValue=false
高級：event.preventDefault()
三十二：事件捕獲
setCapture 可以捕獲到 移動到瀏覽器外的鼠標事件叨叙。
IE:
obj.SetCapture()
obj.releaseCapture()
如果要兼容ff :
window.captureEvents(Event.mousemove|Event.mouseuop);
window.releaseEvents(Event.mousemoveE|Event.mouseup);
三十三：js原生中事件委托
通過找到事件源 判斷事件源的nodeName.toLowerCase()是不是想讓他發(fā)生事件的元素 是的話執(zhí)行
oUl.onmouseover =function(ev)
{var? ? ev = ev ||window.event;
var? ? ? target = ev.target||ev.srcElement;
if(target.nodeName.toLowerCase() =="li")
{target.style.background ="red";}
三十四：判斷瀏覽器信息（userAgent）
function myBrowser(){
var userAgent = navigator.userAgent;? ? ? ? //取得瀏覽器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判斷是否Opera瀏覽器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判斷是否Firefox瀏覽器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判斷是否Safari瀏覽器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判斷是否IE瀏覽器
}
三十五：存儲方式（見簡書前面章節(jié)）
三十六：性能優(yōu)化方法（見簡書前面章節(jié)）
三十七：異步加載js
1:script標簽對中 async=true
2::script標簽對中 defer屬性
三十八：滾輪事件
1：包括IE6 谷歌在內(nèi)的瀏覽器是使用onmousewheel锭弊，而FireFox瀏覽器一個人使用DOMMouseScroll
2：事件綁定：
document.body.onmousewheel= function(event)
{? ? event = event || window.event;? ? };
document.body.addEventListener("DOMMouseScroll", function(event)
{? event = event || window.event;);? ? ? //必須寫在事件綁定內(nèi)
3：綁定滾輪方向
IE 谷歌：if(event.wheelDelta>0/<0){}
Firefox：if(event.detail>0/<0){}
三十九：距離的獲取：
1擂错、在文檔（document）對象里面用：
scrollWidth/Height:獲取對象的滾動寬度(滾動條可以滾動的寬度味滞，相當于整個頁面的總寬度的樣子--網(wǎng)頁正文全寬)
scrollLeft/Top:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離（頁面利用滾動條滾動到右邊時，隱藏在滾動條左邊的頁面寬度---頁面被卷去左邊）
2钮呀、在節(jié)點對象里面用：
offsetLeft/Top:獲取對象相對于版面（css里面沒有進行定位剑鞍，則offsetParent取值為根元素進行計算）或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置（當有css定位時，當前對象相對與offsetParent元素的距離）
offsetWidth/Height (width+padding+border)
獲取當前對象的寬度爽醋。
style.width也是當前對象的寬度(width+padding+border)蚁署。
區(qū)別：1)style.width返回值除了數(shù)字外還帶有單位px；
2)如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小蚂四，style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值光戈；
3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是空字符串遂赠；
offsetLeft :
當前對象到其上級層左邊的距離久妆。
不能對其進行賦值.設(shè)置對象到其上級層左邊的距離請用style.left屬性。
style.left當前對象到其上級層左邊的距離跷睦。
區(qū)別：1)style.left返回值除了數(shù)字外還帶有單位px筷弦；
2)如對象到其上級層左邊的距離設(shè)定值為百分比，style.left返回此百分比,而offsetLeft則返回到其上級層左邊的距離的值抑诸；
3)如果沒有給 HTML 元素指定過 left樣式烂琴，則 style.left返回的是空字符串；
注意：如果上級層為body哼鬓，由于IE监右、FF對padding、margin的解釋不一樣所以要明確規(guī)定處理不是下列的區(qū)別就不成立了异希。
IE? 1)如果Div的上級層是body健盒，而div與body之間有個div绒瘦，如body->div->divo；divo的offsetTop=div的padding+margin+boder扣癣；
2）如果Div的上級層是body惰帽，如body>divo；divo的offsetTop=div的padding+margin+boder父虑；
這divo的offsetTop=divo的margin >body.padding則為divo的margin该酗，否則為body.padding誰大是誰？
FF? 上述兩種情況：offsetTop=margin+padding ;
(IE與FF中的body默認padding為10)在IE6.0 FF3.6.13
clientWidth/Height:
獲取對象可見內(nèi)容的寬度士嚎，不包括滾動條呜魄，不包括邊框；
clientLeft/Top:
獲取對象的border寬度
3莱衩、事件里面用的：
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
4爵嗅、屏幕的：
window.screenTop 網(wǎng)頁正文部分上
window.screenLfet 網(wǎng)頁正文部分左
window.screen.height? 屏幕分辨律的高
window.screen.left? 屏幕分辨律的寬
window.screen.availHeight? 屏幕可用工作區(qū)的高度
window.screen.availWidth? 屏幕可用工作區(qū)的寬度
document.documentElement.scrollTop 垂直方向滾動的值
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth? (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight? (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;
getBoundingClientRect()
這個方法返回一個矩形對象，包含四個屬性：left笨蚁、top睹晒、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離括细。
alert(box.getBoundingClientRect().top);? ? ? ? // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right);? ? ? // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom);? ? ? // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left);? ? ? ? // 元素左邊距離頁面左邊的距離
四十：內(nèi)置對象（本地對象）和宿主對象
1：內(nèi)置對象
Global 和 Math （它們也是本地對象伪很，根據(jù)定義，每個內(nèi)置對象都是本地對象
2：所有非本地對象都是宿主對象奋单，所有的BOM和DOM對象都是宿主對象锉试，ECMAScript官方未定義的對象都屬于宿主對象，因為其未定義的對象大多數(shù)是自己通過ECMAScript程序創(chuàng)建的對象览濒。
四十一：補零函數(shù)
functionpadLeft(str,lenght){
if(str.length >= lenght)
returnstr;
else
returnpadLeft("0"+str,lenght);
}
functionpadRight(str,lenght){
if(str.length >= lenght)
returnstr;
else
returnpadRight(str+"0",lenght);
}
