jQuery IN ACTION 小筆記

jQuery in Action 我的讀書筆記

1.      $是jQuery的別名，所以$(“#idName”),其實就是jQuery（“#idName”）

2.      選擇器可以聯合使用

比如，以前我只知道可以用$(“#idName”)找到ID為“idName”的那些節點，用$(“.className”)找到class為“className”的那些節點，原來可以用$(“#idName.className”)把符合兩個條件的找出來，害的我以前還要大迴圈裡做條件匹配。

所以有$("body > div:has(a)")這樣的組合出來，也就省事不少。

 3.      以前我們在處理頁面的時候，往往要等到整個頁面載入完了才會進行處理，所以會用到onload，但是onload要等所有的東西都載入完了才執行，誰知道Flash，QuickTime這些大傢伙啥時候能夠完全OK呀，其實只要節點載入完了就可以執行操作了，所以jQuery有了ready這個function。

jQuery(document).ready(function() {

$("div.notLongForThisWorld").hide();

});

 書上原話是“jQuery提供一個簡單的方式就是等到DOM Tree載入完（而不是等待外部資源的載入）就立即執行程式碼。

4.      在jQuery中自定義函式，比如jQuery中並沒有disabled一組元素的函式，但是我們又很想用，比如

$("form#myForm. input.special").disable();

那麼我們可以立即去定義一個

$.fn.disable = function() {

   return this.each(function() {

      if (typeof this.disabled != "undefined") this.disabled = true;

   });

}

真的很方便.

5.  選擇器例項

例子                描述

   a                                      選擇所有的標籤 a 元素

   #speicalID                    選擇那些ID值為speicalID的元素

    .specialClass             選擇那些Class值為specialClass的元素

a#specialId.specialClass  這個我就不說了

p a.specialClass                 同上

 

6.      $(“form. input”)和$(“form. > input”)雖然都是有包含關係，不過前者來的更隨意些，後者只能是父子關係，而不是簡單的包含關係，所以祖孫關係是不行的。

7.      匹配關係一覽

*           Matches any element.

E          Matches all elements with tag name E.

E F       Matches all elements with tag name F that are descendents of E.

E>F      Matches all elements with tag name F that are direct children of E.

E+F     Matches all elements with tag name F that are immediately preceded by sibling E.

E~F     Matches all elements with tag name F preceded by any sibling E.

E.C      Matches all elements with tag name E with class name C. Omitting E is the same as *.C.

E#I      Matches all elements with tag name E with the id of I. Omitting E is the same as *.I.

E[A]     Matches all elements with tag name E that have attribute A of any value.

E[A=V] Matches all elements with tag name E that have attribute A whose value is exactly V.

E[A^=V] Matches all elements with tag name E that have attribute A whose value starts with V.

E[A$=V] Matches all elements with tag name E that have attribute A whose value ends with V.

E[A!=V] Matches all elements with tag name E that have attribute A whose value does not match the value V, or

that lack attribute A completely.

E[A*=V] Matches all elements with tag name E that have attribute A whose value contains V.

 8.      選擇還可以使用位置引數

比如，a:first 即匹配第一個a，相應還有odd，even，last-child（包含關係時）

    :first The first match within the context. li a:first returns the first link that is a

              descendant of a list item.

   :last  The last match within the context. li a:first returns the last link that is a

             descendant of a list item.

   :first-child The first child element. lifers-child returns the first list item of each list.

   :last-child  The last child element. li:first-child returns the last list item of each list.

   :only-child  Returns all elements that have no siblings.

   :nth-child(n) The nth child element. li:nth-child(2) returns the second list item of each

                          list.

  :nth-child(even|odd) Even or odd children. li:nth-child(even) returns the even list items of each

                           list.

  :nth-child(Xn+Y) The nth child element computed by the supplied formula. If Y is 0, it may be omitted.

  li:nth-child(3n) returns every 3rd list item, whereas li:nthchild(5n+1) returns the item after every 5th element.

  :even Even elements. li:even returns every even list item.

  :odd Odd elements. li:odd returns every even list item.

  :eq(n) The nth matching element.

  :get(n) Matching elements after and excluding the nth matching element.

  :lt(n) Matching elements before and excluding the nth matching element.

 

9.      幾個內容函式的區別

.html() 返回帶有完整的html標籤等

.text()  返回文字

.val()   返回屬性value的值

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/554557/viewspace-628653/，如需轉載，請註明出處，否則將追究法律責任。