jQuery面試知識點整理

1、基礎

（1）jQuery有哪些優勢？

1. 輕量級（3.2.1.min只有85kb左右）
2. 強大的選擇器（css1到css3以及jQuery首創）
3. 出色的DOM操做封裝
4. 可靠的事件處理機制（$(document).ready()）
5. 完善的Ajax
6. 不污染全局變量，對外只暴露一個jQuery（$）對象
7. 出色的兼容性（IE6.0+）
8. 鏈式操做（return this）
9. 隱式迭代
10. 行爲層和結構層分離
11. 豐富的插件
12. 開源

（2）jQuery對象和DOM對象如何轉換？

• DOM轉爲jQuery對象：
  var $btn = $'('#btn'); // jQuery對象
• jQuery對象轉爲DOM對象

// 方式一
var btn = $btn[0];  // DOM對象
// 方式二
var btn = $btn.get(0);  // DOM對象
複製代碼

（3）如何判斷一個元素是否存在？

// 方式一，經過長度判斷
if ($('.link').length > 0) {}

// 方式二，轉爲DOM對象
if ($('.link')[0]) {}
複製代碼

注意：不能直接經過$('.link')來判斷，$('.link')永遠是對象。

// 錯誤方式
if ($('.link')) {}
複製代碼

---

2、選擇器

（1）jQuery的選擇器有哪些？

• 基本選擇器

1. $('#id')
2. $('.class')
3. $('element')
4. $('*')
5. $('selector1,selector2,....')

• 層次選擇器

1. $('ancestor descendant') 後代選擇器
2. $('parent>child') 子選擇器
3. $('prev+next') 相鄰兄弟選擇器

$('.one+div') === $('.one').next('div')
複製代碼

4. $('prev~siblings') prev元素以後的全部兄弟元素（siblings()與先後位置無關，能選擇到全部兄弟元素）

$('#prev~div') === $('#prev').nextAll('div')
複製代碼

• 過濾選擇器 (以 : 開頭，屬性過濾除外)

1. 基本過濾

1. $('div:first')  // 第一個元素  優先使用$('div').first()
2. $('div:last')  // 最後一個元素  優先使用$('div').last()
3. $('input:not(#submit)')  // 去除匹配的元素
4. $('input:even')  // 偶數的input
5. $('input:odd')  // 奇數的input
6. $('input:eq(1)')  // 索引等於1的input  優先使用$('input').eq(1)  從0開始
7. $('input:gt(1)')  // 索引大於而不包括1的input
8. $('input:lt(1)')  // 索引小於而不包括1的input
9. $(':header')  // h1到h6的全部元素
10.$('div:animated')   // 正在執行動畫的div
11. $(':focus')  // 當前得到焦點的元素
複製代碼

2. 內容過濾

1. $("div:cotains('hello world')")  // 包含hello world文本的div元素
2. $('div:empty')  // 不含子元素和文本的空元素
3. $('div:has(p)')  // 含有p元素的div元素
4. $('div:parent')  // 擁有子元素或文本的div元素
複製代碼

3. 可見性過濾

1. $(':hidden')  // 全部不可見元素，包括<input type='hidden' /> 、 display:none 
2. $(':visible')  // 全部可見的元素
複製代碼

4. 屬性過濾

1. $('div[id]')  // 擁有id屬性的div元素
2. $('div[title=test]')  // title屬性爲test的div元素
3. $('div[title!=test]')  // title屬性不等於test（沒有title屬性）的div元素
4. $('div[title^=test]')  // title屬性以test開始的div元素
5. $('div[title$=test]')  // title屬性以test結束的div元素
6. $('div[title*=test]')  // title屬性包含test的div元素
7.$('div[title|="en"]')  // title屬性等於en或以en爲前綴（en-mytitle）的div元素
8. $('div[title~="en"]')  // title屬性用空格分隔的值中含有字符en的div元素
9. $('div[id=btn][title^=test]')  // id屬性等於btn而且title屬性以test開始的div元素
複製代碼

5. 子元素過濾

1. nth-child(index/even/odd/equation)  // index從1開始
$('ul li:nth-child(2)')  // ul下的第二個li元素
2. $('ul li:first-child')  // 爲每一個父元素ul匹配第一個li元素 （$('ul li:first')只匹配第一個ul的第一個li元素）
3. $('ul li:last-child')  // 爲每一個父元素ul匹配最後一個li元素 （$('ul li:last')只匹配第一個ul的最後一個li元素）
4. $('ul li:only-child')  // ul中只有一個li時，才選擇li元素
複製代碼

6. 表單對象過濾

1. $('#form1 :enabled')  // id屬性爲form1的表單內的全部可用的元素
2. $('#form1 :disabled')  // id屬性爲form1的表單內的全部不可用的元素
3. $('input:checked')  // 全部被選中的input元素
4. $('select option:selected')  // 全部被選中的選項元素
複製代碼

• 表單選擇器
  根據type屬性選擇

1. $(':input')  // 全部input、textarea、select、button
2. $(':text')  // 全部<input type='text' />
3. $(':password')  // 全部<input type='password' />
4. $(':radio')  // 全部<input type='radio' />
5. $(':checkbox')  // 全部<input type='checkbox' />
6. $(':submit')  // 全部<button type='submit'></button>
7. $(':image')  // 全部<button type='image'></button>
8. $(':reset')  // 全部<button type='reset'></button>
9. $(':file')  // 全部<input type='file' />
10. $(':hidden')  // 全部不可見的元素
11. $(':button')  // 全部<button></button>
複製代碼

==選擇器注意事項：==

1. 選擇器中含有 '.'、 '#'、 '()' 、 '[]' 須要轉義

<div id='id#my'></div>
<div id='id[8]'></div>

$('#id\\#my')  
$('#id\\[8\\]')
複製代碼

2. 選擇器中的空格，有空格是後代選擇器

（2）jQuery中如何優化選擇器性能？

1. 儘可能使用css中有的選擇器
2. 避免過分約束 （$('div ul li a')與$('li a')）
3. 儘可能以id開頭
4. 讓選擇器右邊有更多特徵
5. 避免使用全局選擇器
6. 緩存選擇結果

3、DOM操做

（1）jQuery中如何查找節點？

1. 元素節點（選擇器）

<button id='btn' type='submit'>登陸</button>
var $btn = $('#btn');
複製代碼

2. 屬性節點（attr()）

var type = $btn.attr('type');   // submit
複製代碼

3. 文本節點（text()）

var text = $btn.text()  // 登陸
複製代碼

（2）jQuery中如何建立節點

元素節點、屬性節點、文本節點能夠同時建立

var $li = $('<li title=蘋果'>蘋果</li>);
複製代碼

（3）jQuery中如何插入節點？

• 做爲子元素插入

1. append()

<p>I want to say</p>
$('p').append('<b>hello</b>')
// 結果
<p>I want to say<b>hello</b></p>
複製代碼

2. appendTo()

<p>I want to say</p>
$('<b>hello</b>').appendTo('p')
// 結果
<p>I want to say<b>hello</b></p>
複製代碼

3. prepend()

<p>I want to say</p>
$('p').prepend('<b>hello</b>')
// 結果
<p><b>hello</b>I want to say</p>
複製代碼

4. prependTo()

<p>I want to say</p>
$('<b>hello</b>').prependTo('p')
// 結果
<p><b>hello</b>I want to say</p>
複製代碼

• 做爲兄弟元素插入

5. after()

<p>I want to say</p>
$('p').after('<b>hello</b>')
// 結果
<p>I want to say</p><b>hello</b>
複製代碼

6. insertAfter()

<p>I want to say</p>
$('<b>hello</b>').insertAfter('p')
// 結果
<p>I want to say</p><b>hello</b>
複製代碼

7. before()

<p>I want to say</p>
$('p').before('<b>hello</b>')
// 結果
<b>hello</b><p>I want to say</p>
複製代碼

8. insertAfter()

<p>I want to say</p>
$('<b>hello</b>').insertBefore('p')
// 結果
<b>hello</b><p>I want to say</p>
複製代碼

（4）jQuery中如何刪除節點？

1. remove()

var $li = $('ul li').eq(1).remove() // 全部後代都會被刪除,返回值是刪除節點的引用。remove('選擇器')也能夠傳參
$li.appendTo('ul')  // 刪除的節點能夠從新添加回來

$('ul li').eq(1).appendTo('ul')  // 移動選擇的元素到最後
複製代碼

2. detach()
   和remove() 幾乎同樣，不一樣的是detach()所綁定的事件、附加的數據都會保留。（從新添加後事件和數據還在）
3. empty()
   並不刪除節點，只是清空全部後代元素。

（5）jQuery中如何複製節點？

clone()

$('ul li').click(function() {
    $(this).clone(true).appendTo('ul')  // 複製並添加到ul中，參數true表示同時複製綁定的事件
})
複製代碼

（6）jQuery中如何替換元素？

1. replaceWith()

<p>你想去哪兒？</p>
$('p').replaceWith('<p>你想幹什麼？</p>')
// 結果
<p>你想幹什麼？</p>
複製代碼

2. replaceAll()

<p>你想去哪兒？</p>
$('<p>你想幹什麼？</p>').replaceAll('p')
// 結果
<p>你想幹什麼？</p>
複製代碼

（7）jQuery中如何包裹節點？

1. wrap()

$('p').wrap('<strong></strong>')  // 對每一個p標籤單獨用strong標籤包裹
複製代碼

2. wrapAll()

$('p').wrapAll('<strong></strong>')  // 對全部p標籤用一個strong標籤包裹
複製代碼

3. wrapInner()

$('p').wrapInner('<strong></strong>')  // 對每一個p標籤的子內容用strong標籤包裹
複製代碼

（8）jQuery中如何操做屬性？

1. attr()

vat title = $('ul li').eq(0).attr('title')  // 獲取匹配元素的title屬性

$('ul li').eq(0).attr({id：'apple', title='蘋果'})  // 設置匹配元素的屬性
複製代碼

2. removeAttr()

$('ul li').eq(0).removeAttr('title')  // 刪除匹配元素指定的屬性
複製代碼

3. prop() 用法同上
4. removeProp() 用法同上

（9）jQuery中如何操做樣式？

1. addClass() 追加樣式類名 $('p').addClass('mystyle') // 屢次使用類名疊加
2. attr() $('p').attr('class', 'mystyle') // 屢次使用後面覆蓋前面的
3. removeClass() 刪除全部或指定類名
4. toggleClass() 重複切換類名（存在就刪除，不存在就添加）
5. hasClass() 判斷是否含有某個類名
6. css() 獲取或設置樣式 包括外部導入
7. width() （content區域）
8. height()
9. innerWidth() （包含padding）
10. innerHeight()
11. outerWidth() （包含border，傳入true包含margin）
12. outerHeight()

• 元素定位有關的方法

13. offset() 元素相對於視窗的偏移，包含top、left屬性
14. position() 元素相對於最近的定位元素的偏移，包含top、left屬性
15. scrollTop() 獲取或設置滾動條距頂端的距離
16. scrollLeft() 獲取或設置滾動條距左端的距離

（10）jQuery中如何獲取和設置html、文本、值？

1. html()
2. text()
3. val()

（11）jQuery中如何遍歷節點？

1. children()
2. next()
3. prev()
4. siblings()
5. closest()
6. parent()
7. parents()
8. find()
9. filter()
10. nextAll()
11. prevAll()

4、事件和動畫

（1）window.onload()與$(document).ready()（簡寫$(function{})）的區別？

1. 執行時機不一樣：

• window.onload()在全部內容（js、css、image等）加載完成後執行。
• $(document).ready()在DOM結構加載完成後就會執行。

2. 使用次數

• window.onload()只能執行一次，若是使用屢次，後面覆蓋前面的。
• $(document).ready()可使用屢次，按順序執行。

（2）如何綁定事件？

1. on(type[,selector][,data], fn)
   off() 刪除事件

$('#btn').on('click', function() {
    console.log($(this).val())
})

// 簡寫方式
$('#btn').click(function() {
    console.log($(this).val())
})
複製代碼

2. one() 事件執行一次後就刪除

（3）合成事件有哪些？

1. hover(enter, leave) 光標進入和離開

$('#btn').hover(function(){
    $(this).next().show()  // 光標進入觸發
}, function() {
     $(this).next().hide()  // 光標離開觸發
})
複製代碼

2. toggle(speed[,callback]) 切換元素可見狀態

$('#btn').click(function() {
    $(this).next().toggle(200) 
}
複製代碼

（4）事件對象的屬性有哪些？

1. event.type 獲取事件類型
2. event.preventDefautl() 阻止默認行爲
3. event.stopPropagation() 阻止冒泡 （return false 能夠同時阻止默認行爲和冒泡）
4. event.target 目標元素
5. event.relatedTarget 相關目標元素（mouseenter、mouseleave、mouseout、mouseover、focus、blur事件有相關目標元素）
6. event.pageX 、 pageY 光標相對於頁面的xy座標
7. event.which 鼠標單擊事件中獲取鼠標的左（1）、中（2）、右（3）鍵
8. event.metaKey 獲取windows中win鍵（Mac中Cmd鍵）是否被按下

（5）trigger()與triggerHandler()的做用與區別？

• 做用：都是用來觸發事件的
  $('#btn').trigger('click') 這樣不用點擊就觸發了點擊事件
• 區別：

1. triggerHandler() 不執行瀏覽器默認行爲
2. triggerHandler() 不會冒泡
3. triggerHandler() 只觸發集合中的第一個
4. 返回的是函數處理後的值，不是jQuery對象
5. 不能使用鏈式（由於第4點）

（6）jQuery中內置動畫有哪些？

• 基本動畫

1. show(speed[,callback]) 和 hide(speed[,callback]) 顯示隱藏元素
   全部動畫的speed：number、fast（200）、normal（400）、slow（600）

$('#btn').toggle(function() {
    $(this).next().show() // 顯示
}, function() {
    $(this).next().hide() // 隱藏 display：none（隱藏以前會記住display屬性的值）
})
複製代碼

==注意：== 1.9以上的版本以再也不支持toggle(fn1,fn2) 模擬鼠標連續單擊事件

• ==解決方案==：腳本中加入如下代碼，做爲插件

$.fn.toggle = function( fn, fn2 ) {
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggle = function( event ) {
        var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
         $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
        event.preventDefault();
        return args[ lastToggle ].apply( this, arguments ) || false;
    };
    toggle.guid = guid;
    while ( i < args.length ) {
        args[ i++ ].guid = guid;
    }
    return this.click( toggle );
  };
複製代碼

2. fadeIn(speed[,callback]) 和 fadeOut(speed[,callback]) 淡入淡出（改變opacity）

$('#btn').toggle(function() {
    $(this).next().fadeIn() // 淡入
}, function() {
    $(this).next().fadeOut() // 淡出  display：none
})
複製代碼

3. slideUp(speed[,callback]) 和 slideDown(speed[,callback])
   改變元素高度

$('#btn').toggle(function() {
    $(this).next().slideUp() 
}, function() {
    $(this).next().slideDown() // display：none
})
複製代碼

• 自定義動畫

4. animate()
   animate(params, speed, callback)
   params是一個包含樣式屬性及值的映射

// html
<div id='mydiv'></div>

// css
#mydiv {
   position: relative;
   width: 100px;
   height: 100px;
   background: #eee;
   border: 1px solid #ccc;
   cursor: pointer;
}

// script
$('#mydiv').click(function() {
    $(this).animate({left: '600px', height: 200px, opacity: 0.5},3000)  
        .animate({top: '200px', width: 200px},2000)  // 前一個animate執行完了才執行
        .fadeOut(400)  // 前一個animate執行完了才執行
        // 造成一個動畫隊列
})
複製代碼

• 動畫回調函數
  ==非動畫方法不會加入動畫隊列中，能夠在回調函數裏實現對非動畫方法排隊==

$('#mydiv').click(function() {
    $(this).animate({left: '600px', height: 200px, opacity: 0.5},3000)  
        .animate({top: '200px', width: 200px},2000)  // 前一個animate執行完了才執行
        .css({
            border: '3px solid red'
        })  // 動畫一開始執行 css()就會執行
})

// 解決方案: 回調函數
$('#mydiv').click(function() {
    $(this).animate({left: '600px', height: 200px, opacity: 0.5},3000)  
        .animate({top: '200px', width: 200px},2000, function() {
            $(this)..css({
                border: '3px solid red'
            })  // 動畫執行完了纔會執行 css()
        }) 
        
})
複製代碼

• 中止動畫
  stop(clearQueue, gotoEnd)
  clearQueue（布爾值）表示是否要清空未執行的動畫隊列
  gotoEnd （布爾值）表示是否直接將正在執行的動畫跳到末狀態

// 直接調用 stop()中止當前正在執行的動畫，當即進入動畫隊列的下一個動畫
$('#div1').hover(function() {
    $(this).stop()
        .animate({height: '300px', width: '300px'}, 500)
}, function() {
     $(this).stop()
        .animate({height: '100px', width: '100px'}, 300)
})

// 當遇到組合動畫時，stop()須要傳入參數
$('#div1').hover(function() {
    $(this).stop(true)  // true 清空未執行的動畫隊列
        .animate({height: '300px', width: '300px'}, 500)
        .animate({color: 'red', opacity: 0.5}, 200)
}, function() {
     $(this).stop(true)  // true 清空未執行的動畫隊列
        .animate({height: '100px', width: '100px'}, 300)
        .animate({color: 'green', opacity: 1}, 200)
})
複製代碼

• ==判斷元素是否處於動畫狀態==（重要）
  避免出現動畫積累

if (! $('#div1').is(':animated')) { 
    // 沒有處於動畫狀態才添加動畫
}
複製代碼

• 動畫延遲
  delay(time)

• 交互動畫

5. toggle(speed[,callback])
   切換元素可見狀態

$('#div1').click(function() {
    $(this).next().toggle()  // 至關於前面基本動畫的第一個
})
複製代碼

6. slideToggle(speed[,easing][,callback])
   經過高度切換元素可見狀態

$('#div1').click(function() {
    $(this).next().sildeToggle()  // 至關於前面基本動畫的第二個
})
複製代碼

7. fadeTo(speed[,opacity][,callback])
   把opacity以漸進的方式調到指定值

$('#div1').click(function() {
    $(this).next().fadeTo(600, 0.5)  // 600ms內opacity調到 0.5
})
複製代碼

8. fadeToggle(speed[,easing][,callback])
   經過高度切換元素可見狀態

$('#div1').click(function() {
    $(this).next().fadeToggle()  // 至關於前面基本動畫的第三個
})
複製代碼

5、Ajax

（1）jQuery中封裝了哪些ajax方法，分別在什麼狀況下使用？

• 底層方法

1. $.ajax()
   用途：能夠實現如下全部方法，當須要定製更多信息時使用此方法（例如timeout、beforeSend、error、global等）
   $.ajax(options)
   options經常使用參數：

options = {
    url: 請求的地址 (String),
    type: 請求方式 (Strin),
    timeout: 請求超時時間的毫秒數(Number),
    data: 發送的數據(Object、String),
    dataType: 期待服務器返回的數據類型(String),
    beforeSend: 發送前的回調函數能夠修改XMLHttpRequest對象，return false能夠取消本次請求，function(XMLHttpRequest){this // 調用本次options參數}。(Function),
    complete: 請求完成回調函數，不管成功仍是失敗，function(XMLHttpRequest, textStatus) {this // 調用本次options參數}。(Function),
    success: 請求成功回調函數，function(data, textStatus) {this // 調用本次options參數} (Function),
    error:  請求失敗回調函數，function(XMLHttpRequest, textStatus, errorThrown) {this // 調用本次options參數} (Function),
    global: 是否要觸發全局ajax事件,默認true (Boolean)
}
複製代碼

• 快捷方法

2. load() （ajax方法中惟一一個非全局函數）

• 用途：載入或篩選HTML文檔，並插入DOM中。
  $('selecotr').load('url selector' [,data] [,function(responseText,textStatus,XMLHtmlRequest) {}]) 回調函數請求完成時執行，不管成功仍是失敗。textStatus：success、error、notmodified、timeout 4種

$('#send').click(function() {
    $('#container').load('test.html .link')  
}) // 請求test.html，並從中篩選含有link類名的標籤返回，返回後插入到id爲container的標籤中。
複製代碼

• 傳參
  load()沒有參數使用GET方法，有參數時自動轉換爲POST方法

// 自動使用 POST 方法
 $('#container').load('test.php', {name: 'xiaoming', age: 22}, callback)  
複製代碼

3. $.get()
   用途：發送GET請求。
   $.get(url [,data] [,function(data, textStatus) {}] [,type])
   只有當請求成功時（success）才執行回調函數，並把結果和狀態專入回調函數。
   type表示期待服務器返回的格式：xml、html、script、json、text等

$('#send').click(function() {
    var username = $('#username').val();
    $.get('test.php', {username: username}, function(data, textStatus) {
        var username = data.username;
        var content = data.content;
        var html = '<div><h5>' + username + ':</h5><p>' + content + '</p></div>';
        $('#container').html(html);
    }, 'json');
});
複製代碼

4. $.post()
   用途：發送POST請求。
   $.post(url [,data] [,function(data, textStatus) {}] [,type]) 與$.get()方法的結構和使用方式相同。

• 與$.get()方法的區別：

1. GET請求將參數追加在URL後面進行傳遞，POST請求將參數做爲Http實體內容傳遞，對用戶不可見。
2. GET請求對傳輸的數據大小有限制，通常2KB，POST請求理論上沒有限制，比GET請求大得多。
3. GET請求安全性較低，POST請求安全性較高。

$('#send').click(function() {
    var username = $('#username').val();
    $.post('test.php', {username: username}, function(data, textStatus) {
        var username = data.username;
        var content = data.content;
        var html = '<div><h5>' + username + ':</h5><p>' + content + '</p></div>';
        $('#container').html(html);
    }, 'json');
});
複製代碼

5. $.getScript()
   用途：加載js文件。

$.getScript(url [,callback])
複製代碼

6. $.getJSON()
   用途：加載JSON文件。$.getScript(url [,function(data){}])

$('#send').click(function() {
    $.getJSON('test.json', function(data) {
        $.each(data, function(index, item) {
            // 遍歷 data
        });
    });
});
複製代碼

（2）jQuery中有哪些ajax全局事件？

1. ajaxStart(callback) 請求開始時觸發
2. ajaxStop(callback) 請求結束時觸發
3. ajaxComplete(callback) 請求完成時觸發
4. ajaxSuccess(callback) 請求成功時觸發
5. ajaxError(callback) 請求失敗時觸發
6. ajaxSend(callback) 請求發送前觸發

（3）jQuery中如何序列化元素？

1. serialize()
   將匹配的元素內容序列化

$.get('test.php', $(#form1).serialize(), function(data, textStatus) {})
複製代碼

2. serializeArray()
   將匹配元素的值編譯成擁有name和value對象組成的數組

var fields = $(':checkbox,:radio').serializeAray()
複製代碼

3. $.param()
   全局函數，用來對一個數組或對象按照key/value的形式進行序列化。

var obj = {a: 1, b:2, c:3};
var result = $.param(obj);  // a=1&b=2&c=3
複製代碼

6、插件

（1）有哪些經常使用插件？

1. Validation 表單驗證
2. jQuery Form 表單插件
3. SimpleModal 模態窗口
4. Cookie cookie插件
5. jQuery UI

（2）jQuery插件的種類有哪些？

1. 對象方法 （大多數）

(function($) {
    $.fn.pluginName = function() {
        // 插件
        return this;  // 使插件能夠鏈式操做
    }
})(jQuery)
複製代碼

2. 全局函數

(function($) {
    $.pluginName = function() {
        // 插件
    }
})(jQuery)
複製代碼

3. 選擇器

7、性能優化

（1）jQuery中能夠作哪些性能優化？

1. 使用合適的選擇器
2. 緩存對象
3. 循環操做DOM時，儘量減小DOM操做（插入20個節點，應該建立好後一次性插入）
4. 使用事件代理
5. 封裝成插件
6. 壓縮代碼