使用jQuery操作DOM

一、样式操作

  设置样式  设置单个:css(name,value)    设置多个:css({name1:value1,name2:value2,.....})  无参数时获取样式

  追加样式  addClass(className)

  移除样式  removeClass(className)

  切换样式  toggleClass(className)

二、内容操作

  html()    解析HTML语句。获取时能获取到<>的文本显示。带参数时,文本按HTML解析后的样式显示

  text()    不解析HTML语句。获取时只获取文本,<>内容被忽略。带参数时,文本原样显示,即“<标签名>文本</标签名>”

  val()      获取或者设置元素的value属性值

  contains()  获取涵盖某些文本的元素标签

  

三、节点操作

  节点本身的操作

    查找节点  使用选择器获取元素

    创建节点

      $(element)  以DOM元素来创建jQuery对象  $(document)

      $(selector)  使用jQuery选择器匹配元素    $("li")

      $(html)    使用HTML字符串创建    var $newNode=$("<li><li>"); var $newNode=$("<li>你好!<li>");

    插入节点

      内部插入

        append(content)  $(A).append(B)  将B追加到A中

        appendTo(content)  $(A).appendTo(B)  将A追加到B中

        prepend(content)  $(A).prepend(B)  将B插入到A中的前方

        prependTo(content)  $(A).prependTo(B)  将A前置B中的前方

      外部插入

        after(content)    $(A).after(B)  将B插入到A之后

        insertAfter(content)  $(A).insertAfter(B)  将A插入B之后

        before(content)    $(A).before(B)  将B插入到A之前

        insertBefore(content)  $(A).insertBefore(B)  将A插入到B之前

    删除节点  

      01、$(selector).remove([expt])

        参数为可选项,有参数删除参数获得的元素,无参数删除remove前的元素本身

      02、$(selector).empty()

        清空元素中的所有后代节点

      03、detach()

        删除节点,但保留事件。

        需要变量来接受此方法的返回值,以便恢复节点。

      

empty(), remove(), detach()三者的区别
   
 empty() 只能清空节点的内容和子元素!节点本身不会被删除!
   
 remove() 01.删除整个节点,包含自身和子元素!
  02.删除了节点所对应的事件
   
 detah() 01.删除整个节点,包含自身和子元素!
  02.不会删除节点所对应的事件

    复制节点

      $(selector).clone([includeEvents])

      includeEvents为可选值,true 或者 false

      true  复制元素的所有事件处理

      false  只复制元素,不复制事件处理

    替换节点

      replaceWith()  $(A).replaceWith(B)  用B替换掉A

      replaceAll()  $(A).replaceAll(B)  用A替换掉B

  属性操作

    获取属性和设置属性

      获取属性值:$(selector).attr([name])

      设置属性:$(selector).attr({[name1:value1],[name2:value2],[name3:value3],....})

    删除属性

      $(selector).remove(name)

  节点遍历

    遍历子节点

      $(selector).children([expr])

      expr  用于过滤子元素的表达式,可选项

    遍历紧邻其后的兄弟节点

      $(selector).next([expr])

      expr  可选项。若有,既要是紧邻selector之后的那个元素,又要满足过滤

    遍历紧邻其前的兄弟节点

      $(selector).prev([expr])

      expr  可选项。若有,既要是紧邻selecto之前的那个元素r,又要满足过滤

    遍历所有兄弟节点(不包含自身)

      $(selector).siblings([expr])

      expr  用于过滤的表达式,可选项。既要是兄弟,又要满足过滤

    遍历父节点

      $(selector).parent([expr])

      expr  用于过滤父元素的表达式,可选项。既要是直属父级,又要满足过滤

    遍历祖先节点(包含直接父级)

      $(selector).parents([expr])

      expr  用于过滤父元素的表达式,可选项。获取所有满足过滤条件的祖先元素

    其他遍历方法

      each()

      end()

四、CSS-DOM操作

  获取或设置元素的样式

    css()

  获取或设置元素的宽度、高度

    height()

    width()

  获取元素相对最近的已定位祖先节点

    offsetParent()

  获取元素在当前视窗的相对偏移

    position()

  获取元素的滚动条距离顶端和左侧的距离

    scrollLeft([position])

    scrollTop([position])

    

原文地址:https://www.cnblogs.com/vic_/p/7858157.html