淺談我對 jQuery 的瞭解

 

• • 總述
    • 獲取 jQuery 對象
    • 對象跳轉
    • 方法調用
    • 經常使用API
      • $(…);
      • jQuery 對象獲取
      • Data 相關方法
      • 選擇器
      • 基本的過濾器
      • 內容過濾選擇器
      • 可見性過濾器
      • 屬性過濾器
      • 孩子過濾器
      • 表單過濾器
      • 屬性相關的方法
      • 類相關的操做
      • html相關的操做
      • 文本相關的方法
      • 值相關的操做
      • 在jQuery 對象之間查找
      • 串聯方法
      • DOM 文檔操做方法
      • CSS 相關方法
      • 位置計算相關方法
      • 寬度和高度計算相關方法
      • 瀏覽器及特性檢測
      • 數據緩存方法
      • 工具方法
  • 總結

 

知己知彼,面進阿里 ——不屈小強

整理了這些做爲下階段讀源碼前的知識儲備，同時分享給你們。共勉。

總述

jQuery 框架提供了不少方法，但大體上能夠分爲3 大類：

1. 獲取jQuery 對象的方法
2. 在jQuery 對象間跳轉的方法
3. 獲取jQuery 對象後調用的方法

獲取 jQuery 對象

是怎樣獲取jQuery 對象。大體來講，是經過最核心的$()方法，將頁面上的元素（或者在頁面上不存在的 html 片斷）包裝成 jQuery 對象。
$()方法裏面支持的語法又包括：

1. 分別是表達式（包括類表達式.，id 表達式#，元素表達式等）
2. 符號（包括後代符號space，next 符號+等)
3. 過濾器（包括:過濾器和[]過濾器）
4. 如今顯然還有更多

經過以上組合，經過選擇器 $() 可」查詢「獲得 jQuery 對象（或者jQuery 對象的集合）。

對象跳轉

是在jQuery 對象間的跳轉。也就是說，已經獲得了一個jQuery 對象，但並非想要的，那麼能夠經過一系列的跳轉方法，好比parent()、next()、children()、find()等，或者過濾篩選的方法，好比eq、filter()、not()等，來獲得最終想要操做的jQuery 對象。

用跳轉和過濾方式獲得的jQuery 結果，每每經過比較複雜的表達式組合，能夠達到一樣的目的。
好比說 $("div").eq(3)，也能夠用$("div:eq(3)") 達到一樣的目的。
又好比說$("div").find("span")，能夠用$("div span")取到一樣的元素。
方法是很靈活的，要根據具體的狀況來選擇。根據經驗來講，HTML 頁面寫得越規範，使用 jQuery 就越簡單。

還有一種狀況，在獲得了jQuery()對象以後，想要判斷其是否知足條件，那麼能夠調用 is()、hasClass()等方法，返回一個boolean 值，進行後續的判斷。這類方法也能夠歸到這類。

方法調用

在獲取準確的 jQuery 對象以後，調用其上的各類方法，來進行操做。這一步反而是比較簡單的了。
後面就是對 jQuery 框架各類方法的簡要介紹。

經常使用API

$(…);

/** * 一切的核心，能夠跟4 種參數。 */
$();

/** * 返回jQuery 對象或者jQuery 對象的集合 * 好比$("#id")、$(".class") */
$(expression);

/** * 返回jQuery 對象，或者jQuery 對象的集合 * 好比$("<span>hello world</span>") */
$(html)

/** * 返回jQuery 對象，或者jQuery 對象的集合 * 好比$(document.body) */
$(element)

/** * 全部元素 */
$(*)

jQuery 對象獲取

/** * 返回該jQuery 對象在集合中的索引 */
jQuery.index(element);

/** * 遍歷jQuery 對象集合，在每一個對象上執行 callback 函數， * function callback(index, domElement){ * this //DOMElement * }; */
jQuery.each(function); /** * 返回 jQuery 對象集合的大小 */ jQuery.size(); /** * 至關於size()方法 */ jQuery.length /** * 獲取原生 DomElement 對象的 Array, * 即將 jQuery 對象轉成 數組對象， * 雖然 jQuery 對象也有 length 屬性，且可用下標讀寫 * 但並不是是數組對象。 */ jQuery.get() /** * 獲取原生 DomElement 對象 */ jQuery.get(index) /** * 獲取 jQuery 對象集合中的一個 jQuery 對象 */ jQuery.eq(position) 

Data 相關方法

在匹配的元素身上存值(store data)， .data() 方法容許在咱們以一種安全的方式附加數據到 dom 元素，不會產生循環引用和內存泄露。

jQuery.data(name)        // 取值
jQuery.data(name, value) // 賦值
jQuery.removeData(name)  // 清理

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

選擇器

/** * 多目標選擇器 * 能夠選擇多個元素或者表達式， * 包裝成 jQuery 對象的集合 * 例子：$("div,span") */

$("table tr td"); //multiple(selector1, selector2)

$("#id > span"); //直接節點

$("label + input") //next(prev, next) 同級的緊挨着的下一個

$("#prev ~ div") // siblings(prev, siblings),一樣要求是同級

基本的過濾器

$(":header");     // 全部 header, <h1>~<h6>
$("tr:odd");      // 選中全部奇數行
$("tr:even");     // 選中全部偶數行
$(":animated");   // 選中全部當前有特效的素
$("div:animated");// 選中運行動畫的
$("tr:first");    // 選中第一行
$("tr:last");     // 選中最後一行
$("input:not(:checked)");  //選中全部沒有「checked」
$("td:gt(4)");    // 選中全部index 是4 以後的td
$("td:lt(4)");    // 選中全部index 是4 以前的td

$("td:eq(4)");    // 選中index 是 4 的td
$("td").eq(4);    // 選中index 是 4 的td

內容過濾選擇器

$("div:contains('John')"); // 選中全部包含"John"的div
$("td:empty");    // 選中全部內容爲空的td
$("div:has(p)");  // 選中包含有<p>元素的<div>元素，返回jQuery 對象集合

$("td:parent");   //選中全部包含子節點的元素，包括文本也能夠算是子節點

可見性過濾器

$("span:hidden");  // 選中全部隱藏的<span>
$("span:visible"); // 選中全部可見的<span>

關於可見性，這裏須要額外說明的。在老版本的 jQuery 中 visibility:hidden;是認爲不可見的，我有證據，

Sizzle.selectors.filters.hidden = function(elem){
    return "hidden" === elem.type ||
        jQuery.css(elem, "display") === "none" ||
        jQuery.css(elem, "visibility") === "hidden";
};

這段代碼出自 jquery-1.3.1.js,然而到近代的版本中(在1.3.2就改了)

jQuery.expr.filters.hidden = function( elem ) {
            var width = elem.offsetWidth,
                height = elem.offsetHeight;
            // 沒有 visibility 什麼事
            return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
        };

簡單的說就是：若是元素佔用空間了，就認爲是可見的。只要不是0的都算可見的。

因此，visibility：hidden; 或者 opacity:0; 因爲佔有空間，它們算事「可見」的。

屬性過濾器

$("div[id]");   // 選中包含 id 屬性的div
$("input[name$='bc']");  // 選中 name 屬性以 'bc' 結尾的 input
$("input[name^='letter']"); // 選中屬性 name 是以'letter'開頭的 input
$("input[tag*='man']"); // 屬性tag裏包含'man'
$("input[abc='def']"); // 屬性 abc 的值爲 'def'

$("input[title!='722']");  // 選中屬性 title 不包含'722'的
$("input[id][gender$='man']"); // 選中包含id 屬性，和以'man'結尾的屬性 gender 的<input>元素

孩子過濾器

$("ul li:nth-child(2)"); // 選中自身是<ul>元素的第二個子節點的<li>元素，注意這個計算是從 1 開始的，不是從0 開始
$("div span:firstChild"); // 選中自身是<div>元素的第一個子節點的<span>元素
$("div span:lastChild"); // 選中自身是<div>元素的最後一個子節點的<span>元素

表單過濾器

$(":button");   //全部 <button> 和 <input type="button"> 元素
$("form :checkbox")； // 選中全部<form>標籤下的<input type="checkbox"> 不過這樣會比較慢

$("input:checkbox")； // 推薦

$(":file")； // 選中全部<input type="file">
$(":hidden"); // 選中全部隱藏元素，以及<input type="hidden">
$(":input"); // 選中全部<input>
$(":text");  // 選中全部<input type="text">
$(":password"); // 選中全部<input type="password">
$(":radio");    // 選中全部<input type="radio">
$("input:radio");  // 最佳實踐是這樣

$(":image")； // 選中全部<input type="image">
$(":reset");  // 選中全部<input type="reset">
$(":submit"); // 選中全部<input type="submit">

$("input:enabled"); // 選中全部enabled 的<input>元素
$("input:disabled"); // 選中全部disabled 的<input>元素
$("input:checked"); // 選中全部 checked 的 checkbox
$("input:selected"); // 選中全部 selected 的<option>元素

屬性相關的方法

jQuery.removeAttr(name);
jQuery.attr(name); // 返回屬性的值，好比$("img").attr("src")
jQuery.attr(key,value); // 這是設置屬性的值
jQuery.attr(properties); // 也是設置屬性的值

$("img").attr({
    src: "/images/hat.gif",
    title: "jQuery",
    alt: "jQuery Logo"
});

jQuery.attr(key,function); // function 計算出的結果，賦給key // 在回調函數中 function callback(index) {
 // index == position in the jQuery object
 // this means DOM Element
}

類相關的操做

jQuery.toggleClass(class); // 反覆加減 class
jQuery.toggleClass(class,switch); // 增長一個 switch 表達式

// 表達式計算後返回 class 名稱
$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});

jQuery.hasClass(class)； // 返回boolean
jQuery.removeClass(class); // 去掉掛載的 class
jQueyr.addClass(class)； // 加載 class

html相關的操做

jQuery.html()； // 返回包含的html 文本
jQuery.html(val); // 用val 替換包含的 html 文本,輸入的代碼會被執行

文本相關的方法

jQuery.text();  // 返回包含的純文本，不會包括html 標籤，好比<span>abcd</span>，調用 .text() 方法，只會返回abcd，不會返回<span>abcd</span>

jQuery.text(val); // 用 val 替換包含的純文本，和html(val)方法的區別在於，全部的內容會被看做是純文本，不會做爲html 標籤進行處理，好比調用.text("<span>abcd</span>")，<span> 和 </span>不會被認爲是html 標籤，而是做爲純文本顯示了。

值相關的操做

jQuery.val(); // 返回 string 或者array
jQuery.val(val); // 設置 string 值
jQuery.val(array); // 設置多個值，以上 3 個方法，主要都是用在表單標籤裏，如<input type="text">，<input type="checkbox">等

在jQuery 對象之間查找

須要弄清： 文本和節點是兩回事，在 DOM 裏就分開了。

jQuery.parent(expr); // 找父親節點，能夠傳入expr 進行過濾,好比

$("span").parent();
$("span").parent(". class"); // 用表達式過濾

jQuery.parents(expr); // 祖先元素，不限於父元素
jQuery.children(expr); // 返回全部子節點(不包括文本)，和 parents()方法不同的是，這個方法只會返回直接的孩子節點，不會返回全部的子孫節點

jQuery.contents(); // 返回下面的全部內容，包括節點和文本。這個方法和 children()的區別就在於，包括空白文本，也會被做爲一個jQuery 對象返回，children()則只會返回節點

jQuery.prev(); // 返回上一個兄弟節點，不是全部的兄弟節點
jQuery.prevAll(); // 返回全部以前的兄弟節點
jQuery.next(); // 返回下一個兄弟節點，不是全部的兄弟節點 (+)
jQuery.nextAll(); // 返回全部以後的兄弟節點(~)
jQuery.siblings(); // 返回兄弟姐妹節點，不分先後
jQuery.add(expr); // 往既有的jQuery 對象集合中增長新的jQuery 對象，例子：
$("div").add("p");

jQuery.find(expr); // 從當前的初始集合下去找,不會返回初始集合內容：
$("body").find("div");
// 等同於：
jQuery.find("body div");


jQuery.filter(expr); // 從初始的jQuery 對象集合中篩選出一部分

串聯方法

jQuery.andSelf();  // 把最後一次查詢前一次的集合,也增長到最終結果集中,好比:

$("div").find("p").andSelf(); 這樣結果集中包括全部的<p>和<div>。若是是$("div").find("p"),那就只有<p>，沒有<div>

jQuery.end(); // 把最後一次查詢前一次的集合，做爲最終結果集，好比
$("p").find("span").end(); // 全部的<p>，沒有<span>

DOM 文檔操做方法

a.append(b); // b 加到 a 上
$("div").append("<span>hello</span>");

a.appendTo(b); // a 加到 b 上
$("<span>hello</span>").appendTo("#div")； 

$("span").appendTo("div"); //隱藏的 move，移動元素

/* 好比在： <div id='a'>a: <span> hello </span> </div> <div id='b'>b: </div> 通過 $('span').appendTo("#b"); 結果會是正樣： a: b: hello */


jQuery.prepend(content); // 在選擇元素的內部第一個位置插入


a.prependTo(b); // a 插到 b 內部的排頭位置

jQuery.after(content); 注意是 content，在外部插入，插入到後面，好比
$("#foo").after("<span>hello</span>"); // 參數是內容，不能是選擇器

jQuery.insertAfter(selector)；// 容許是選擇器
$("<span>hello</span>").insertAfter("#foo");

jQuery.before(content); // 在外部插入，插入到前面, 參數不是選擇器

jQuery.insertBefore(selector); // 外面插入

jQuery.wrapInner(html); // 在內部插入標籤，好比
$("p").wrapInner("<span></span>");

jQuery.wrap(html); // 在外部插入標籤，好比
$("p").wrap("<div></div>"); // 全部的 p 都會被各自的div 包裹

jQuery.wrapAll(html); // 所選元素會被同一個大的 html 整個的所有包裹

jQuery.replaceWith(content); 好比
$(this).replaceWith("<div>"+$(this).text()+"</div>");

jQuery.replaceAll(selector);
$("<div>hello</div>").replaceAll("p");

jQuery.empty();
$("p").empty(); // 從娃娃作起，會把<p>下面的全部子節點清空,但不清理 p

jQuery.remove(expr);
$("p").remove(); // 從自身作起，會把全部<p>移除，能夠用表達式作參數，進行過濾

// 表面看跟 remove 作的同樣，刪除元素；
// 可是保留了元素中的數據或事件, 經過返回值返回，留存後用，
// 須要時候隨時能補上去，綁定的數據事件不受影響。
jQuery.detach();

jQuery.clone([withDataAndEvents ] ));

/* * 使用案例 在適用 append 的時候，隱約的咱們發現了它具備移動的功效： <div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div> $( ".hello" ).appendTo( ".goodbye" ); 結果變成了這樣： <div class="container"> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div> 若是咱們的需求是額外的拷貝一份元素到目的地： $( ".hello" ).clone().appendTo( ".goodbye" ); 這樣會更方便，結果會是這樣： <div class="container"> <div class="hello">Hello</div> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div> clone 的用法也分兩種： clone(true); // 克隆，而且連帶數據和綁定的事件 clone()/clone(false); // 克隆，表面結構 */

CSS 相關方法

jQuery.css(name); // 獲取一個 css 屬性的值，好比
$("p").css("color")

jQuery.css(object); // 設置css 屬性的值，好比
$("p").css({
     "color":"red",
     "border":"1px red solid"
  });

jQuery.css(name,value);
$("p").css("color","red");

位置計算相關方法

jQuery.scrollLeft(); // 設置滾動條偏移，這個方法對可見元素或不可見元素都生效
jQuery.scrollTop();  // 設置滾動條偏移，這個方法對可見元素或不可見元素都生效

jQuery.offset();     // 計算偏移量，返回值有 2 個屬性，分別是 top 和left

jQuery.position();  // 計算位置，返回值也有2 個屬性，top 和 left,返回：

[object Object] {
  left: 34.546875,
  top: 11
}

這裏須要額外補充：

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent.

簡單來講就是：offset 是相對於 document，而 position 相對於父元素。

寬度和高度計算相關方法

這組方法須要結合CSS 的盒子模型來理解，margin 始終不參與計算

jQuery.height();     // 計算的是 content
jQuery.innerHeight();  // 計算的是 content+padding
jQuery.outerHeight(); // 計算的是content+padding+border

jQuery.width();
jQuery.innerWidth();
jQuery.outerWidth();

瀏覽器及特性檢測

$.support，能夠檢測當前瀏覽器是否支持下列屬性，返回boolean。包括boxModel、cssFloat、
opacity、tbody 等
$.browser，檢測當前瀏覽器類型，返回一個map，其中可能的值有safari、opera、msie、mozilla

數據緩存方法

// 該類方法是jQuery.data()方法和jQuery.removeData()的另外一種形式，增長的elem 參數是DOM Element

$.data(elem, name);// 取出elem 上name 的值
$.data(elem, name, value); // 設置elem,name爲 value
$.removeData(elem, name); //刪除 elem 上的 name
$.removeData(elem); // 刪除elem 上的全部緩存數據

工具方法

$.isArray(obj); // 檢測一個對象是不是數組
$.isFunction(obj); // 檢測一個對象是不是函數
$.trim(str); // 去除string 的空格

$.( value, array [, fromIndex ] )
$.inArray(value, array); // 返回value 在array 中的下標， 若是沒有找到則返回-1

$.inArray(123, ["john",1,123,"f"]); // return2

$.unique(array); // 去除array 中的重複元素，該方法只對DOM Element 有效，對string 和 number 無效

總結

最後，因爲篇幅限制，把最重要的 事件綁定 和 ajax 獨立出來，而且也還沒寫完呢，先到這裏。