美文网首页
原生JS和Jquery操作dom

原生JS和Jquery操作dom

作者: sakatayui酱 | 来源:发表于2017-06-23 22:11 被阅读0次

    整理一下,方便复习。

    创建元素节点

    1.原生:

    document.createElement("div")

    2.jquery:

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

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

    1.原生:

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

    2.jquery:

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

    复制节点

    1.原生:

    varnewP = p.cloneNode(true);

    true和false的区别:

    true :克隆整个'<p>Hello World</p>'节点

    false:只克隆'' ,不克隆文本Hello World.'

    2.jquery:

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

    注意:克隆节点要避免ID重复

    插入节点

    1.原生

    1.parent.appendChild(node);//尾部插入

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

    2.jquery:

    1.$('#p').append('<p>Hello World</p>');

    $('<p>Hello World</p>').appendTo('#p')//在#p元素的尾部插入

    2.$('#p').prepend('<p>HelloWorld</p>');

    $('<p>Hello World</p>').prependTo('#p')//在#p元素的头部插入

    3.$('#p').before('<p>HelloWorld</p>')

    $('<p>Hello World</p>').insertBefore('#p');//在后面元素之前插入

    4..$('#p').after('<p>HelloWorld</p>');

    $('<p>Hello World</p>').insertAfter('#p');//在后面元素之后插入

    删除节点

    1.原生:

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

    2.jquery

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

    替换节点

    1.原生

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

    注意:oldNode必须是parentEl真实存在的一个子节点

    2.jquery

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

    获取和设置属性

    1.原生:

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

    node.getAttribute("title");//获取title属性的值

    checkboxEl.checked =true;

    checkboxEl.checked;

    2.jquery

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

    $("#checkbox").prop({"checked":true});

    $("#checkbox").prop("checked");

    相关文章

      网友评论

          本文标题:原生JS和Jquery操作dom

          本文链接:https://www.haomeiwen.com/subject/sukhcxtx.html