jquery中的知識點

 

jquery在簡歷中也有提到，應該也作一些相應的準備

onload和document.ready()的區別

• 一、咱們能夠在頁面中使用多個document.ready()，但只能使用一次onload()。

• 二、document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload()函數則要在全部的關聯資源（包括圖像、音頻）加載完畢後纔會調用。

jquery中的選擇器

• 一、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。
• 二、層次選擇器：也叫作路徑選擇器，能夠根據路徑層次來選擇相應的DOM元素。
• 三、過濾選擇器：在前面的基礎上過濾相關條件，獲得匹配的dom元素。

jquery實現對url的編碼和解碼

encodeURIComponent(url) 
 decodeURIComponent(url)

jquery中鏈式調用的好處

• 1:可以精簡代碼
• 2:提升了程序執行的性能

jquery的好處

由於jQuery是輕量級的框架，大小不到30kb,它有強大的選擇器，出色的DOM操做的封裝，有可靠的事件處理機制(jQuery在處理事件綁定的時候至關的可靠)，完善的ajax(它的ajax封裝的很是的好，不須要考慮複雜瀏覽器的兼容性和XMLHttpRequest對象的建立和使用的問題。) 出色的瀏覽器的兼容性。 並且支持鏈式操做，隱式迭代。行爲層和結構層的分離，還支持豐富的插件，jquery的文檔也很是的豐富。

jQuery是如何處理緩存的

• 1 經過$.post()方法來獲取數據，那麼默認就是禁用緩存的。

• 2 經過$.get()方法 來獲取數據，能夠經過設置時間戳來避免緩存。能夠在URL後面加上+(+new Date)例 $.get('ajax.xml?'+(+new Date),function () { //內容 });3 經過$.ajax方法來獲取數據，只要設置cache:false便可。

jquery中的on(),live(),bind(),delegate()的區別

.bind()是直接綁定在元素上，也很好的解決了瀏覽器在事件處理中的兼容問題。若是不人爲的設置stopPropagation(Moder Browser), cancelBubble(IE)，那麼它的全部父元素，祖宗元素都會受之影響
當咱們在a 上面點擊的時候，首先會觸發它自己所綁定的click事件，而後會一路往上，觸發它的父元素，祖先元素上全部綁定的click事件。
缺點

• 它會綁定事件到全部的選出來的元素上
• 它不會綁定到在它執行完後動態添加的那些元素上
• 當元素不少時，會出現效率問題
• 當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題

.live()則是經過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。一旦事件冒泡到document上，jQuery將會查找selector/event metadata,而後決定那個handler應該被調用。當handler在執行的時候，由於有冒泡的參與，確實會有一些延遲，可是綁定的時候是特別的快。
優勢：

• 這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定
• 那些動態添加的elemtns依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上
• 你能夠在document ready以前就能夠綁定那些須要的事件

缺點：

• 從1.7開始已經不被推薦了，因此你也要開始逐步淘汰它了。
  Chaining沒有被正確的支持
• 當使用event.stopPropagation()是沒用的，由於都要到達document
• 由於全部的selector/event都被綁定到document, 因此當咱們使用matchSelector方法來選出那個事件被調用時，會很是慢
• 當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

.delegate()則是更精確的小範圍使用事件代理，性能優於.live()。它不會把全部的event所有綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在於都是用event delegation.

優勢：

• 你能夠選擇你把這個事件放到那個元素上了
• chaining被正確的支持了
• jQuery仍然須要迭代查找全部的selector/event data來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素。
  -能夠用在動態添加的元素上

.on則是新版本中支持的事件，比上面三者都好

$和$.fn,$.extend和 $.fn.extend的區別

$.fn是指jQuery的命名空間，fn上的成員(方法function及屬性property)，會對jQuery實例每個有效。
查看代碼不難發現：

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {}
};

原來jQuery.fn = jQuery.prototype.

因此，它是對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

那麼$.extend和$.fn.extend同理

jQuery.extend = jQuery.fn.extend = function() {
//這裏能夠看出jQuery.extend和jQuery.fn.extend實際上是同一個方法
//不一樣的地方只是內部的this不一樣
//調用$.extend() this 爲$
//調用$.fn.extend() this 爲$.fn
//因此若是傳入兩個對象的話，其功能是同樣的
var src, copyIsArray, copy, name, options, clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

// Handle a deep copy situation
if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
}

// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
}

// extend jQuery itself if only one argument is passed
if ( length === i ) {
    target = this;
    //若是隻傳入一個對象 在這裏將目標對象替換爲this，即$或$.fn
    --i;
}

for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
    // Extend the base object
    for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];

        // Prevent never-ending loop
        if ( target === copy ) {
            continue;
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
    if ( copyIsArray ) {
        copyIsArray = false;
        clone = src && jQuery.isArray(src) ? src : [];

} else {
    clone = src && jQuery.isPlainObject(src) ? src : {};
}
    target[ name ] = jQuery.extend( deep, clone, copy );
} else if ( copy !== undefined ) {
    //這裏是題主最關心的地方
    //其實質就是$[name] = fn或$.fn[name] = fn
    target[ name ] = copy;
}
    }
    }
    }
    // Return the modified object
    return target;
};

jquery中attr和prop的區別

• 對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。
• 對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。