jquery面試常見技術問題

時間 2019-11-11

標籤 jquery 面試常見技術問題欄目 JQuery 简体版

原文原文鏈接

面試常見技術問題javascript

------------ JQ -----------1、jq常見選擇器？php

，號選擇器，分組選擇器。空格，祖父選擇器。>大於號，父子選擇器。+號選擇器，緊接下一個兄弟選擇器。~號，元素以後全部的siblings元素。css

：first，：last，：not，：first-child，:last-child,:animated.：checkedhtml

2. jQuery插件實現方式，分別介紹？前端

jQuery.fn.extend 封裝直接在$下面的方法，就是根下面，html5

擴展 jQuery 元素集來提供新的方法（一般用來製做插件）。java

$.extend用來在jQuery命名空間上增長新函數。用一個或多個其餘對象來擴展一個對象，返回被擴展的對象jquery

批量的方法用fn，靜態的用$.extend（），不建議用擴展到根下面。android

3.bind和live的區別?ios

live方法實際上是bind方法的變種，其基本功能就同bind方法的功能是同樣的，都是爲一個元素綁定某個事件，可是bind方法只能給當前存在的元素綁定事件，對於過後採用JS等方式新生成的元素無效，而live方法則正好彌補了bind方法的這個缺陷，它能夠對後生成的元素也能夠綁定相應的事件.

js和jq如何轉換？

jQuery 對象是經過 jQuery 包裝DOM 對象後產生的對象。jQuery 對象是 jQuery 獨有的，其可使用 jQuery 裏的方法，可是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 這裏的 $("#img")就是 jQuery 對象。

DOM對象就是Javascript 固有的一些對象操做。DOM 對象能使用Javascript 固有的方法，可是不能使用 jQuery 裏的方法。例如：document.getElementById("img").src = 「test.jpg"；這裏的document.getElementById("img") 就是DOM 對象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等價的，是正確的，可是 $("#img").src = "test.jpg" ；或者 document.getElementById("img").attr("src","test.jpg"); 都是錯誤的。

1. DOM 對象轉成 jQuery 對象

對於已是一個 DOM 對象，只須要用 $() 把DOM對象包裝起來，就能夠得到一個 jQuery 對象了，$(DOM 對象)

如：　var v = document.getElementById("v"); //DOM對象

var $v = $(v); //jQuery 對象

轉換後，就能夠任意使用 jQuery 的方法。

2. jQuery 對象轉成 DOM 對象

兩種轉換方式講一個 jQuery 對象轉換成 DOM 對象： [index] 和 .get(index)；

(1) jQuery 對象是一個數據對象，能夠經過 [index] 的方法，來獲得相應的 DOM 對象。

如： var $v = $("#v"); //jQuery 對象

var v = $v[0]; //DOM 對象

alert(v.checked); //檢測這個checkbox是否被選中

(2) jQuery 自己提供，經過.get(index) 方法獲得相應的 DOM 對象

如：var $v = $("#v"); //jQuery 對象

var v = $v.get(0); //DOM對象 ( $v.get()[0] 也能夠 )

alert(v.checked); //檢測這個 checkbox 是否被選中

經過以上方法，能夠任意的相互轉換 jQuery 對象和 DOM 對象，須要再強調的是： DOM 對象才能使用DOM 中的方法，jQuery 對象是不可使用ＤＯＭ中的方法。

----------JS ----------

1.給出一個數組如何去掉重複的項？

實現一個把數組裏面的重複元素去除的方法：

主要的是Array的prototype的方法。

var arr=[1,3,5,3,6,9,1,2,2]

var arr=['a','b','a','c','c','ab','bc']

function removeRepeat(arr){

var i,tmpArr=[];

for(i in arr){

if(tmpArr.join(',').indexOf(arr[i])==-1){

tmpArr.push(arr[i]);

}

return tmpArr;

}

var r=removeRepeat(arr);

console.log(r);

二．方法：

Array.prototype.unique=function(){

var i,tmpArr=[];

for(i in this){

if(typeof this[i]!='function'){

if(tmpArr.join(',').indexOf(this[i])==-1){

tmpArr.push(this[i]);

}

return tmpArr;

}

var arr=['a','b','a','c','c','ab','bc'];

var r=arr.unique();

console.log(r);

2.js如何實現面向對象？

var name = 'Chen Hao';
var email = 'haoel(@)hotmail.com';
var website = 'http://coolshell.cn';

var chenhao = {
　　    name : 'Chen Hao',
　　    email : 'haoel(@)hotmail.com',
　　    website : 'http://coolshell.cn'
};

//以成員的方式
chenhao.name;
chenhao.email;
chenhao.website;
//以hash map的方式
chenhao["name"];
chenhao["email"];
chenhao["website"];

//咱們能夠看到，其用function來作class。
var Person = function(name, email, website){
    this.name = name;
    this.email = email;
    this.website = website;
    this.sayHello = function(){
        var hello = "Hello, I'm "+ this.name + "， \n" +
                    "my email is: " + this.email + "， \n" +
                    "my website is: " + this.website;
        alert(hello);
    };
};
var chenhao = new Person("Chen Hao", "haoel@hotmail.com",
                                     "http://coolshell.cn");
chenhao.sayHello();

Javascript的數據和成員封裝很簡單。沒有類徹底是對象操做。純動態！
Javascript function中的this指針很關鍵，若是沒有的話，那就是局部變量或局部函數。去找最緊跟的上一個function。
Javascript對象成員函數能夠在使用時臨時聲明，並把一個全局函數直接賦過去就行了。
Javascript的成員函數能夠在實例上進行修改，也就是說不一樣實例相同函數名的行爲不必定同樣。

3.js如何實現繼承?

定義一個Dog對象，並增長一個name屬性，該屬性能夠在新建對象時經過參數傳入

function Dog( name ){

this.name = name;

}

// 經過原型方式擴展Dog對象

Dog.prototype = {

// 從新覆蓋構造函數讓其指向Dog

constructor:Dog,

Wow:function(){

console.group();

console.info("I am: "+this.name );

console.info("WangWang....");

console.groupEnd();

yelp:function(){

this.Wow();

}

};

function MadDog(name){

Dog.apply( this, [name]);

}

MadDog.prototype=new Dog();

// 從新覆蓋構造函數，讓其指向MadDog

MadDog.prototype.constructor=MadDog;

MadDog.prototype.yelp=function()

{

self=this;

setInterval(function(){

self.Wow();

},5000);

}

var xiaoXian=new Dog("xiaoXian");

xiaoXian.yelp();

var xiaoMang=new MadDog("xiaoMang");

xiaoMang.yelp();

console.log( xiaoXian.constructor == xiaoMang.constructor );

4.若是擴展js中原生的String對象?string的方法？

String.prototype.name= function(){}

Slice從字符串的第一個參數提取第二個參數，也能夠截取數組。返回的結果類型：string/object

Substring 從字符串的第一個參數提取第二個參數，返回的結果類型，string。

Indexof 返回短字符串在長字符串出現的位置。

Lastindexof 返回最後一個短字符串出現的位置。

Replace 字符串的替換方法，

Split 字符串分割方法，能轉換爲數組，數組轉換字符串，用jion（）方法。

5.document.ready()和window.onload的區別?

Document.ready()是jQuery中準備出發的事件，當加載到當前元素就執行了，

Window.onload是整個頁面加載以後才執行。

閉包是什麼？

閉包是有權訪問另外一個函數做用域中的變量的函數。

閉包是個函數，而它「記住了周圍發生了什麼」。表現爲由「一個函數」體中定義了「另外一個函數」

「閉包」是一個表達式（通常是函數），它具備自由變量以及綁定這些變量的環境（該環境「封閉了」這個表達式）。

1. 閉包有權訪問函數內部的全部變量。

2.當函數返回一個閉包時，這個函數的做用域將會一直在內存中保存到閉包不存在爲止。

function f() {

var rs = [];

for (var i=0; i <10; i++) {

rs[i] = function() {

return i;

};

}

return rs;

}

var fn = f();

for (var i = 0; i < fn.length; i++) {

console.log('函數fn[' + i + ']()返回值:' + fn[i]());

}

---------- WEB-------------

1.什麼是響應式網頁?

經過CSS3 Media Query實現響應式Web設計

響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。

具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。不管用戶正在使用筆記本仍是iPad，咱們的頁面都應該可以自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不一樣設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，咱們就能夠沒必要爲不斷到來的新設備作專門的版本設計和開發了。

2. 介紹jQuery easyUI？jQuery easyUI組件使用?

jQuery EasyUI是一組基於jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富而且美觀的UI界面。開發者不須要編寫複雜的javascript，也不須要對css樣式有深刻的瞭解，開發者須要瞭解的只有一些簡單的html標籤。

佈局layout，上南，下北，左西右東，中間內容，左邊的組件是：tree，手風琴，中間的有tab，tab裏有datagrid數據表格，還有數據表格的toolbar工具欄。對話框dialog；

3. PHP中include和include_once的區別？

include_once()語句的語法和include()語句相似，主要區別也是避免屢次包含一個文件而引發函數或變量的重複定義。include_once() 語句在腳本執行期間包含並運行指定文件。include_once語句把include的功能擴展了。在程序執行期間，將指定的文件包含進來，若是從文件引用進來的程序先前已經包含過的時候，include_once()就不會把它再包含進來。也就是僅僅能夠引用同一個文件一次！

4.最熟悉的web的前端框架？

Jq，yui，extjs，prototype，dojo，mootools

5.雅虎的14條優化規則？

1. 儘量的減小 HTTP 的請求數 content

2. 使用 CDN（Content Delivery Network） server

3. 添加 Expires 頭(或者 Cache-control ) server

4. Gzip 組件 server

5. 將 CSS 樣式放在頁面的上方 css

6. 將腳本移動到底部（包括內聯的） javascript

7. 避免使用 CSS 中的 Expressions css

8. 將 JavaScript 和 CSS 獨立成外部文件 javascript css

9. 減小 DNS 查詢 content

10. 壓縮 JavaScript 和 CSS (包括內聯的) javascript css

11. 避免重定向 server

12. 移除重複的腳本 javascript

13. 配置實體標籤（ETags） css

14. 使 AJAX 緩存

6、Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式一般模擬老式瀏覽器（好比Microsoft IE 4和Netscape Navigator 4）的行爲以防止老站點沒法工做。

在IE 6出現時，在標準模式中使用的是正確的盒模型，在混雜模式中使用的則是老式的專有盒模型。爲了維持對IE 5和更低版本的向後兼容性，Opera 7和更高版本也在混雜模式中使用有缺點的IE盒模型。

7. 前端頁面有哪三層構成，分別是什麼？做用是什麼？

網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」

網頁的表示層（presentation layer）由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問題作出了回答。

網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM 主宰的領域。

使用 (X)HTML 去搭建文檔的結構。
使用 CSS 去設置文檔的呈現效果。
使用 DOM 腳本去實現文檔的行爲

8. 如何居中一個浮動元素?

方法一：讓最外面的層相對定位，left等於50%，而後內部嵌套層也使用相對定位且left設爲-50%，這樣的效果就是內層相對整行爲水平居中；

方法二：使用display: table;

方法三：直接使用table佈局（使用太多table容易讓結構看起來比較混亂，其實頁面中使用少許的table，只要不要嵌套使用，仍是能夠實現使用少許CSS，達到最好的效果的），這種方法這裏就不舉例演示了。

9. 若是讓你來製做一個訪問量很高的大型網站，你會如何來管理全部CSS文件、JS與圖片？

1、css文件，以及js文件儘可能分別都放在一個文件裏，由於客戶端請求服務器的次數就會減小。
2、背景圖儘可能採用聚合技術，就是放在一個圖片裏，用background-position來定位；
3、css文件裏儘可能都精簡一些，好比說#sidebarcontent{}啥的，咱們直接能夠用#s-c{}由於這樣整個文件的容量就會減小，一樣的原理，在線也能夠壓縮js文件。容量變小些嘛；

10. 什麼是DOM，什麼是BOM？以及它們的用法？

BOM 即瀏覽器對象模型，瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器「對話」，因爲現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，所以常被認爲是 BOM 的方法和屬性。全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

Window對象實際上是BOM中全部的對象都源自window對象，有location對象，history對象，方法有.Resize（）alert( ) .confirm( ).prompt( ).open().close().setInterval().setTimeout()。

window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

DOM的文檔對象模型，最頂級的對象是document。能夠js經過操做DOM，就是一個接口，能夠訪問html的標準方法。要改變頁面的某個東西，JavaScript 就須要得到對 HTML 文檔中全部元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是經過文檔對象模型來得到的（DOM）。

11. HTTP協議的狀態消息都有哪些?(如200、302對應的描述)國內外的JS牛人都知道哪些?

協議是指計算機通訊網絡中兩臺計算機之間進行通訊所必須共同遵照的規定或規則，超文本傳輸協議(HTTP)是一種通訊協議，它容許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器，

「100″ : Continue（繼續）初始的請求已經接受，客戶應當繼續發送請求的其他部分。（HTTP 1.1新）
「101″ : Switching Protocols（切換協議）請求者已要求服務器切換協議，服務器已確認並準備進行切換。（HTTP 1.1新）
「200″ : OK（成功）一切正常，對GET和POST請求的應答文檔跟在後面。
「201″ : Created（已建立）服務器已經建立了文檔，Location頭給出了它的URL。
「202″ : Accepted（已接受）服務器已接受了請求，但還沒有對其進行處理。
「203″ : Non-Authoritative Information（非受權信息）文檔已經正常地返回，但一些應答頭可能不正確，可能來自另外一來源。（HTTP 1.1新）。
「204″ : No Content（無內容）未返回任何內容，瀏覽器應該繼續顯示原來的文檔。
「205″ : Reset Content（重置內容）沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容（HTTP 1.1新）。
「206″ : Partial Content（部份內容）服務器成功處理了部分 GET 請求。（HTTP 1.1新）
「300″ : Multiple Choices（多種選擇）客戶請求的文檔能夠在多個位置找到，這些位置已經在返回的文檔內列出。若是服務器要提出優先選擇，則應該在Location應答頭指明。
「301″ : Moved Permanently（永久移動）請求的網頁已被永久移動到新位置。服務器返回此響應（做爲對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
「302″ : Found（臨時移動）相似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。注意，在HTTP1.0中對應的狀態信息是「Moved Temporatily」，出現該狀態代碼時，瀏覽器可以自動訪問新的URL，所以它是一個頗有用的狀態代碼。注意這個狀態代碼有時候能夠和301替換使用。例如，若是瀏覽器錯誤地請求http://host/~user（缺乏了後面的斜槓），有的服務器返回301，有的則返回302。嚴格地說，咱們只能假定只有當原來的請求是GET時瀏覽器纔會自動重定向。請參見307。
「303″ : See Other（查看其餘位置）相似於301/302，不一樣之處在於，若是原來的請求是POST，Location頭指定的重定向目標文檔應該經過GET提取（HTTP 1.1新）。
「304″ : Not Modified（未修改）自從上次請求後，請求的網頁未被修改過。原來緩衝的文檔還能夠繼續使用，不會返回網頁內容。
「305″ : Use Proxy（使用代理）只能使用代理訪問請求的網頁。若是服務器返回此響應，那麼，服務器還會指明請求者應當使用的代理。（HTTP 1.1新）
「307″ : Temporary Redirect（臨時重定向）和 302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即便原來的請求是POST，即便它實際上只能在POST請求的應答是303時才能重定向。因爲這個緣由，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器能夠跟隨重定向的GET和POST請求；若是是307應答，則瀏覽器只能跟隨對GET請求的重定向。（HTTP 1.1新）
「400″ : Bad Request（錯誤請求）請求出現語法錯誤。
「401″ : Unauthorized（未受權）客戶試圖未經受權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，而後在填寫合適的Authorization頭後再次發出請求。
「403″ : Forbidden（已禁止）資源不可用。服務器理解客戶的請求，但拒絕處理它。一般因爲服務器上文件或目錄的權限設置致使。
「404″ : Not Found（未找到）沒法找到指定位置的資源。
「405″ : Method Not Allowed（方法禁用）請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）禁用。（HTTP 1.1新）
「406″ : Not Acceptable（不接受）指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容（HTTP 1.1新）。
「407″ : Proxy Authentication Required（須要代理受權）相似於401，表示客戶必須先通過代理服務器的受權。（HTTP 1.1新）
「408″ : Request Time-out（請求超時）服務器等候請求時超時。（HTTP 1.1新）
「409″ : Conflict（衝突）一般和PUT請求有關。因爲請求和資源的當前狀態相沖突，所以請求不能成功。（HTTP 1.1新）
「410″ : Gone（已刪除）若是請求的資源已被永久刪除，那麼，服務器會返回此響應。該代碼與 404（未找到）代碼相似，但在資源之前有但如今已經不復存在的狀況下，有時會替代 404 代碼出現。若是資源已被永久刪除，那麼，您應當使用 301 代碼指定該資源的新位置。（HTTP 1.1新）
「411″ : Length Required（須要有效長度）不會接受包含無效內容長度標頭字段的請求。（HTTP 1.1新）
「412″ : Precondition Failed（未知足前提條件）服務器未知足請求者在請求中設置的其中一個前提條件。（HTTP 1.1新）
「413″ : Request Entity Too Large（請求實體過大）請求實體過大，已超出服務器的處理能力。若是服務器認爲本身可以稍後再處理該請求，則應該提供一個Retry-After頭。（HTTP 1.1新）
「414″ : Request-URI Too Large（請求的 URI 過長）請求的 URI（一般爲網址）過長，服務器沒法進行處理。
「415″ : Unsupported Media Type（不支持的媒體類型）請求的格式不受請求頁面的支持。
「416″ : Requested range not satisfiable（請求範圍不符合要求）服務器不能知足客戶在請求中指定的Range頭。（HTTP 1.1新）
「417″ : Expectation Failed（未知足指望值）服務器未知足」指望」請求標頭字段的要求。
「500″ : Internal Server Error（服務器內部錯誤）服務器遇到錯誤，沒法完成請求。
「501″ : Not Implemented（還沒有實施）服務器不具有完成請求的功能。例如，當服務器沒法識別請求方法時，服務器可能會返回此代碼。
「502″ : Bad Gateway（錯誤網關）服務器做爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答。
「503″ : Service Unavailable（服務不可用）服務器因爲維護或者負載太重未能應答。一般，這只是一種暫時的狀態。
「504″ : Gateway Time-out（網關超時）由做爲代理或網關的服務器使用，表示不能及時地從遠程服務器得到應答。（HTTP 1.1新）
「505″ : HTTP Version not supported（HTTP 版本不受支持）不支持請求中所使用的 HTTP 協議版本。

國內的比較牛的人：淘寶網UED官方博客。靈玉，大成小胖，承玉，拔赤

常去的技術論壇：博客園，

11.JSON和JSONP的區別？JSONP的原理？

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個字母的差異，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。

一、一個衆所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一概不許；

　　二、不過咱們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不只如此，咱們還發現凡是擁有」src」這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）；

　　三、因而能夠判斷，當前階段若是想經過純web端（ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；

　　四、恰巧咱們已經知道有一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據，更妙的是JSON還被js原生支持，因此在客戶端幾乎能夠爲所欲爲的處理這種格式的數據；

　　五、這樣子解決方案就呼之欲出了，web客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。

　　六、客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。

七、爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

12.如何讓ie6,7,8，兼容html5的標籤？

我一直使用公司裏的提供的jqside插件，裏面就是把html5的標籤放到字符串，用字符串的split的方法變爲數組，用while的方法，變量減減，用dom的createElement方法進行再ie678裏建立標籤。

if( $.isIE678 ){

var html5 = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),

i = html5.length;

while(i--) document.createElement(html5[i]);

}

13.WEB前端的開發工具？

Yslow，雅虎開發工具，判斷網頁裏哪一個運行的慢，基於網頁查找。

Firebug：火狐開發工具，也用過一段時間，挺好用的，只是不習慣。

Chrome：谷歌開發工具，比較適用於移動端和網頁的調試。

14.web前端的管理工具？

Svn，git

15.如何解析json？

用ajax去請求json數據，在回調函數裏，把數據傳過到函數裏。經過用一個for循環，用innerHTML和jQuery的方法html（）的方法，渲染到頁面裏。

-------CSS--------

1．常見ie6的瀏覽器兼容bug（3-5個）？

1.文字自己的大小不兼容。

一樣是font-size:14px的宋體文字，在不一樣瀏覽器下佔的空間是不同的，ie下實際佔高16px，下留白3px，ff 下實際佔高17px，上留白1px，下留白3px，opera下就更不同了。解決方案：給文字設定 line-height 。確保全部文字都有默認的 line-height 值。

2.ff下容器高度限定，即容器定義了height以後，容器邊框的外形就肯定了，不會被內容撐大，而ie6下是會被內容撐大，高度限定失效,ie7,8,9都不會撐大。因此不要輕易給容器定義height。解決方案用：height！important；min-height：100px；max-height： 200px

3.橫向上的撐破容器問題，。若是float 容器未定義寬度，ff下內容會盡量撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器須要定義width。

4.最被痛恨的，double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。解決方案，給浮動容器定義display:inline。

5. 吞吃現象。仍是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門爲解決ie6 bug而生的。

6.註釋也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案，ie6的這個bug 下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「<!–[if !IE]> picRotate start <![endif]–>」方法寫註釋。

7.img 下的留白，以下代碼：

把div的border打開，你發現圖片底部不是緊貼着容器底部的，是img後面的空白字符形成，要消除必須這樣寫

後面兩個標籤要緊挨着。ie7下這個bug 依然存在。解決方案：給img設定 display:block。

8. 失去line-height。<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。

解決方案：讓img 和文字都 float起來。

引伸：你們知道img 的align 有 text-top，middle，absmiddle啊什麼的，你能夠嘗試去調整img 和文字讓他們在ie和ff下能一致，你會發現怎麼調都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調整。

9.clear層應該單獨使用。也許你爲了節省代碼把clear屬性直接放到下面的一個內容層，這樣有問題，不只僅是ff和op下失去margin效果，ie下某些margin值也會失效
<div style=」background:red;float:left;」>dd</div>
<div style=」clear:both;margin-top:18px;background:green」>ff</div>

10.ie 下overflow:hidden對其下的絕對層position:absolute或者相對層 position:relative無效。

解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

11.ie6下嚴重的bug，float元素如沒定義寬度，內部若有div定義了height或zoom:1，這個div就會佔滿一整行，即便你給了寬度。float元素若是做爲佈局用或複雜的容器，都要給個寬度的

12.浮動元素以後跟着一個元素之間的有3像素的差距？

解決方案：浮動的元素：overflow：hidden；後面的元素設置_margin-left：-3px，

2. 在Css中那個屬性會影響dom讀取文檔流的順序？

Float

3. 行內元素有哪些？塊級元素有哪些？CSS的盒模型？

Css的盒模型：從外到裏，margin，border，padding，content。

塊元素在頁面裏，佔一行，能夠設定寬和高，能夠容納塊元素和行內元素。常見的塊元素有div，p，h1-h6，ul等。

行內元素沒有寬和高的屬性但能夠與其餘元素同一行，通常不能夠包含塊元素，行內元素的高度通常由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有a，b，span，strong，em等。

4. CSS引入的方式有哪些? link和@import的區別是?

內聯引用CSS。可靈巧應用樣式於各標籤中。方便於編寫代碼時的使用。沒有整篇文件的「統一性」，在須要修改某樣式的時候也變的比較困難。

內部引用CSS

將樣式規則寫在<STYLE>...</STYLE>標籤之中。

外部引用 link 標籤引用CSS

將樣式規則寫在.css的樣式文件中，再以<link>標籤引入。

這樣引入該css樣式表文件之後，就能夠直接套用該樣式檔案中所制定的樣式了。

外部引用 @import 引用CSS

跟link方法很像，但必須放在<STYLE>...</STYLE> 中：

能夠靈活的引入css文件對xhtml元素進行控制。有時候也用來編寫某些css hack。
這種方法的缺點：在個別文件或元素的靈活度不足

老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。

兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

5. CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

ID 和 CLASS

Class 可繼承

僞類A標籤能夠繼承

列表 UL LI DL DD DT 可繼承

優先級就近原則，樣式定義最近者爲準

載入樣式以最後載入的定位爲準

優先級爲

!important > [ id > class > tag ]

Important 比內聯優先級高

CSS層疊是什麼?介紹一下？

CSS翻譯過來叫作層疊樣式表。運用到層疊的時候，主要就是靠CSS的組合與子選擇器。去編輯樣式。。它的做用是定義網頁的外觀（例如字體，顏色等等），它也能夠和javascript等瀏覽器端腳本語言合做作出許多動態的效果。

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式一般存儲在樣式表中
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表能夠極大提升工做效率
外部樣式表一般存儲在 CSS 文件中
多個樣式定義可層疊爲一

html的意義？

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁

HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>
HTML 標籤一般是成對出現的，好比 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤

-------HTML5------

1. 手機瀏覽器獨有的三個事件？

onTouchmove，ontouchend，ontouchstart，ontouchcancel。

2. 爲何要用Zepto?

jquery適用於PC端桌面環境，桌面環境更加複雜，jquery須要考慮的因素很是多，尤爲表如今兼容性上面，相對於PC端，移動端的發雜都遠不及PC端,手機上的帶寬永遠比不上pc端。pc端下載jquery到本地只須要1~3秒（90+K），可是移動端就慢了不少，2G網絡下你會看到一大片空白網頁在加載，相信用戶第二次就沒打開的慾望了。zepto解決了這個問題，只有不到10K的大小，2G網絡環境下也毫無壓力，表現不遜色於jquery。因此移動端開發首選框架，我的推薦zepto.js。

jq mobi，zepoto手機跨平臺的手機框架。

3. 介紹HTML5和CSS3(對比)?

HTML 5 還包含了新的語義化的元素標籤，好比：<nav>, <header>, <footer>，<aside> 以及 <figure> 等等。

拖放（Drag 和 drop）是 HTML5 標準的組成部分。canvas 元素用於在網頁上繪製圖形。

HTML5 支持內聯 SVG（矢量圖形）

Canvas 和 SVG 都容許您在瀏覽器中建立圖形，可是它們在根本上是不一樣的。

HTML5 Geolocation（地理定位）用於定位用戶的位置。在谷歌地圖上顯示您的位置。

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲

HTML5 服務器發送事件（server-sent event）容許網頁得到來自服務器的更新。

4. 如何區分多個終端（zepto）？

用detece來判斷：

// general device type

$.os.phone

$.os.tablet

// specific OS

$.os.ios

$.os.android

$.os.webos

$.os.blackberry

$.os.bb10

$.os.rimtabletos

// specific device type

$.os.iphone

$.os.ipad

$.os.touchpad

$.os.kindle

// specific browser

$.browser.chrome

$.browser.firefox

$.browser.silk

$.browser.playbook

// Additionally, version information is available as well.

// Here's what's returned for an iPhone running iOS 6.1.

!!$.os.phone // => true

!!$.os.iphone // => true

!!$.os.ios // => true

!!$.os.version // => "6.1"

!!$.browser.version // => "536.26"

5.border-image原理？

1.調用邊框圖片

border-image的url屬性，經過相對或絕對路徑連接圖片。

2，邊框圖片的建裁

border-image的數值參數剪裁邊框圖片，造成九宮格。

3..剪裁圖片的邊框

邊框圖片被切割成9部分，以一一對應的關係放到div邊框的九宮格中，而後再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。

4.執行重複屬性

被填充至邊框九宮格四個角落的的邊框圖片是不執行重複屬性的。上下的九宮格執行水平方向的重複屬性（拉伸或平鋪），左右的格子執行垂直方向的重複屬性，而中間的那個格子則水平重複和垂直方向的重複都要執行。

五、完成繪製，實現效果

6 自定義手機UI組件？如何實現的？

Input,button,radio,checkbox.

把自己的input隱藏掉，給後面的label進行樣式，而且用label的for屬性，去指定input的id。去點擊label的時候，css3的：chcked和：disabled去肯定狀態，樣式用css精靈去排版。

7.圖片切換的實現思路?

以全局監聽的方式經過a標籤的描點進行view動態切換頁面，只要把a標籤帶有id的href屬性的值指到錨點，用CSS3的動畫進行切換頁面.

8. HTML5都有哪些新的JS API?

◆二維繪圖API，能夠用在一個新的畫布（Canvas）元素上以呈現圖像、遊戲圖形或者其餘運行中的可視圖形。

◆一個容許web應用程序將自身註冊爲某個協議或MIME類型的API。

◆一個引入新的緩存機制以支持脫機web應用程序的API。

◆一個可以播放視頻和音頻的API，可使用新的video和audio元素。

◆一個歷史紀錄API，它能夠公開正在瀏覽的歷史紀錄，從而容許頁面更好地支持AJAX應用程序中實現對後退功能。

◆跨文檔/跨域的消息傳遞，它提供了一種方式，使得文檔能夠互相通訊而不用考慮它們的來源域，在某種程度上，這樣的設計是爲了防止跨站點的腳本攻擊。

◆一個支持拖放操做的API，用它能夠與draggable特性相關聯。

◆一個支持編輯操做的API，用它能夠與一個新的全局contenteditable特性相關聯。

◆一個新的網絡API，它支持web應用程序在本地網絡上互相通訊，並在它們的源服務器上維持雙向的通訊。

◆使用JavaScript API的鍵/值對實現客戶端的持久化存儲，同時支持嵌入的SQL數據庫。

◆服務器發送的事件，經過它能夠與新的事件源（event-source）元素關聯，新的事件源元素有利於與遠程數據源的持久性鏈接，並且極大地消除了在Web應用程序中對輪詢的需求。

---- PHP，SQL,AJAX ---

簡述下cookie的操做，還有cookie的屬性都知道哪些？

Session是由應用服務器維持的一個服務器端的存儲空間，用戶在鏈接服務器時，會由服務器生成一個惟一的SessionID,用該SessionID 爲標識符來存取服務器端的Session存儲空間。

Cookie是客戶端的存儲空間，由瀏覽器來維持。

若是不設置過時時間，則表示這個cookie生命週期爲瀏覽器會話期間，只要關閉瀏覽器窗口，cookie就消失了。

2. AJAX是什麼? AJAX的交互模型(流程)? AJAX跨域的解決辦法?

同步和異步的區別?

Asynchronous JavaScript and XML（異步JavaScript和XML），是一種建立交互式網頁應用的網頁開發技術。簡單的說它是多種技術的組合，目的就是讓前臺的數據交互變得更快捷，不用刷新頁面就能夠完成數據的更新。

優勢很明顯，利於用戶體驗，不會打斷用戶的操做，在不刷新頁面的狀況下更新內容，減少服務器壓力也是它很硬性的一個優勢；而缺點，除了倍受追捧的SEO問題，安全問題、前進後退（這個雖然能夠用其餘方法解決，但AJAX自己的機制仍是沒變）、破壞程序的異常機制以及對新興手持設備支持不完美的問題都是它現存的一些缺點。

readyState五種狀態：

請求未初始化，尚未調用 open()。
請求已經創建，可是尚未發送，尚未調用 send()。
請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。
請求在處理中；一般響應中已有部分數據可用了，沒有所有完成。
響應已完成；您能夠獲取並使用服務器的響應了。

status常見的幾種狀態

100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——成功
201——提示知道新文件的URL
300——請求的資源可在多處獲得
301——刪除請求數據
302------緩存問題
404——沒有發現文件、查詢或URl
500——服務器產生內部錯誤

3.正則表達式有系統學習過嗎(看書或網上教程)?有的話就問問簡單點的郵箱驗證、URL驗證， 或者問問 貪婪匹配與懶惰匹配 的理論知識？

驗證郵箱

function isEmail(str){

var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

return reg.test(str);

}

驗證日期格式

function testReg(reg,str){

return reg.test(str);

}

var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;

字母和數字的組合

function istrue(str){

var reg=/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;

return reg.test(str);

}

正則匹配價格

function checkPrice( me ){

if( !( /^(?:\d+|\d+\.\d{0,2})$/.test(me.value) ) ){

me.value = me.value.replace(/^(\d*\.\d{0,2}|\d+).*$/,'$1');

}

電話號碼正則

telReg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/

當正則表達式中包含能接受重複的限定符時，一般的行爲是（在使整個表達式能獲得匹配的前提下）匹配儘量多的字符。咱們更須要懶惰匹配，也就是匹配儘量少的字符。前面給出的限定符均可以被轉化爲懶惰匹配模式，只要在它後面加上一個問號?。這樣.*?就意味着匹配任意數量的重複，可是在能使整個匹配成功的前提下使用最少的重複。