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])//获取匹配元素集合中的每个元素的祖先元素           

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