欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery里面的DOM操作(查找,创建,添加,删除节点)

程序员文章站 2022-05-28 14:04:50
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点"); 例如:var li1 = $("
  • 橘子
  • "); 添加属性节点:var li3 = $("
  • appendto(): 将元素添加到元素里面
    用法: $(li3).appendto("#box1");

    prepend(): 添加节点到元素的最上面

    prependto():将节点添加给指定元素的最上面
    用法:$(li3).prependto("#box1");

    before():将节点添加到指定元素的前面(外层)
    用法: $("#div1").before(div1);

    insertbefore():将新建元素添加到目标节点前面左右目标元素的兄弟元素

    after():将节点添加到指定元素的后面(外层)
    用法: $("#div1").after(div1);

    insertafer(): 将新建的元素添加到目标节点后面作为兄弟元素
    用法:$(element).insertafter("目标节点")

    二:删除节点

    remove(): 删除所有匹配到的元素,这个方法能够删除元素的所有子节点
    $(element).remove();

    empty(): empty原则上来讲它并不是删除元素,它只是清空节点,它能清空指定元素的所有子节点

    $(element).empty();

    三:修改节点(替换节点,包裹节点,复制节点)

    包裹节点:wrap()
    用法:$(element).wrap("html")

    复制节点:clone(true) 完全复制某一个元素 :true复制元素的同时也复制它的行为,如果不需要复制行为的时候就不加参数
    用法:$(element).clone(true);

    四:属性操作和样式操作

    attr() : 用来获取样式和设置样式和属性
    removeattr() : 用来删除元素样式和属性

    addclass() :追加样式
    removeclass :移除样式
    toggleclass : 切换样式
    hasclass :判断是否含有某个样式

    五:设置和获取html 文本和值

    html() :获取元素中html内容
    text() :获取元素中文本
    val() :获取元素中的值,类似于javascript中的value属性

    children() :用于取得匹配元素中的子元素集合。
    next() :用于取得匹配元素后面紧跟的兄弟元素
    prev() :用于取得匹配元素前面紧邻的兄弟元素
    siblings() :用于取得匹配元素所有的兄弟元素

    ...