本篇收錄了一些面試中經(jīng)常會遇到的經(jīng)典面試題以及自己面試過程中遇到的一些問題僻澎，并且都給出了我在網(wǎng)上收集的答案废累。馬上就要過春節(jié)了虑绵，開年就是嶄新的一年，相信很多的前端開發(fā)者會有一些跳槽的悸動阳堕，通過對本篇知識的整理以及經(jīng)驗的總結(jié)跋理，希望能幫到更多的前端面試者。（如有錯誤或更好的答案恬总，歡迎指正，水平有限肚邢，望各位不吝指教壹堰。:）
JavaScript中如何檢測一個變量是一個String類型？請寫出函數(shù)實現(xiàn)
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
方法一：使用replace正則匹配的方法
去除所有空格: str = str.replace(/\s*/g,""); ? ? ?
去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");
去除左空格： str = str.replace( /^\s*/, “”);
去除右空格： str = str.replace(/(\s*$)/g, "");
str為要去除空格的字符串贱纠，實例如下：
varstr =" 23 23 ";varstr2 = str.replace(/\s*/g,"");
console.log(str2); // 2323
方法二：使用str.trim()方法
str.trim()局限性：無法去除中間的空格，實例如下：
varstr ="? xiao? ming? ";varstr2 = str.trim();
console.log(str2);? //xiao? ming
同理响蕴，str.trimLeft()谆焊，str.trimRight()分別用于去除字符串左右空格。
方法三：使用jquery,$.trim(str)方法
$.trim(str)局限性：無法去除中間的空格浦夷，實例如下：
varstr ="? xiao? ming? ";varstr2 = $.trim(str)
console.log(str2);? //? xiao? ming
測試地址為：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23
實例如下：
function showWindowHref(){
? ? varsHref = window.location.href;
? ? varargs = sHref.split('?');
? ? if(args[0] == sHref){
? ? ? ? return"";
? ? }
? ? vararr = args[1].split('&');
? ? varobj = {};
? ? for(vari =0;i< arr.length;i++){
? ? ? ? vararg = arr[i].split('=');
? ? ? ? obj[arg[0]] = arg[1];
? ? }
? ? return obj;
}varhref = showWindowHref();// objconsole.log(href['name']);// xiaoming
我這里只是列舉了常用的字符串函數(shù)，具體使用方法劈狐，請參考網(wǎng)址罐孝。
concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串肥缔。
indexOf() – 返回字符串中一個子串第一處出現(xiàn)的索引莲兢。如果沒有匹配項，返回 -1 续膳。
charAt() – 返回指定位置的字符改艇。
lastIndexOf() – 返回字符串中一個子串最后一處出現(xiàn)的索引，如果沒有匹配項坟岔，返回 -1 谒兄。
match() – 檢查一個字符串是否匹配一個正則表達(dá)式。
substr() 函數(shù) -- 返回從string的startPos位置炮车，長度為length的字符串
substring() – 返回字符串的一個子串舵变。傳入?yún)?shù)是起始位置和結(jié)束位置。
slice() – 提取字符串的一部分瘦穆，并返回一個新字符串纪隙。
replace() – 用來查找匹配一個正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串扛或。
search() – 執(zhí)行一個正則表達(dá)式匹配查找绵咱。如果查找成功，返回字符串中匹配的索引值熙兔。否則返回 -1 悲伶。
split() – 通過將字符串劃分成子串艾恼，將一個字符串做成一個字符串?dāng)?shù)組。
length – 返回字符串的長度麸锉，所謂字符串的長度是指其包含的字符的個數(shù)钠绍。
toLowerCase() – 將整個字符串轉(zhuǎn)成小寫字母。
toUpperCase() – 將整個字符串轉(zhuǎn)成大寫字母花沉。
怎樣添加柳爽、移除、移動碱屁、復(fù)制磷脯、創(chuàng)建和查找節(jié)點？
?1）創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
2）添加娩脾、移除赵誓、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id柿赊，唯一性
（1）俩功、在html元素事件屬性中使用，如：
（2）闹瞧、構(gòu)造函數(shù)
function Animal(name, color) {
this.name = name;
this.color = color;
}
（3）绑雄、input點擊，獲取值
? ? var btn = document.getElementById("text");
? ? btn.onclick = function() {
? ? ? ? alert(this.value);? ? //此處的this是按鈕元素
? ? }
(4)奥邮、apply()/call()求數(shù)組最值
varnumbers = [5,458,120, -215 ]; varmaxInNumbers = Math.max.apply(this, numbers);?
console.log(maxInNumbers);? // 458varmaxInNumbers = Math.max.call(this,5,458,120, -215);
console.log(maxInNumbers);? // 458
相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的洽腺。
typeof的定義和用法：返回值是一個字符串脚粟，用來說明變量的數(shù)據(jù)類型。
細(xì)節(jié)：
(1)蘸朋、typeof 一般只能返回如下幾個結(jié)果：number,boolean,string,function,object,undefined核无。
(2)、typeof 來獲取一個變量是否存在藕坯，如 if(typeof a!="undefined"){alert("ok")}团南，而不要去使用 if(a) 因為如果 a 不存在（未聲明）則會出錯。
(3)炼彪、對于 Array,Null 等特殊對象使用 typeof 一律返回 object吐根，這正是 typeof 的局限性。
Instanceof定義和用法：instanceof 用于判斷一個變量是否屬于某個對象的實例辐马。
實例演示：
a instanceof b?alert("true"):alert("false"); //a是b的實例拷橘？真:假
vara =new Array();
alert(a instanceof Array);? // true
alert(a instanceof Object)? // true
如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object?的子類冗疮。
function test(){};vara =new test();
alert(a instanceof test)? // true
細(xì)節(jié)：
(1)萄唇、如下，得到的結(jié)果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object术幔，不是指 dom 模型對象另萤。
if (window instanceof Object){ alert('Y')} else {? alert('N');}? // 'N'
1诅挑、定義和用法：當(dāng)一個函數(shù)的返回值是另外一個函數(shù)仲墨，而返回的那個函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量，如果返回的這個函數(shù)在外部被執(zhí)行揍障，就產(chǎn)生了閉包。
2俩由、表現(xiàn)形式：使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量毒嫡。
3、實例如下：
(1)幻梯、根據(jù)作用域鏈的規(guī)則兜畸，底層作用域沒有聲明的變量，會向上一級找碘梢，找到就返回咬摇，沒找到就一直找，直到window的變量煞躬，沒有就返回undefined肛鹏。這里明顯count 是函數(shù)內(nèi)部的flag2 的那個count 。
varcount=10;//全局作用域 標(biāo)記為flag1function add(){
? ? varcount=0;//函數(shù)全局作用域 標(biāo)記為flag2return function(){
? ? ? ? count+=1;//函數(shù)的內(nèi)部作用域? ? ? ? alert(count);
? ? }
}vars = add()
s();//輸出1s();//輸出2
4恩沛、變量的作用域
要理解閉包在扰，首先必須理解Javascript特殊的變量作用域。
變量的作用域分類：全局變量和局部變量雷客。
特點：
1芒珠、函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量；在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量搅裙。
2皱卓、函數(shù)內(nèi)部聲明變量的時候，一定要使用var命令部逮。如果不用的話娜汁，你實際上聲明了一個全局變量！
?5甥啄、使用閉包的注意點
1）濫用閉包存炮，會造成內(nèi)存泄漏：由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包穆桂，否則會造成網(wǎng)頁的性能問題宫盔，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是享完，在退出函數(shù)之前灼芭，將不使用的局部變量全部刪除。
2）會改變父函數(shù)內(nèi)部變量的值般又。所以彼绷，如果你把父函數(shù)當(dāng)作對象（object）使用，把閉包當(dāng)作它的公用方法（Public Method）茴迁，把內(nèi)部變量當(dāng)作它的私有屬性（private value）寄悯，這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值堕义。
1倦卖、什么是跨域洒擦？
由于瀏覽器同源策略，凡是發(fā)送請求url的協(xié)議怕膛、域名熟嫩、端口三者之間任意一與當(dāng)前頁面地址不同即為跨域。存在跨域的情況：
網(wǎng)絡(luò)協(xié)議不同褐捻，如http協(xié)議訪問https協(xié)議掸茅。
端口不同，如80端口訪問8080端口舍扰。
域名不同倦蚪，如qianduanblog.com訪問baidu.com。
子域名不同边苹，如abc.qianduanblog.com訪問def.qianduanblog.com陵且。
域名和域名對應(yīng)ip,如www.a.com訪問20.205.28.90.
2、跨域請求資源的方法：
(1)个束、porxy代理
定義和用法：proxy代理用于將請求發(fā)送給后臺服務(wù)器慕购，通過服務(wù)器來發(fā)送請求，然后將請求的結(jié)果傳遞給前端茬底。
實現(xiàn)方法：通過nginx代理沪悲；
注意點：1、如果你代理的是https協(xié)議的請求阱表，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查殿如，否則你的請求無法成功贡珊。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現(xiàn)代瀏覽器支持跨域資源請求的一種最常用的方式涉馁。
使用方法：一般需要后端人員在處理請求數(shù)據(jù)的時候门岔，添加允許跨域的相關(guān)操作。如下：
res.writeHead(200, {
? ? "Content-Type":"text/html; charset=UTF-8",
? ? "Access-Control-Allow-Origin":'http://localhost',
? ? 'Access-Control-Allow-Methods':'GET, POST, OPTIONS',
? ? 'Access-Control-Allow-Headers':'X-Requested-With, Content-Type'});
(3)烤送、jsonp
定義和用法：通過動態(tài)插入一個script標(biāo)簽寒随。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面后會立即執(zhí)行（沒有阻塞的情況下）帮坚。
特點：通過情況下妻往，通過動態(tài)創(chuàng)建script來讀取他域的動態(tài)資源，獲取的數(shù)據(jù)一般為json格式试和。
實例如下：
? ? function testjsonp(data) {
? ? ? console.log(data.name); // 獲取返回的結(jié)果? ? }var_script = document.createElement('script');
? ? _script.type ="text/javascript";
? ? _script.src ="http://localhost:8888/jsonp?callback=testjsonp";
? ? document.head.appendChild(_script);
缺點：
1讯泣、這種方式無法發(fā)送post請求（這里）
2、另外要確定jsonp的請求是否失敗并不容易阅悍，大多數(shù)框架的實現(xiàn)都是結(jié)合超時時間來判定判帮。
回收機制方式
1、定義和用法：垃圾回收機制(GC:Garbage Collection),執(zhí)行環(huán)境負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存溉箕。
2、原理：垃圾收集器會定期（周期性）找出那些不在繼續(xù)使用的變量悦昵，然后釋放其內(nèi)存肴茄。但是這個過程不是實時的，因為其開銷比較大但指，所以垃圾回收器會按照固定的時間間隔周期性的執(zhí)行寡痰。
3、實例如下：
function fn1() {
? ? varobj = {name:'hanzichi', age:10};
}
function fn2() {
? ? varobj = {name:'hanzichi', age:10};
? return obj;
}vara = fn1();varb = fn2();
fn1中定義的obj為局部變量棋凳，而當(dāng)調(diào)用結(jié)束后拦坠，出了fn1的環(huán)境，那么該塊內(nèi)存會被js引擎中的垃圾回收器自動釋放剩岳；在fn2被調(diào)用的過程中贞滨，返回的對象被全局變量b所指向，所以該塊內(nèi)存并不會被釋放拍棕。
?4晓铆、垃圾回收策略：標(biāo)記清除(較為常用)和引用計數(shù)。
標(biāo)記清除：
定義和用法：當(dāng)變量進(jìn)入環(huán)境時绰播，將變量標(biāo)記"進(jìn)入環(huán)境"骄噪，當(dāng)變量離開環(huán)境時，標(biāo)記為："離開環(huán)境"蠢箩。某一個時刻链蕊，垃圾回收器會過濾掉環(huán)境中的變量事甜，以及被環(huán)境變量引用的變量，剩下的就是被視為準(zhǔn)備回收的變量滔韵。
到目前為止逻谦，IE、Firefox奏属、Opera跨跨、Chrome、Safari的js實現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類似的策略囱皿，只不過垃圾收集的時間間隔互不相同埃仪。
引用計數(shù)：
定義和用法：引用計數(shù)是跟蹤記錄每個值被引用的次數(shù)。
基本原理：就是變量的引用次數(shù)衣迷，被引用一次則加1朽色，當(dāng)這個引用計數(shù)為0時，被視為準(zhǔn)備回收的對象齿兔。
?內(nèi)存管理
1橱脸、什么時候觸發(fā)垃圾回收？
垃圾回收器周期性運行分苇，如果分配的內(nèi)存非常多添诉，那么回收工作也會很艱巨，確定垃圾回收時間間隔就變成了一個值得思考的問題医寿。
IE6的垃圾回收是根據(jù)內(nèi)存分配量運行的栏赴，當(dāng)環(huán)境中的變量，對象靖秩，字符串達(dá)到一定數(shù)量時觸發(fā)垃圾回收须眷。垃圾回收器一直處于工作狀態(tài)，嚴(yán)重影響瀏覽器性能沟突。
IE7中花颗，垃圾回收器會根據(jù)內(nèi)存分配量與程序占用內(nèi)存的比例進(jìn)行動態(tài)調(diào)整，開始回收工作惠拭。
2扩劝、合理的GC方案：(1)、遍歷所有可訪問的對象; (2)职辅、回收已不可訪問的對象今野。
3、GC缺陷：(1)罐农、停止響應(yīng)其他操作条霜；
4、GC優(yōu)化策略：(1)涵亏、分代回收（Generation GC）;(2)宰睡、增量GC
開發(fā)過程中遇到的內(nèi)存泄露情況蒲凶，如何解決的？
1拆内、定義和用法：
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用旋圆，又不能回收，直到瀏覽器進(jìn)程結(jié)束麸恍。C#和Java等語言采用了自動垃圾回收方法管理內(nèi)存灵巧，幾乎不會發(fā)生內(nèi)存泄露。我們知道抹沪，瀏覽器中也是采用自動垃圾回收方法管理內(nèi)存刻肄，但由于瀏覽器垃圾回收方法有bug，會產(chǎn)生內(nèi)存泄露融欧。
2敏弃、內(nèi)存泄露的幾種情況:
(1)、當(dāng)頁面中元素被移除或替換時噪馏，若元素綁定的事件仍沒被移除麦到，在IE中不會作出恰當(dāng)處理，此時要先手工移除事件欠肾，不然會存在內(nèi)存泄露瓶颠。
實例如下:
? ? btn.onclick = function(){
? ? ? ? document.getElementById("myDiv").innerHTML ="Processing...";
? ? }
解決方法如下：
? ? btn.onclick = function(){
? ? btn.onclick =null;
? ? ? ? document.getElementById("myDiv").innerHTML ="Processing...";
? ? }
(2)、由于是函數(shù)內(nèi)定義函數(shù)刺桃，并且內(nèi)部函數(shù)--事件回調(diào)的引用外暴了步清，形成了閉包。閉包可以維持函數(shù)內(nèi)局部變量虏肾，使其得不到釋放。
實例如下：
function bindEvent(){
? ? varobj=document.createElement("XXX");
? ? obj.onclick=function(){
? ? ? ? //Even if it's a empty function? ? }
}
解決方法如下：
function bindEvent(){
? ? varobj=document.createElement("XXX");
? ? obj.onclick=function(){
? ? ? ? //Even if it's a empty function? ? }
? ? obj=null;
}
javascript面向?qū)ο笾欣^承實現(xiàn)欢搜？
面向?qū)ο蟮幕咎卣饔校悍忾]封豪、繼承、多態(tài)炒瘟。
在JavaScript中實現(xiàn)繼承的方法：
1. 原型鏈（prototype chaining）
2. call()/apply()
3. 混合方式(prototype和call()/apply()結(jié)合)
4. 對象冒充
繼承的方法如下：
1吹埠、prototype原型鏈方式：
[html]view plaincopy
function?teacher(name){??
this.name?=?name;??
}??
teacher.prototype.sayName?=?function(){??
????console.log("name?is?"+this.name);??
}??
varteacher1?=?new?teacher("xiaoming");??
teacher1.sayName();??
function?student(name){??
this.name?=?name;??
}??
student.prototype?=?new?teacher()??
varstudent1?=?new?student("xiaolan");??
student1.sayName();??
//??name?is?xiaoming??
//??name?is?xiaolan??
2、call()/apply()方法
function teacher(name,age){
this.name = name;
this.age = age;
this.sayhi = function(){
alert('name:'+name+", age:"+age);
}
}
function student(){
var args = arguments;
teacher.call(this,args[0],args[1]);
// teacher.apply(this,arguments);
}
var teacher1 = new teacher('xiaoming',23);
teacher1.sayhi();
var student1 = new student('xiaolan',12);
student1.sayhi();
// alert: name:xiaoming, age:23
// alert: name:xiaolan, age:12
3疮装、混合方法【prototype,call/apply】
function teacher(name,age){
this.name = name;
this.age = age;
}
teacher.prototype.sayName = function(){
console.log('name:'+this.name);
}
teacher.prototype.sayAge = function(){
console.log('age:'+this.age);
}
function student(){
var args = arguments;
teacher.call(this,args[0],args[1]);
}
student.prototype = new teacher();
var student1 = new student('xiaolin',23);
student1.sayName();
student1.sayAge();
// name:xiaolin
// age:23
4缘琅、對象冒充
function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log(this.name+", "+this.age);
}
}
function Student(name,age){
this.student = Person; //將Person類的構(gòu)造函數(shù)賦值給this.student
this.student(name,age); //js中實際上是通過對象冒充來實現(xiàn)繼承的
delete this.student; //移除對Person的引用
}
var s = new Student("小明",17);
s.show();
var p = new Person("小花",18);
p.show();
// 小明, 17
// 小花, 18
1、判斷一個字符串中出現(xiàn)次數(shù)最多的字符廓推，統(tǒng)計這個次數(shù)
varstr ='asdfssaaasasasasaa';varjson = {};for(vari =0; i < str.length; i++) {
? ? if(!json[str.charAt(i)]){
? ? ? json[str.charAt(i)] =1;
? ? }else{
? ? ? json[str.charAt(i)]++;
? ? }
};variMax =0;variIndex ='';for(variin json){
? ? if(json[i]>iMax){
? ? ? ? iMax = json[i];
? ? ? ? iIndex = i;
? ? }
}? ? ? ? console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');
結(jié)果如下：出現(xiàn)次數(shù)最多的是:a出現(xiàn)9次
這里只是做了相關(guān)的列舉，具體的使用方法樊展，請參考網(wǎng)址呻纹。
Array 對象屬性
constructor 返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用堆生。
length 設(shè)置或返回數(shù)組中元素的數(shù)目。
prototype 使您有能力向?qū)ο筇砑訉傩院头椒ā?/p>
Array 對象方法
concat() 連接兩個或更多的數(shù)組雷酪，并返回結(jié)果淑仆。
join() 把數(shù)組的所有元素放入一個字符串。元素通過指定的分隔符進(jìn)行分隔哥力。
pop() 刪除并返回數(shù)組的最后一個元素蔗怠。 ?
shift() 刪除并返回數(shù)組的第一個元素
push() 向數(shù)組的末尾添加一個或更多元素，并返回新的長度吩跋。
unshift() 向數(shù)組的開頭添加一個或更多元素寞射，并返回新的長度。
reverse() 顛倒數(shù)組中元素的順序钞澳。
slice() 從某個已有的數(shù)組返回選定的元素
sort() 對數(shù)組的元素進(jìn)行排序
splice() 刪除元素怠惶，并向數(shù)組添加新元素。
toSource() 返回該對象的源代碼轧粟。
toString() 把數(shù)組轉(zhuǎn)換為字符串策治，并返回結(jié)果。
toLocaleString() 把數(shù)組轉(zhuǎn)換為本地數(shù)組兰吟，并返回結(jié)果通惫。
valueOf() 返回數(shù)組對象的原始值
方法一：
vararr = [0,2,3,4,4,0,2];varobj = {};vartmp = [];for(vari =0;i< arr.length;i++){
? if( !obj[arr[i]] ){
? ? ? obj[arr[i]] =1;
? ? ? tmp.push(arr[i]);
? }
}
console.log(tmp);
結(jié)果如下：?[0, 2, 3, 4]
?方法二：
vararr = [2,3,4,4,5,2,3,6],
? arr2 = [];for(vari =0;i< arr.length;i++){
? ? if(arr2.indexOf(arr[i]) <0){
? ? ? ? arr2.push(arr[i]);
? ? }
}
console.log(arr2);
結(jié)果為：[2, 3, 4, 5, 6]
?方法三：
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);
結(jié)果為：[2, 3, 4, 5, 6]
$() 函數(shù)是 jQuery() 函數(shù)的別稱。$() 函數(shù)用于將任何對象包裹成 jQuery 對象惭嚣，接著你就被允許調(diào)用定義在 jQuery 對象上的多個不同方法遵湖。你可以將一個選擇器字符串傳入 $() 函數(shù)，它會返回一個包含所有匹配的 DOM 元素數(shù)組的 jQuery 對象晚吞。
2延旧、如何找到所有 HTML select 標(biāo)簽的選中項？
$('[name=selectname] :selected')
3槽地、$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同迁沫？
$(this) 返回一個 jQuery 對象，你可以對它調(diào)用多個 jQuery 方法捌蚊，比如用 text() 獲取文本集畅，用val() 獲取值等等。
而 this 代表當(dāng)前元素缅糟，它是 JavaScript 關(guān)鍵詞中的一個挺智，表示上下文中的當(dāng)前 DOM 元素。你不能對它調(diào)用 jQuery 方法窗宦，直到它被 $() 函數(shù)包裹逃贝，例如 $(this)谣辞。
4、jquery怎么移除標(biāo)簽onclick屬性沐扳？
獲得a標(biāo)簽的onclick屬性: $("a").attr("onclick")
刪除onclick屬性：$("a").removeAttr("onclick");
設(shè)置onclick屬性：$("a").attr("onclick","test();");
5泥从、jquery中addClass,removeClass,toggleClass的使用。
$(selector).addClass(class)：為每個匹配的元素添加指定的類名
$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類沪摄，刪除class中某個值躯嫉；
$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個類
$(selector).removeAttr(class);刪除class這個屬性；
(1)祈餐、基本選擇器：#id，class,element,*;
(2)哄陶、層次選擇器：parent > child帆阳，prev + next ，prev ~ siblings
(3)屋吨、基本過濾器選擇器：:first蜒谤，:last ，:not 至扰，:even 鳍徽，:odd ，:eq 敢课，:gt 阶祭，:lt
(4)、內(nèi)容過濾器選擇器： :contains 直秆，:empty 濒募，:has ，:parent
(5)圾结、可見性過濾器選擇器：:hidden 瑰剃，:visible
(6)、屬性過濾器選擇器：[attribute] 疫稿，[attribute=value] ，[attribute!=value] 鹃两，[attribute^=value] 遗座，[attribute$=value] ，[attribute*=value]
(7)俊扳、子元素過濾器選擇器：:nth-child 途蒋，:first-child ，:last-child 馋记，:only-child
(8)号坡、表單選擇器： :input 懊烤，:text ，:password 宽堆，:radio 腌紧，:checkbox ，:submit 等畜隶；
(9)壁肋、表單過濾器選擇器：:enabled ，:disabled 籽慢，:checked 浸遗，:selected
7、jQuery中的Delegate()函數(shù)有什么作用箱亿？
? ?delegate()會在以下兩個情況下使用到：
?1跛锌、如果你有一個父元素，需要給其下的子元素添加事件届惋，這時你可以使用delegate()了髓帽，代碼如下：
$("ul").delegate("li","click", function(){ $(this).hide(); });
?2、當(dāng)元素在當(dāng)前頁面中不可用時盼樟，可以使用delegate()
8氢卡、$(document).ready()方法和window.onload有什么區(qū)別？
?(1)晨缴、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的译秦。
?(2)、$(document).ready()?方法可以在DOM載入就緒時就對其進(jìn)行操縱击碗，并調(diào)用執(zhí)行綁定的函數(shù)筑悴。
9、如何用jQuery禁用瀏覽器的前進(jìn)后退按鈕稍途？
實現(xiàn)代碼如下：
$(document).ready(function() {
window.history.forward(1);
? //OR window.history.forward(-1); });
10阁吝、 jquery中$.get()提交和$.post()提交有區(qū)別嗎？
相同點：都是異步請求的方式來獲取服務(wù)端的數(shù)據(jù)械拍；
異同點：
1突勇、請求方式不同：$.get()?方法使用GET方法來進(jìn)行異步請求的。$.post()?方法使用POST方法來進(jìn)行異步請求的坷虑。
2甲馋、參數(shù)傳遞方式不同：get請求會將參數(shù)跟在URL后進(jìn)行傳遞，而POST請求則是作為HTTP消息的實體內(nèi)容發(fā)送給Web服務(wù)器的迄损，這種傳遞是對用戶不可見的定躏。
3、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB?而POST要大的多
4、安全問題：?GET?方式請求的數(shù)據(jù)會被瀏覽器緩存起來痊远，因此有安全問題垮抗。
$.ajax({
? ? url:'http://www.baidu.com',
? ? type:'POST',
? ? data:data,
? ? cache:true,
? ? headers:{},
? ? beforeSend：function(){},
? ? success:function(){},
? ? error:function(){},
? ? complete:function(){}
});
12冒版、jQuery的事件委托方法bind 、live矾削、delegate壤玫、on之間有什么區(qū)別？
(1)哼凯、bind 【jQuery 1.3之前】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)欲间；
語法：bind(type,[data],function(eventObject))；
特點：
(1)断部、適用于頁面元素靜態(tài)綁定猎贴。只能給調(diào)用它的時候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件蝴光。
(2)她渴、當(dāng)頁面加載完的時候，你才可以進(jìn)行bind()蔑祟，所以可能產(chǎn)生效率問題趁耗。
實例如下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3之后】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)疆虚；
語法：live(type, [data], fn);
特點：
(1)苛败、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了径簿。
(2)罢屈、live正是利用了事件委托機制來完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document篇亭，新添加的元素不必再綁定一次監(jiān)聽器缠捌。
(3)、使用live（）方法但卻只能放在直接選擇的元素后面译蒂，不能在層級比較深曼月，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以柔昼，但$("body").find("ul").live...不行哑芹；?
實例如下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監(jiān)聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特點：
(1)岳锁、選擇就近的父級元素绩衷，因為事件可以更快的冒泡上去，能夠在第一時間進(jìn)行處理激率。
(2)咳燕、更精確的小范圍使用事件代理，性能優(yōu)于.live()乒躺≌忻ぃ可以用在動態(tài)添加的元素上。
實例如下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)嘉冒、on 【1.7版本整合了之前的三種方式的新事件綁定機制】
定義和用法：將監(jiān)聽事件綁定到指定元素上曹货。
語法：on(type,[selector],[data],fn)
實例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數(shù)的位置寫法與delegate不一樣。
說明：on方法是當(dāng)前JQuery推薦使用的事件綁定方法讳推，附加只運行一次就刪除函數(shù)的方法是one()顶籽。
?總結(jié)：.bind(), .live(), .delegate(),.on()分別對應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()
在網(wǎng)頁中礼饱，一個元素占有空間的大小由幾個部分構(gòu)成，其中包括元素的內(nèi)容（content）究驴，元素的內(nèi)邊距（padding）镊绪，元素的邊框（border），元素的外邊距（margin）四個部分洒忧。這四個部分占有的空間中蝴韭，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域熙侍。4個部分一起構(gòu)成了css中元素的盒模型榄鉴。
2、行內(nèi)元素有哪些核行？塊級元素有哪些牢硅？ 空(void)元素有那些？
行內(nèi)元素：a芝雪、b减余、span、img惩系、input位岔、strong、select堡牡、label抒抬、em、button晤柄、textarea
塊級元素：div擦剑、ul、li、dl惠勒、dt赚抡、dd、p纠屋、h1-h6涂臣、blockquote
空元素：即系沒有內(nèi)容的HTML元素，例如：br售担、meta赁遗、hr、link族铆、input岩四、img
一道經(jīng)典的問題哥攘，實現(xiàn)方法有很多種炫乓，以下是其中一種實現(xiàn)：
HTML結(jié)構(gòu)：
? ?
CSS：
.wrapper {
? ? position: relative;
? ? width: 500px;
? ? height: 500px;
? ? border: 1px solid red;
}
.content{
? ? position: absolute;
? ? width: 200px;
? ? height: 200px;
? ? /*top、bottom献丑、left和right 均設(shè)置為0*/? ? top: 0;
? ? bottom: 0;
? ? left: 0;
? ? right: 0;
? ? /*margin設(shè)置為auto*/? ? margin:auto;
? ? border: 1px solid green;? ?
}
效果如下：
href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接创橄，用于超鏈接箩做。
src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置妥畏；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)邦邦，例如js腳本，img圖片和frame等元素醉蚁。
當(dāng)瀏覽器解析到該元素時燃辖，會暫停其他資源的下載和處理，直到將該資源加載网棍、編譯黔龟、執(zhí)行完畢，圖片和框架等元素也如此滥玷，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)氏身。這也是為什么將js腳本放在底部而不是頭部。
同步是阻塞模式蛋欣，異步是非阻塞模式。
同步就是指一個進(jìn)程在執(zhí)行某個請求的時候如贷，若該請求需要一段時間才能返回信息陷虎，那么這個進(jìn)程將會一直等待下去到踏，直到收到返回信息才繼續(xù)執(zhí)行下去；
異步是指進(jìn)程不需要一直等下去尚猿，而是繼續(xù)執(zhí)行下面的操作夭禽，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時系統(tǒng)會通知進(jìn)程進(jìn)行處理谊路，這樣可以提高執(zhí)行的效率。
相同點：px和em都是長度單位缠劝；
異同點：px的值是固定的，指定是多少就是多少骗灶，計算比較容易惨恭。em得值不是固定的，并且em會繼承父級元素的字體大小耙旦。
瀏覽器的默認(rèn)字體高都是16px脱羡。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em免都。
IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink(基于webkit绕娘，Google與Opera Software共同開發(fā))
漸進(jìn)增強 progressive enhancement：
針對低版本瀏覽器進(jìn)行構(gòu)建頁面险领，保證最基本的功能侨舆，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗绢陌。
優(yōu)雅降級 graceful degradation：
一開始就構(gòu)建完整的功能挨下，然后再針對低版本瀏覽器進(jìn)行兼容。
區(qū)別：
a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始脐湾，并試圖減少用戶體驗的供給
b. 漸進(jìn)增強則是從一個非吵舭剩基礎(chǔ)的，能夠起作用的版本開始秤掌，并不斷擴(kuò)充耗啦，以適應(yīng)未來環(huán)境的需要
c. 降級（功能衰減）意味著往回看；而漸進(jìn)增強則意味著朝前看机杜，同時保證其根基處于安全地帶
9帜讲、sessionStorage 、localStorage 和?cookie 之間的區(qū)別
?共同點：用于瀏覽器端存儲的緩存數(shù)據(jù)
不同點：
(1)椒拗、存儲內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了Cookie后似将，數(shù)據(jù)會發(fā)送到服務(wù)器端获黔，造成一定的寬帶浪費；
? ? ? ? web storage,會將數(shù)據(jù)保存到本地在验，不會造成寬帶浪費玷氏；
(2)、數(shù)據(jù)存儲大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會話標(biāo)識腋舌；web storage數(shù)據(jù)存儲可以達(dá)到5M;
(3)盏触、數(shù)據(jù)存儲的有效期限不同：cookie只在設(shè)置了Cookid過期時間之前一直有效，即使關(guān)閉窗口或者瀏覽器块饺；
sessionStorage,僅在關(guān)閉瀏覽器之前有效赞辩；localStorage,數(shù)據(jù)存儲永久有效；
(4)授艰、作用域不同：cookie和localStorage是在同源同窗口中都是共享的辨嗽；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面淮腾；
?10糟需、Web Storage與Cookie相比存在的優(yōu)勢：
(1)、存儲空間更大：IE8下每個獨立的存儲空間為10M谷朝，其他瀏覽器實現(xiàn)略有不同洲押，但都比Cookie要大很多。
(2)圆凰、存儲內(nèi)容不會發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后诅诱，Cookie的內(nèi)容會隨著請求一并發(fā)送的服務(wù)器，這對于本地存儲的數(shù)據(jù)是一種帶寬浪費送朱。而Web Storage中的數(shù)據(jù)則僅僅是存在本地娘荡，不會與服務(wù)器發(fā)生任何交互。
(3)驶沼、更多豐富易用的接口：Web Storage提供了一套更為豐富的接口炮沐，如setItem,getItem,removeItem,clear等,使得數(shù)據(jù)操作更為簡便。cookie需要自己封裝回怜。
(4)大年、獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的玉雾，因此不會造成數(shù)據(jù)混亂翔试。
定義和用法:
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）垦缅。Ajax 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下驹碍，能夠更新部分網(wǎng)頁的技術(shù)壁涎。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容凡恍，必須重載整個網(wǎng)頁頁面。
優(yōu)點：
1.減輕服務(wù)器的負(fù)擔(dān),按需取數(shù)據(jù),最大程度的減少冗余請求
2.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗
3.基于xml標(biāo)準(zhǔn)化,并被廣泛支持,不需安裝插件等,進(jìn)一步促進(jìn)頁面和數(shù)據(jù)的分離
缺點：
1.AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.
2.AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.
3.對流媒體還有移動設(shè)備的支持不是太好等
AJAX的工作原理：
1.創(chuàng)建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
2.判斷數(shù)據(jù)傳輸方式(GET/POST)
3.打開鏈接 open()
4.發(fā)送 send()
5.當(dāng)ajax對象完成第四步（onreadystatechange）數(shù)據(jù)接收完成怔球，判斷http響應(yīng)狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調(diào)函數(shù)
12嚼酝、請指出document load和document ready的區(qū)別？
共同點：這兩種事件都代表的是頁面文檔加載時觸發(fā)竟坛。
異同點：
ready 事件的觸發(fā)闽巩，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）。
onload 事件的觸發(fā)担汤，表示頁面包含圖片等文件在內(nèi)的所有元素都加載完成涎跨。
1、寫一個function漫试，清除字符串前后的空格。（兼容所有瀏覽器）
function trim(str) {
? ? if(str &&typeofstr ==="string") {
? ? ? ? returnstr.replace(/(^\s*)|(\s*)$/g,"");//去除前后空白符? ? }
}
varreg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
varemail ="example@qq.com";
console.log(reg.test(email));? // true?
1驾荣、規(guī)避javascript多人開發(fā)函數(shù)重名問題
命名空間
封閉空間
js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層普泡、控制層）
seajs
變量轉(zhuǎn)換成對象的屬性
對象化
壓縮css、js文件
合并js撼班、css文件歧匈，減少http請求
外部js、css文件放在最底下
減少dom操作砰嘁，盡可能用變量替代不必要的dom操作
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網(wǎng)站注冊用戶的瀏覽器內(nèi)運行非法的HTML標(biāo)簽或者JavaScript進(jìn)行的一種攻擊矮湘。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries斟冕，跨站點請求偽造）：指攻擊者通過設(shè)置好的陷阱，強制對已完成的認(rèn)證用戶進(jìn)行非預(yù)期的個人信息或設(shè)定信息等某些狀態(tài)更新缅阳。
4磕蛇、web前端開發(fā)，如何提高頁面性能優(yōu)化十办？
內(nèi)容方面：
1.減少 HTTP 請求 (Make Fewer HTTP Requests)
2.減少 DOM 元素數(shù)量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可緩存 (Make Ajax Cacheable)
針對CSS：
1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4.避免 CSS 表達(dá)式 (Avoid CSS Expressions)
針對JavaScript ：
1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4. 移除重復(fù)腳本 (Remove Duplicate Scripts)
面向圖片(Image)：
1.優(yōu)化圖片
2 不要在 HTML 中使用縮放圖片
3 使用恰當(dāng)?shù)膱D片格式
4 使用 CSS Sprites 技巧對圖片優(yōu)化
5秀撇、前端開發(fā)中，如何優(yōu)化圖像向族？圖像格式的區(qū)別呵燕？
優(yōu)化圖像：
1、不用圖片件相，盡量用css3代替虏等。 比如說要實現(xiàn)修飾效果弄唧，如半透明、邊框霍衫、圓角候引、陰影、漸變等敦跌，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成澄干。
2、?使用矢量圖SVG替代位圖柠傍。對于絕大多數(shù)圖案麸俘、圖標(biāo)等，矢量圖更小惧笛，且可縮放而無需生成多套圖〈用模現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用患整！
3.拜效、使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG各谚、GIF紧憾、PNG。
基本上昌渤，內(nèi)容圖片多為照片之類的赴穗，適用于JPEG。
而修飾圖片通常更適合用無損壓縮的PNG膀息。
GIF基本上除了GIF動畫外不要使用般眉。且動畫的話，也更建議用video元素和視頻格式潜支，或用SVG動畫取代煤篙。
4、按照HTTP協(xié)議設(shè)置合理的緩存毁腿。
5辑奈、使用字體圖標(biāo)webfont、CSS Sprites等已烤。
6糖声、用CSS或JavaScript實現(xiàn)預(yù)加載际邻。
7可婶、WebP圖片格式能給前端帶來的優(yōu)化泼舱。WebP支持無損、有損壓縮裕循，動態(tài)臣嚣、靜態(tài)圖片净刮，壓縮比率優(yōu)于GIF、JPEG硅则、JPEG2000淹父、PG等格式，非常適合用于網(wǎng)絡(luò)等圖片傳輸怎虫。
?圖像格式的區(qū)別：
矢量圖：圖標(biāo)字體暑认，如 font-awesome；svg?
位圖：gif,jpg(jpeg),png
區(qū)別：
1大审、gif:是是一種無損蘸际，8位圖片格式。具有支持動畫徒扶，索引透明粮彤，壓縮等特性。適用于做色彩簡單(色調(diào)少)的圖片姜骡，如logo,各種小圖標(biāo)icons等导坟。
2、JPEG格式是一種大小與質(zhì)量相平衡的壓縮圖片格式溶浴。適用于允許輕微失真的色彩豐富的照片乍迄，不適合做色彩簡單(色調(diào)少)的圖片管引，如logo,各種小圖標(biāo)icons等士败。
3、png:PNG可以細(xì)分為三種格式:PNG8褥伴，PNG24谅将，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲的顏色值重慢。
關(guān)于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎(chǔ)上增加了8位（256階）的alpha通道透明;
優(yōu)缺點：
1饥臂、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2似踱、對于需要高保真的較復(fù)雜的圖像隅熙，PNG雖然能無損壓縮，但圖片文件較大核芽，不適合應(yīng)用在Web頁面上囚戚。?
渲染的流程如下：
1.解析HTML文件驰坊，創(chuàng)建DOM樹。
? ?自上而下哮独，遇到任何樣式（link拳芙、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）察藐。
2.解析CSS。優(yōu)先級：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式
3.將CSS與DOM合并舟扎，構(gòu)建渲染樹（Render Tree）
4.布局和繪制分飞，重繪（repaint）和重排（reflow）
