JQuery

1. jQuery 庫中的 $() 是什么？

$()函數(shù)是 jQuery() 函數(shù)的別稱，乍一看這很怪異，還使 jQuery 代碼晦澀難懂躬它。一旦你適應(yīng)了，你會愛上它的簡潔东涡。$() 函數(shù)用于將任何對象包裹成 jQuery 對象冯吓，接著你就被允許調(diào)用定義在 jQuery 對象上的多個不同方法。你甚至可以將一個選擇器字符串傳入 $() 函數(shù)疮跑，它會返回一個包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對象组贺。

2. 網(wǎng)頁上有 5 個 <div> 元素，如何使用 jQuery來選擇它們祖娘？

另一個重要的 jQuery 問題是基于選擇器的失尖。jQuery 支持不同類型的選擇器，例如 ID 選擇器渐苏、class 選擇器掀潮、標(biāo)簽選擇器。鑒于這個問題沒提到 ID 和 class琼富，你可以用標(biāo)簽選擇器來選擇所有的 div 元素仪吧。jQuery 代碼：$("div")，這樣會返回一個包含所有 5 個 div 標(biāo)簽的 jQuery 對象鞠眉。

3. jQuery 里的 ID 選擇器和 class 選擇器有何不同薯鼠？

如果你用過 CSS择诈，你也許就知道 ID 選擇器和 class 選擇器之間的差異，jQuery 也同樣如此出皇。

ID 選擇器使用 ID 來選擇元素羞芍，比如 #element1，
class 選擇器使用 CSS class 來選擇元素恶迈。
當(dāng)你只需要選擇一個元素時涩金，使用 ID 選擇器谱醇，而如果你想要選擇一組具有相同 CSS class 的元素暇仲，就要用 class 選擇器。
在面試過程中副渴，你有很大幾率會被要求使用 ID 選擇器和 class 選擇器來寫代碼奈附。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器：

$('#LoginTextBox') 
 // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') 
// Returns all elements with CSS class active.

正如你所見，從語法角度來說煮剧，ID 選擇器和 class 選擇器的另一個不同之處是斥滤，前者用字符”#”而后者用字符”.”。

4. 如何在點(diǎn)擊一個按鈕時使用 jQuery 隱藏一個圖片勉盅？

這是一個事件處理問題佑颇。jQuery為按鈕點(diǎn)擊之類的事件提供了很好的支持。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片草娜。你需要知道如何為按鈕設(shè)置事件并執(zhí)行hide() 方法挑胸，代碼如下所示：

$('#ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

我喜歡這個問題，因?yàn)楹苜N近實(shí)際使用宰闰，代碼也不復(fù)雜茬贵。

5. $(document).ready() 是個什么函數(shù)？

為什么要用它移袍？
這個問題很重要解藻，并且常常被問到。
ready() 函數(shù)用于在文檔進(jìn)入ready狀態(tài)時執(zhí)行代碼葡盗。當(dāng)DOM 完全加載（例如HTML被完全解析DOM樹構(gòu)建完成時）螟左，jQuery允許你執(zhí)行代碼。使用$(document).ready()的最大好處在于它適用于所有瀏覽器觅够，jQuery幫你解決了跨瀏覽器的難題路狮。

6. JavaScript window.onload 事件和 jQuery ready 函數(shù)有何不同？

這個問答是緊接著上一個的蔚约。
JavaScript window.onload 事件和 jQuery ready 函數(shù)之間的主要區(qū)別是:

• 前者除了要等待 DOM 被創(chuàng)建還要等到包括大型圖片奄妨、音頻、視頻在內(nèi)的所有外部資源都完全加載苹祟。
  如果加載圖片和媒體內(nèi)容花費(fèi)了大量時間砸抛，用戶就會感受到定義在 window.onload 事件上的代碼在執(zhí)行時有明顯的延遲评雌。
• 另一方面，jQuery ready() 函數(shù)只需對 DOM 樹的等待直焙，而無需對圖像或外部資源加載的等待景东，從而執(zhí)行起來更快。使用 jQuery $(document).ready() 的另一個優(yōu)勢是你可以在網(wǎng)頁里多次使用它奔誓，瀏覽器會按它們在 HTML 頁面里出現(xiàn)的順序執(zhí)行它們斤吐，相反對于 onload 技術(shù)而言，只能在單一函數(shù)里使用厨喂。
  鑒于這個好處和措，用 jQuery ready() 函數(shù)比用 JavaScript window.onload 事件要更好些。

7. 如何找到所有 HTML select 標(biāo)簽的選中項(xiàng)蜕煌？

這是面試?yán)锉容^棘手的 jQuery 問題之一派阱。
這是個基礎(chǔ)的問題，但是別期望每個 jQuery 初學(xué)者都知道它斜纪。
你能用下面的 jQuery 選擇器獲取所有具備 multiple=true 的 ?select ? 標(biāo)簽的選中項(xiàng)：$('[name=NameOfSelectedTag] :selecte**d')這段代碼結(jié)合使用了屬性選擇器和:selected選擇器贫母，結(jié)果只返回被選中的選項(xiàng)。你可按需修改它盒刚，比如用 id 屬性而不是 name 屬性來獲取 ?select? 標(biāo)簽腺劣。

8. jQuery 里的 each() 是什么函數(shù)？你是如何使用它的因块？

each() 函數(shù)就像是 Java 里的一個 Iterator橘原，它允許你遍歷一個元素集合。你可以傳一個函數(shù)給 each() 方法贮聂，被調(diào)用的 jQuery 對象會在其每個元素上執(zhí)行傳入的函數(shù)靠柑。有時這個問題會緊接著上面一個問題，舉個例子吓懈，如何在 alert 框里顯示所有選中項(xiàng)歼冰。我們可以用上面的選擇器代碼找出所有選中項(xiàng)，然后我們在 alert 框中用 each() 方法來一個個打印它們耻警，代碼如下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
    alert($(selected).text());
});   //其中 text() 方法返回選項(xiàng)的文本隔嫡。

9. 你是如何將一個 HTML 元素添加到 DOM 樹中的？

你可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中甘穿。這是 jQuery 提供的眾多操控 DOM 的方法中的一個腮恩。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現(xiàn)存的元素或者一個新的 HTML 元素。

10. 你能用 jQuery 代碼選擇所有在段落內(nèi)部的超鏈接嗎温兼？

這是另一個關(guān)于選擇器的 jQuery 面試題秸滴。就像其他問題那樣，只需一行 jQuery 代碼就能搞定募判。你可以使用下面這個 jQuery 代碼片段來選擇所有嵌套在段落（?p?標(biāo)簽）內(nèi)部的超鏈接（?a?標(biāo)簽）

11. $(this) 和 this 關(guān)鍵字在 jQuery 中有何不同荡含？

這對于很多 jQuery 初學(xué)者來說是一個棘手的問題咒唆，其實(shí)是個簡單的問題。$(this) 返回一個 jQuery 對象释液，你可以對它調(diào)用多個 jQuery 方法全释，比如用 text() 獲取文本，用val() 獲取值等等误债。而 this 代表當(dāng)前元素浸船，它是 JavaScript 關(guān)鍵詞中的一個，表示上下文中的當(dāng)前 DOM 元素寝蹈。你不能對它調(diào)用 jQuery 方法李命，直到它被 $() 函數(shù)包裹，例如 $(this)躺盛。

12. 你如何使用jQuery來提取一個HTML 標(biāo)記的屬性 例如. 鏈接的href?

attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先需要利用jQuery選擇及選取到所有的鏈接或者一個特定的鏈接项戴，然后你可以應(yīng)用attr()方法來獲得他們的href屬性的值形帮。下面的代碼會找到頁面中所有的鏈接并返回href值：

$('a').each(function(){
   alert($(this).attr('href'));
});

13. 你如何使用jQuery設(shè)置一個屬性值?

前面這個問題之后額外的一個后續(xù)問題是槽惫，attr()方法和jQuery中的其它方法一樣，能力不止一樣. 如果你在調(diào)用attr()的同時帶上一個值 例如. attr(name, value), 這里name是屬性的名稱辩撑，value是屬性的新值界斜。

14. jQuery中 detach() 和 remove() 方法的區(qū)別是什么?

盡管 detach() 和 remove() 方法都被用來移除一個DOM元素, 兩者之間的主要不同在于：

• detach() 會保持對過去被解除元素的跟蹤, 因此它可以被取消解除 - remove() 方法則會保持過去被移除對象的引用. 你也還可以看看 用來向DOM中添加元素的 appendTo() 方法.

15. 你如何利用jQuery來向一個元素中添加和移除CSS類?

通過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態(tài)的改變元素的class屬性可以很簡單例如.
使用類“.active"來標(biāo)記它們的未激活和激活狀態(tài)合冀，

16. 使用 CDN 加載 jQuery 庫的主要優(yōu)勢是什么 ?

這是一個稍微高級點(diǎn)兒的jQuery問題各薇。
好吧，除了報(bào)錯節(jié)省服務(wù)器帶寬以及更快的下載速度這許多的好處之外,
最重要的是君躺，如果瀏覽器已經(jīng)從同一個CDN下載類相同的 jQuery 版本, 那么它就不會再去下載它一次. 因此今時今日峭判，許多公共的網(wǎng)站都將jQuery用于用戶交互和動畫, 如果瀏覽器已經(jīng)有了下載好的jQuery庫，網(wǎng)站就能有非常好的展示機(jī)會棕叫。

17. jQuery.get() 和 jQuery.ajax() 方法之間的區(qū)別是什么

• ajax() 方法更強(qiáng)大林螃，更具可配置性, 讓你可以指定等待多久，以及如何處理錯誤俺泣。
• get() 方法是一個只獲取一些數(shù)據(jù)的專門化方法疗认。

18. jQuery 中的方法鏈?zhǔn)鞘裁矗渴褂梅椒ㄦ溣惺裁春锰?/h2>

方法鏈?zhǔn)菍σ粋€方法返回的結(jié)果調(diào)用另一個方法伏钠，這使得代碼簡潔明了横漏，同時由于只對 DOM 進(jìn)行了一輪查找，性能方面更加出色

19. 你要是在一個 jQuery 事件處理程序里返回了

這通常用于阻止事件向上冒泡熟掂。

20. 哪種方式更高效：document.getElementById(＂myId＂

第一種缎浇，因?yàn)樗苯诱{(diào)用了 JavaScript 引擎。

JS

1.call 與 apply 區(qū)別

第二個參數(shù)的類型不同

解析：
call 和 apply 的作用赴肚，完全一樣素跺，唯一的區(qū)別就是在參數(shù)上面鹏秋。

• call 接收的參數(shù)不固定，第一個參數(shù)是函數(shù)體內(nèi) this 的指向亡笑，第二個參數(shù)以下是依次傳入的參數(shù)侣夷。
• apply 接收兩個參數(shù)，第一個參數(shù)也是函數(shù)體內(nèi) this 的指向仑乌。第二個參數(shù)是一個集合對象（數(shù)組或者類數(shù)組）

2.正則表達(dá)式構(gòu)造函數(shù) var reg = new RegExp('xxx')與正則表達(dá)字面量 var reg = // 有什么不同百拓？

使用正則表達(dá)字面量的效率更高解析：下面的示例代碼演示了兩種可用于創(chuàng)建正則表達(dá)式以匹配反斜杠的方法：

//正則表達(dá)字面量
var re = /\\/gm;

//正則構(gòu)造函數(shù)
var reg = new RegExp("\\\\", "gm");

var foo = "abc\\123"; // foo的值為"abc\123"
console.log(re.test(foo)); //true
console.log(reg.test(foo)); //true

如上面的代碼中可以看到，使用正則表達(dá)式字面量表示法時式子顯得更加簡短晰甚，而且不用按照類似類（class-like）的構(gòu)造函數(shù)方式思考衙传。

• 其次，在當(dāng)使用構(gòu)造函數(shù)的時候厕九，在這里要使用四個反斜杠才能匹配單個反斜杠蓖捶。這使得正則表達(dá)式模式顯得更長，更加難以閱讀和修改扁远。
• 正確來說俊鱼，當(dāng)使用 RegExp()構(gòu)造函數(shù)的時候，不僅需要轉(zhuǎn)義引號（即"表示"）畅买，并且通常還需要雙反斜杠（即\表示一個\）并闲。
• 使用 new RegExp()的原因之一在于，某些場景中無法事先確定模式谷羞，而只能在運(yùn)行時以字符串方式創(chuàng)建帝火。

3.異步加載 js 的方法

方案一：?script?標(biāo)簽的 async="async"屬性

點(diǎn)評：HTML5 中新增的屬性，Chrome湃缎、FF犀填、IE9&IE9+均支持（IE6~8 不支持）。此外嗓违，這種方法不能保證腳本按順序執(zhí)行九巡。

方案二：?script?標(biāo)簽的 defer="defer"屬性

點(diǎn)評：兼容所有瀏覽器。此外靠瞎，這種方法可以確保所有設(shè)置 defer 屬性的腳本按順序執(zhí)行比庄。

方案三：動態(tài)創(chuàng)建?script?標(biāo)簽

示例：

?!DOCTYPE html?
?html?
  ?head?
    ?script type="text/javascript"?
      (function() {
        var s = document.createElement_x("script");
        s.type = "text/javascript";
        s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
        var tmp = document.getElementsByTagName_r("script")[0];
        tmp.parentNode.insertBefore(s, tmp);
      })();
    ?/script?
  ?/head?
  ?body?
    ?img src="http://xybtv.com/uploads/allimg/100601/48-100601162913.jpg" /?
  ?/body?
?/html?

點(diǎn)評：兼容所有瀏覽器。

方案四：AJAX eval（使用 AJAX 得到腳本內(nèi)容乏盐，然后通過 eval_r(xmlhttp.responseText)來運(yùn)行腳本）

點(diǎn)評：兼容所有瀏覽器佳窑。

方案五：iframe 方式（這里可以參照：iframe 異步加載技術(shù)及性能 中關(guān)于 Meboo 的部分）

點(diǎn)評：兼容所有瀏覽器。

4.去除數(shù)組重復(fù)成員的方法

方法 1 擴(kuò)展運(yùn)算符和 Set 結(jié)構(gòu)相結(jié)合父能，就可以去除數(shù)組的重復(fù)成員

// 去除數(shù)組的重復(fù)成員
[...new Set([1, 2, 2, 3, 4, 5, 5])];
// [1, 2, 3, 4, 5]

方法 2

function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]); // [1, 2, 3]

方法 3（ES5）

function unique(arry) {
  const temp = [];
  arry.forEach(e =? {
    if (temp.indexOf(e) == -1) {
      temp.push(e);
    }
  });

  return temp;
}

5.去除字符串里面的重復(fù)字符

最簡單的方式[...new Set("ababbc")].join(""); // "abc"

6.求數(shù)組的最大值

Math.max.apply(null, 數(shù)組)var a = [1, 2, 3, 5];
alert(Math.max.apply(null, a)); //最大值
alert(Math.min.apply(null, a)); //最小值

7.原型的作用 以及什么是原型

作用：實(shí)現(xiàn)資源共享什么是原型:實(shí)例在被創(chuàng)建的那一刻神凑，構(gòu)造函數(shù)的 prototype 屬性的值。

8.說說你對作用域鏈的理解

• 作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，
• 作用域鏈的變量只能向上訪問溉委，變量訪問到 window 對象即被終止鹃唯，
• 作用域鏈向下訪問變量是不被允許的。

9.JavaScript 原型瓣喊，原型鏈 ? 有什么特點(diǎn)坡慌？

• 原型對象也是普通的對象，是對象一個自帶隱式的proto屬性藻三，原型也有可能有自己的原型洪橘，如果一個原型對象的原型不為 null 的話，我們就稱之為原型鏈棵帽。
• 原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈熄求。
  JavaScript 的數(shù)據(jù)對象有那些屬性值？

 writable  //這個屬性的值是否可以改逗概。
 configurable    //這個屬性的配置是否可以刪除弟晚，修改。
enumerable    //這個屬性是否能在 for…in 循環(huán)中遍歷出來或在 Object.keys 中列舉出來逾苫。
 value    //屬性值卿城。

• 當(dāng)我們需要一個屬性的時，Javascript 引擎會先看當(dāng)前對象中是否有這個屬性隶垮， 如果沒有的話藻雪，就會查找他的 Prototype 對象是否有這個屬性秘噪。

function clone(proto) {
  function Dummy() {}
  Dummy.prototype = proto;
  Dummy.prototype.constructor = Dummy;
  return new Dummy(); //等價(jià)于Object.create(Person);
}
function object(old) {
  function F() {}
  F.prototype = old;
  return new F();
}
var newObj = object(oldObject);

10.offsetWidth/offsetHeight,clientWidth/clientHeight 與 scrollWidth/scrollHeight 的區(qū)別

• offsetWidth/offsetHeight返回值包含content + padding + border 狸吞，如果有滾動條，也不包含滾動條
• clientWidth/clientHeight返回值只包含content + padding指煎，如果有滾動條蹋偏，也不包含滾動條
• scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸