• 使用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])

        

  • 相关阅读:
    umeng社交分享最新版5.0的跨进程使用崩溃的问题及解法-Android
    AlertDialog禁止返回键
    一个男人想经商,不读 100本商人自传,怎么会了解商人的思维状态
    Android中使用Gson解析JSON数据的两种方法
    DevExpress gridControl控件动态绑定列 zt
    获得WCF Client端的本地端口 z
    log4net.dll配置以及在项目中应用 zt
    系统交易策略 hylt
    判斷作業系統為 64bit 或 32bit z
    路徑 z
  • 原文地址:https://www.cnblogs.com/vic_/p/7858157.html
Copyright © 2020-2023  润新知