zoukankan      html  css  js  c++  java
  • 将原生JS和jquery里面的DOM操作进行了一下整理

    创建元素节点

    1.原生:

    document.createElement("div")

    2.jquery:

    $("<div></div>")

    创建文本节点并加入元素节点中

    1.原生:

    var text=document.createTextNode("文本内容"); var p=document.createElement("p"); p.appendChild(text);

    2.jquery:

    var $p=$('<p>Hello World.</p>');

    复制节点

    1.原生:

    var newP = p.cloneNode(true);

    2.jquery:

    $newP = $('#p').clone(true);

    插入节点

    1.原生

    1.parent.appendChild(node); //尾部插入 2.parent.insertBefore(newnode,targetnode); //targetnode元素之前插入newnode,没有参数的时候默认在父元素的头部插入

    2.jquery

    1.$('#p').append('<p>Hello World.</p>'); //#p元素的尾部插入 2.$('#p').prepend('<p>Hello World.</p>');//#p元素的头部插入 3.$('#p').before('<p>Hello World.</p>'); //在后面元素之前插入 4..$('#p').after('<p>Hello World.</p>'); //在后面元素之后插入

    删除节点

    1.原生:

    parent.removeChild(node); //parent节点中删除node节点

    2.jquery

    $('#p').remove(); //删除该节点

    替换节点

    1.原生

    parent.replaceChild(newNode,oldNode); //在父节点中替换节点

    2.jquery

    $('#p').replaceWith('<p>Hello World.</p>'); //使用后面的节点替换前面的节点

    获取和设置属性

    1.原生:

    node.setAttribute("title", "logo"); //设置nodetitle属性的值为logo node.getAttribute("title"); //获取title属性的值

    2.jquery

    $("#logo").attr({"title": "logo"}); $("#logo").attr("title");

    希望对大家有用!

  • 相关阅读:
    yum 安装pip
    sed和awk用法
    awk删除最后一个字符
    shell读取文件内容并进行变量赋值
    git 添加、提交、推送
    git 本地代码冲突解决,强制更新
    sys系统模块
    os模块
    time-时间模块
    环境变量的使用
  • 原文地址:https://www.cnblogs.com/nujufoul/p/7003702.html
Copyright © 2011-2022 走看看