jQuery中的DOM操作

通常DOM操作可分爲三類——DOM Core(核心)、HTML-DOM和CSS-DOM。
樣式操作
    css()直接設置樣式
        css("name","value")//設置單個屬性
        
        css({"name":"value","name":"value",...})//設置多個屬性

    addClass()爲元素追加類樣式
        addClass("class")//添加單個樣式
        或  
        addClass("class1" "class2" ... "classN")//添加多個樣式

    remove()移除樣式,和addClass()方法對應。
        removeClass("class")//移除單個樣式
          
        removeClass("class1" "class2" ... "classN")//移除多個樣式

    toggleClass()切換樣式
        toggleClass("class")//模擬了addClass()和removeClass()實現樣式切換的過程。
內容操作
    html()獲取或設置元素的內容(包含HTML標籤)
        html()//用於獲取第一個匹配元素的HTML內容和文本內容
        html("content")//用於設置所有匹配元素的HTML內容和文本內容

    text()獲取或設置元素的文本內容(不包含HTML標籤)
        text()//用於獲取所有匹配元素的文本內容
        text("content")//用於設置所有匹配元素的內容

    val()獲取或設置value屬性值的方法
        val()//用於獲取第一個被選元素的value屬性的值
        val("新value屬性值")//規定被選元素的新內容

節點操作
    1.查找節點
        在jQuery中,獲取元素,可以使用jQuery選擇器。
    2.創建節點
        使用$()工廠函數來創建節點。
    3.插入節點
        內部插入
            /*向父節點的內部的後面插入新節點*/
            ("父節點").append("新子節點")
            
            ("新子節點").appendTo("父節點")
            
            /*向父節點的內部的前面插入新節點*/
            ("父節點").prepend("新子節點")
            
            ("新子節點").prependTo("父節點")
        
        外部插入
            /*向原節點的後面插入同輩新節點*/
            ("原節點").after("新節點")
            或
            ("新節點").insertAfter("原節點")
            
            /*向原節點的前面插入同輩新節點*/
            ("原節點").before("新節點")
            或
            ("新節點").insertBefore("原節點")
    4.刪除節點
        $("要刪除節點").remove()//刪除所選節點
        $("要清空節點").empty()//清空所選節點中的內容
    5.替換節點
        /*將所有匹配元素替換成指定的新元素*/
        $("被替換節點").replaceWith("新節點")
        或
        $("新節點").replaceAll("被替換節點")
    6.複製節點
        $(selector).clone([includeEvents])//其中參數爲可選值,爲布爾值,規定是否複製元素的所有事件處理,爲true時複製事件處理,爲false時反之。

屬性操作
        /*獲取、設置和刪除元素屬性*/
        attr([name])//獲取或設置單個元素的屬性值
        attr({[name1:value1],[name2:value2],...[nameN:valueN]})//設置多個屬性值
        removeAttr("attName")//刪除某個元素特定的屬性

節點遍歷
    遍歷子元素
        children([expr])//遍歷子元素的方法只有一個,該方法可以用來獲取元素的所有子元素,而不考慮其他的後代元素。其參數expr可選,用於過濾子元素的表達式。

    遍歷同輩元素
        next([expr])//獲取緊鄰匹配元素的下一個同輩元素
        prev([expr])//獲取緊鄰匹配元素的上一個同輩元素
       sibling([expr])//獲取匹配元素的所有同輩元素
    
    遍歷前輩元素
        parent([selector])//獲取匹配元素集合中的每個元素父級元素
        parents([selector])//獲取匹配元素集合中的每個元素的祖先元素           

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章