jQuery 常見面試題

代碼以jQuery 1.83 為例

 

一 ：Q: What is the difference between .get(), [], and .eq()?

A: eq返回原生jQuery對象，截取某些el元素生成Jquery新對象

　get和[]返回的都是原生的Dom對象，原理一致

　get和[]區別是get是通過jQuery對象的方法獲取，[]是根據jQuery是一個數組對象獲取

 

二: What is the difference between .bind(), .live(), and .delegate()?

A: 它們實質調用的都是jQuery實例對象的on函數，更底層是jQuery.event.add();

官方描述：Attach an event handler function for one or more events to the selected elements

.on( events [, selector ] [, data ], handler(eventObject) )

三種綁定函數代碼

 bind: this.on(types, null, data, fn); 直接綁定到元素上

live: jQuery(this.context).on(types, this.selector, data, fn); 將事件綁定到context上，冒泡，當觸發元素為this.selector時觸發

delegate: this.on(types. selector, data, fn)

selector如何添加

三: How, and why, would you namespace a bound event handler?

A: click.myPlugin.simple定義了兩個命名空間 為這個獨特的click事件 可以被移除通過 .off('click.myPlugin') or .off('click.simple')

命名空間跟css 相似都不是分層的，只需要一個名字來匹配

jquery.event jquery.event.global jquery.event.handle

四：What is the difference between $ and $.fn? Or just what is $.fn.

 window.jQuery = window.$ = jQuery;

 jQuery.fn = jQuery.prototype = {} 

五：what's jQuery's context/selector and why use it 

<div id="context">
	<div id="inner"></div>
</div>

　　

context/selector 示例

<script>
var $ret = $('#inner', $('#context')[0]);
console.log($ret.selector); // #inner
console.log($ret.context); // #context

var $ret = $('#inner', '#context');
console.log( $ret.selector); // '#context #inner'
console.log( $ret.context); // document
</script>

context 就是限定查找的范圍

context 必須是一個DOM元素，context 底層還是用了.find方法來實現

官方API selector context is implemented with the .find() method,so $("span", this) is equivalent to $(this).find("span")

注：例子僅供展示，id類型查找非常快，所以不要用這種context，直接$('#inner')最好，當查找tag/class時用會比較高效.

 六：Difference between 'delegate()' and 'live()'

delegate 指定了委托對象

live委托給了jQuery的context，1.9以后刪除了，用on代替

一下三個效果一致

$(selector).live(events, data, handler);
$(document).delegate(selector, events. data, handler);
$(document).on(events, selector, data, handler);

七：What is the effetcs (of fx) queue?

.queue([queueName])

官方API：Show the queue of functions to be executed on the matched elements.

Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. 最大的特點是這些代碼異步執行，不影響后面代碼操作，說白了就是將他們放入一個隊列中

div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px;
        background:green; display:none;
 }

div.newcolor { background:blue; }
p { color:red; }  

<p>The queue length is: <span></span></p>
<div id="box">1</div>
<div style="top:120px;">2</div>
<button id="start">start</button>
<button id="end">end</button>

　　

<script>
var $box = $('div');

function runIt() {
	$box.show()
		.animate({'left':"+=200"}, 2000)
		.queue(function(next){
			$(this).addClass('newcolor');
			next();
		})
		.slideToggle(1000)
		.slideToggle('fast')
		.animate({'left':"-=200"}, 2000)
		.queue(function(next){
			$(this).removeClass('newcolor');
			next();
		})	
		.hide('slow')
		.show(200)
		.slideUp("normal");
}

function showIt(){
	var n = $box.queue();
	$("span").text(n.length);
	setTimeout(showIt, 100);
}

function stopIt(){
	$box.queue('fx', []);
	$box.stop();
}

$('#start').click(function(){
	runIt();
});
$('#end').click(function(){
	stopIt();
})
showIt();


</script>

八：attr和prop的區別　　

attr是操作屬性節點，DOM的API setAttribute，getAttribute（HTML）

prop是操作獲取到的對應js對象的屬性 （JS）

場景：遇到要獲取或設置checked,selected,readonly和disabled等屬性時，用prop方法顯然更好

prop更高效，因為attr要DOM訪問 

附加：

Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type="text" value="abc">. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and typesdef the .prop("value") is abcdef but the .attr("value") remains abc.

jQuery 1.6 更新