鋒利的jquery第三章
阿新 • • 發佈:2018-12-13
即能設定元素的值,也能獲取元素的值: 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:多個函式引用只能儲存一個,後面的會覆蓋掉前面的。