【文章根據尚矽谷教學材料總結】

發博備查。

1.
 . class選擇器
 # id選擇器
 : 選取

2. $(function(){})相當於 window.onload 方法.
 window.onload = function(){...}

3. 載入DOM的兩種方式: jQuery 和 window.onload
 $(document).ready(function(){...})
 $(function(){...}

4. 選取button 並新增 onClick 響應函式. $("button").click(function(){}

5. jQuery 和 DOM 物件
 [1]. 由 jQuery 物件轉為 DOM 物件.
 1). 獲取一個 jQuery 物件.
 var $btn = $("button");
 2). jQuery 物件是一個陣列.
 alert($btn.length);
 3). 可以透過陣列下標轉為 DOM 物件.
 alert($btn[1].firstChild.nodeValue);
 [2]. 由 DOM 物件轉為 jQuery 物件.
 1). 選取一個 DOM 物件.
 var btn = document.getElementById("btn");
 2). 把 DOM 物件轉為一個 jQuery 物件:使用 $() 進行包裝.
 alert($(btn).text());

6. 使用 id 選擇器選擇 id=btn1 的元素, 併為選擇的 jQuery 物件新增 onclick 響應函式.
 $("#btn1").click(function(){...});

7. jQuery 物件遍歷的方式是 each , 在 each 內部的 this 是得到的 DOM 物件, 而不是一個jQuery 物件
 $("#btn5").click(function(){
 var leng = $(":checkbox[name='newsletter':checked]").each(function(){
 alert(this.value);
 });
 });

8. 選取子元素需要在選擇器前新增空格. div.one 同 .one .
 $(".one :nth-child(2)").css("backgroud" ,"#ffbbaa");

9. 選擇的是一個陣列, 當該陣列中有多個元素時, 透過 .val() 方法就只能獲取第一個被選中第一個被選中的值了.

10. jQuery 物件可以進行隱式迭代:
 $("p").click(function(){...})
 為選取的所有的 p 節點都新增了 click 響應函式.
 jQuery 物件本身就是一個 DOM 物件的陣列.

11. 在響應函式中, this 是一個 DOM 物件, 若想使用jQuery 物件的方法, 需要把其包裝為 jQuery 物件:
 使用 $() 把 this 包起來.

12. text() 方法是一個讀寫的方法:
 不加任何引數, 讀取文字值；
 加引數, 為屬性節點新增文字值(文字節點).
 和 text() 方法類似的:attr() ,val().

13. 使用 jQuery 操作文字節點, 屬性節點及查詢元素節點.
 1). 操作文字節點:透過 jQuery 物件的 text() 方法
 alert($("#bj").text());
 $("#bj").text("TEST");

 2). 操作屬性節點:透過 jQuery 物件的 atter() 方法.
 注:直接操作 value 屬性值可以使用共便捷的 val() 方法.
 alert($(":text[name='username']").attr("value"));
 $(":text[name='username']").attr("value","TEST");

14. 建立節點:
 使用 $(html) 方式即可, 元素節點, 文字節點, 屬性節點可以一網打盡返回對應節點的 jQuery 物件 :
 $("<li id='TEST'>測試</li>")

15. 新增節點:
 1). appendTo() 和 append():主語和賓語的位置不同:
 ("<li id='TEST'>測試</li>").appendTo($("#city"));
 $("#city").append("<li id='TEST'>測試</li>");

 2). prependTo() 和 prepend():主語和賓語位置不同:
 $("<li id='TEST'>測試</li>").prependTo($("#city"));
 $("#city").prepend("<li id='TEST'>測試</li>");

16. 同 JS 的響應函式一樣, jQuery 物件的響應函式若返回 false 可以取消指定元素的預設行為,比如 submit , a 等.

17. val() 方法,相當於 attr("value"),獲取表單元素的 value 屬性值

18. $.trim(str) 可以去除 str 的前後空格.

19. jQuery 物件的 remove() 方法:
 將把jQuery 物件對應的DOM節點直接刪除
 $("#bj").remove();

20. 清空 game 節點:
 jQuery 物件的 empty() 方法: 清空jQuery物件對應的 DOM 物件的所有的子節點.
 $("#game").empty();

21. jQuery 呼叫jQuery 提供的方法的返回值如果是一個物件的話那麼這個物件一定是一個 jQuery 物件

22. find() 方法:查詢子節點,返回值為子節點對應的 jQuery 物件.

23. jQuery clone 方法:複製節點.
 1). clone 節點時需要注意克隆後的節點的 id 屬性.若原節點有 id 屬性, 則克隆後,會在一個文件中出現兩個相同 id 的節點的情況.

 2). clone(true):在克隆節點的同時,克隆節點包含的事件.

24. jQuery replaceWith (replaceAll) 方法:替換節點.
 1). repalceWith ,replaceAll 一對方法完成相同功能,只是主賓位置不同.
 2). 以上的兩個方法還有移動的功能.
 3). 節點互換需要先克隆節點.
 4). var $rl = $("rl").replaceWith($bj2); 返回的是被替換的節點 rl .

25.
 1). 建立一個<li>測試</li> 節點,替換 #city 的最後一個 li 子節點.
 $("<li>測試</li>").repalceAll($("#citi li:last"));
 2). 建立一個<li>測試</li> 節點,替換 #city 的第二個 li 子節點.
 $("#city li:eq(1)").replaceWith($("<li>測試</li>"));
 3). 互換以下兩個節點: #rl 和 #bj .(互換節點有移動的功能).
 var $bj2 = $("#bj").clone(true);
 var $rl = $("rl").replaceWith($bj2);
 $("#bj").replaceWith($rl);

26. 使用 jQuery wrap ,wrapAll ,wrapInner:
 1). 包裝 li 本身.
 #("#game li").wrap("");
 2). 包裝所有 li .
 $("#city li").wrapAll("");
 3). 包裝 li 裡邊的文字.
 $("#language li").wrapInner("");

27. val 不能直接獲取 checkbox 被選擇的值.若直接獲取, 只能得到第一個被選擇的值.
 因為 $(":checkbox[name='c']:checked") 得到的是一個陣列, 而使用val()方法只能獲取陣列元素的第一個值, 若希望列印被選擇的所有值, 需使用 each 遍歷

28. jQuery 樣式相關的方法.
 1). hasClass():某元素是否有指定的樣式.
 alert($("div").hasClass("SubCategoryBox"));//true
 2). 移除樣式.
 $("div").removeClass("SubCategoryBox");
 3). 新增樣式.
 $("div").addClass("SubCategoryBox");
 4). 切換樣式:存在則去除；沒有則新增.
 $(".showmore").click(function(){
 $("div:first").toggleClass("SubCategoryBox");
 return false;
 });
 5). 獲取和設定元素透明度: opacity 屬性.
 alert($("div:first").css("opacity"));
 $("div:first").css("opacity".0.5);
 6). width() & height() .
 alert($("div:first").width());
 alert($("div:first").height());
 $("div:first").width(400);
 $("div:first").height(80);
 7). 獲取元素在當前視窗中的相對位移:offset() .
 其返回物件包含了兩個屬性: top ,left .該方法只對可見元素有效.
 alert($("div:first").offset().top);
 alert($("div:first").offset().left);

29. onclick 事件的另一種寫法: bind: 為某 jQuery 物件繫結事件.
 $(".head").click(function(){...});
 $(".head").bind("click" ,function(){...})

30. 事件冒泡:什麼是事件的冒泡.
 $("body").click(function(){
 alert("1");
 });

 $("#content").click(function(){
 alert("2");
 });

 $("span").click(function(){
 alert("3");
 //如何解決事件冒泡:透過在響應函式的結尾返回 false ,可以阻止冒泡.
 return false;
 });

31. toggle() 可以切換元素是否可見.
 slideToggle():透過高度變化來切換匹配元素的可見性.
 fadeToggle():透過透明度變化來切換匹配元素的可見性.
 fadeTo():把不透明度以漸進的方式調整為透明的值.

32. var $category = $("li:gt(5):lt(7)");
 此時的lt 是在 li:gt(5) 基礎上執行的.

33. 總結:
 [1]. jQuery 是 JavaScript 的一個函式庫,非常方便,非常主流
 [2]. 利用 jQuery 開發的步驟:
 1). 匯入 jQuery 庫
 2). 在 $(function(){}) 中編輯程式碼
 [3]. jQuery 物件 vs DOM 物件
 1). 兩者不能使用對方的屬性和方法
 2). jQuery 物件是一個 DOM 陣列物件, 所以可以使用下標的方式轉為DOM物件.
 var $btn = $("button");
 var btn = $btn[0];
 3). jQuery 物件是使用 $() 包裝 DOM 物件後產生的物件。
 $("select :selected").each(function(){
 alert($(this).value);
 })
 [4]. jQuery 的選擇器。
 1). 選取被選中的 select 的 option 需要使用選取子節點的方式
 $("select[name='test'] :selected").each(funtion(){...})
 2). jQuery 選擇器可以綜合使用
 3). 如果選擇器搞不定,可以呼叫方法實現
 [5]. jQuery 物件的幾個方法:
 1). val():獲取或設定表單元素的 value 屬性值
 設定值
 $(":text:enable").val("TEST");
 獲取值
 $(":text:enable".val())
 2).attr(): 和val()方法類似
 attr(name.val):為 name 屬性賦值為 val
 attr(name):獲取 name 屬性值
 3).each():對 jQuery 物件進行遍歷,其引數為 function, 函式內部的 this 是正在遍歷的 DOM 物件
 $("select :selected").each(function(){
 alert(this.val);
 })
 4).text():和 val() 方法類似
 text():獲取元素節點的文字子節點的值
 text(str):設定元素節點的文字子節點的值

 [6].使用jQuery進行DOM操作:
 1).新建（元素、屬性、文字）節點:直接使用$()包裝即可,返回值是一個jQuery物件。
 var $TEST = $("<li id='TEST'>測試</li>");
 2).節點插入到文件中:
 ① append ,appendTo:把節點 A 插入為節點 B 的最後一個子節點

 $("<li id='TEST'>測試</li>").appendTo($("#city"));
 $("#city").append("<li id='TEST'>測試</li>");

 ② prepend ,prepenfTo

 $("<li id='TEST'>測試</li>").prependTo($("#city"));
 $("#city").prepend("<li id='TEST'>測試</li>");

 ③ before ,insertBefore

 $("<li id='DDD'>屌屌的</li>").insertBefore($("#bj"));
 $("#bj").before("<li id='DDD'>屌屌的</li>");

 ④ after ,insertAfter

 $("<li id='DDD'>屌屌的</li>").insertAfter($("#bj"));
 $("#bj").after("<li id='DDD'>屌屌的</li>");

 3).刪除節點:

 $("#bj").remove();

 4).清空節點:

 $("#game").empty();

 5).克隆節點:

 $("#bj").clone(true);

 6).替換節點:

 $("<li>測試</li>").repalceAll($("#citi li:last"));

 $("#city li:eq(1)").replaceWith($("<li>測試</li>"));

 7).wrap ,wrapAll ,wrapInner:瞭解

 8).val() ,html() ,text() ,attr() ,width() ,height() 等兼具有讀寫功能的方法.

 //讀取某個節點的html內容
 alert($("#city").html());

 //設定某個節點的html內容
 $("#city").html("<li id='DDD'>屌屌的</li>")

 [7].技術點之外:

 1). jQuery 物件可以進行隱式迭代: $("p").click(function(){...})為選取的所有的 p
 節點都新增了 click 響應函式. jQuery 物件本身就是一個DOM物件的陣列.

 2). 在jQuery 中顯示迭代:使用 each() 方法:
 $(":checkbox[name='c']:checked").each(function(){
 alert(this.value);
 });

 可以在顯示迭代的響應函式的引數中透過index屬性獲取到正在遍歷的物件的索引.

 3).在響應函式中, this 是一個 DOM物件,若想使用jQuery物件的方法,需要把其包裝為
 jQuery物件:使用 $() 把 this 包起來.

 4). defaultValue :DOM 物件的屬性,可以獲取表單元素的預設值.

 5).透過 val() 為 radio 賦值:即便是為一組 radio 賦值,val引數中也應該使用陣列,
 使用一個值不起作用

 6).val 不能直接獲取 checkbox 被選擇的值.若直接獲取,只能得到第一個被選擇的值.因
 為 $(":checkbox[name='c']:checked")得到的是一個陣列,而使用val()方法只能獲取陣列元素的第一個值,若希望列印被選擇的所有值,需使用 each 遍歷.
 而 radio 被選擇的只有一個,所以可以直接使用 val() 方法獲取被選擇的值.

 7).1. 同 JS 的響應函式一樣, jQuery 物件的響應函式若返回 false 可以取消指定元素
 的預設行為,比如 submit , a 等.

 8). $.trim(str) 可以去除 str 的前後空格.

 9).jQuery 物件的方法的連綴:呼叫一個方法的返回值還是呼叫的物件,於是可以在呼叫方法的後面依
 然呼叫先前那個物件的其他方法.

 10).find()方法:查詢子節點,返回值為子節點對應的jQuery物件.

 var $trNode = $(aNode).parent().parent();
 //獲取 $tr 的第一個 td 節點的文字節點的文字值.
 var textContent = $trNode.find("tr:first").text();

jQuery 知識點總結

相關文章