1. 程式人生 > >鋒利的jquery第三章

鋒利的jquery第三章

即能設定元素的值,也能獲取元素的值:
attr()/html()/text()/height()/width()/val()/css()

jquery第三章:
---------------------------------------------DOM操作----------------------------------
1.插入節點:
append()    
appendTo():可以用來移動元素--$("ul li:eq(0)").appendTo("ul");    
prepend()    
prependTo()
after()        
insertAfter()
before()    
insertBefore()

2.刪除節點:
remove():
    返回一個指向已經被刪除的節點的引用,因此可以在後面繼續使用被刪除的節點。
    可以通過傳遞引數來選擇性的刪除元素--$("ul li").remove("li[title='南']");
detach():
    和remove不同的是,remove刪除之後再追加,繫結事件會失效,而detach不會。
empty()
    清空節點

3.複製節點:
clone():
    $(this).clone().appendTo("ul");--這樣複製出來的節點不具有任何的行為。
    $(this).clone(true).appendTo("ul");--複製元素同時複製繫結事件。

4.替換節點:
    如果替換之前已經為元素繫結事件,替換後,會一起消失,需要在新元素上重新繫結事件。
replaceWith():前-後
replaceAll():後-前


5.包裹節點:
wrap():
    $("strong").wrap("<b></b>");
    所有的元素進行單獨包裹
wrapAll():
    所有匹配的元素用一個元素包裹
    如果被包裹的多個元素之間有其它元素,其它元素會被放到包裹元素之後。
wrapInner():
    包裹元素之間的內容

6.屬性操作:
attr():
    獲取和設定元素屬性:
    一次性設定多個屬性:$("p").attr({"title":"yourTitle", "name":"yourName"});
removeAttr():
    刪除元素屬性

---------------------------------------------style操作----------------------------------
1.獲取樣式和設定樣式:
attr():

2.追加樣式:
addClass():

3.移除樣式:
removeClass():

4.切換樣式:
toggle():交替一組動作
    $toggleBtn.toggle(function(){
        //顯示元素
    }, function(){
        //隱藏元素
    })

5.判斷是否包含某個樣式:
hasClass():

---------------------------------------------設定和獲取HTML、文字和值----------------------------------
1.獲取html
html():
    獲取p元素的HTML程式碼:$("p").html();
    設定:
text():--javascript:innerText
val():--javascript:value
    文字框、下拉框和單選框

focus():--javascript:onFocus
blur():--javascript:onBlur

this 指向當前文字框
this.defaultValue 當前文字框的預設值

val():還擁有選中功能
    $("#valSelect").val("選中三號");
    $("#valAnySelect").val(["選中二號","選中四號"]);
    $(":checkbox").val(["xi"]);--多選框即使選一個也要包含在方括號中
    $(":radio").val(["radio1"]);

2.遍歷節點:
children():
    只考慮子,不考慮孫子

next():
匹配元素之後的同輩元素
    列印物件:html()

prev():
    匹配元素之前的同輩元素

siblings():
    匹配元素前後所有的同輩元素

closest():
    取得最近的匹配元素
    返回最先匹配的祖先元素:

parent():
    第一個父親節點
parents():
    所有父親節點


windows.onload 和 $(document).ready()方法的區別
windows.onload:多個函式引用只能儲存一個,後面的會覆蓋掉前面的。