原生js和jquery常用的DOM操作

前言

将原生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");  //设置node的title属性的值为logo
node.getAttribute("title");  //获取title属性的值

2.jquery

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

转载于:https://www.cnblogs.com/zhangjunfeng/p/6610461.html

原生js和jquery常用的DOM操作相关推荐

原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
三、jQuery 中的 DOM 操作（超详细）
文章目录前言一. DOM 介绍二. 查找节点 2.1查找元素节点 2.2查找属性节点三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点四.插入节点 4.1 DO ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
jQuery 基础教程（四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组 ...
原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作查查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

原生js和jquery常用的DOM操作

前言

创建元素节点

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

复制节点

插入节点

删除节点

替换节点

获取和设置属性

原生js和jquery常用的DOM操作相关推荐

最新文章

热门文章