创建元素节点
原生 JS 创建元素节点
document.createElement("p");
jQuery 创建元素节点
$('<p></p>')
创建并添加文本节点
原生 JS 创建文本节点
document.createTextNode("Text Content");
通常创建文本节点和创建元素节点配合使用, 比如
var textEl = document.createTextNode("Hello world"); var pEl = document.createElement("p"); pEl.appendChild(textEl);
jQuery 创建并添加文本节点
var $p = $('<p>Hello world</p>');
复制节点
原生 JS 复制节点
var newEl = pEl.cloneNode(true);
true 和 false 的区别
true: 克隆整个
'<p>Hello world</p>'
节点
false: 只克隆'<p></p>', 不克隆文本 Hello world
jQuery 复制节点
$newEl = $('#pEl').clone(true);
注意: 克隆节点要避免 ID 重复
插入节点
原生 JS 向子节点列表的末尾添加新的子节点
El.appendChild(newNode);
原生 JS 在节点的已有子节点之前插入一个新的子节点
El.insertBefore(newNode,targetNode);
在 jQuery 中, 插入节点的方法比原生 JS 多的多
在匹配元素子节点列表结尾添加内容
$('#El').append('<p>Hello World</p>');
把匹配元素添加到目标元素子节点列表末尾
$('<p>Hello world</p>').appendTo('#El);
在匹配元素子节点列表的开头添加内容
$('#El').prepend('<p>Hello world</p>');
把匹配元素添加到目标元素子节点列表的开头
$('<p>Hello World.</p>').prependTo('#El');
在匹配元素之前添加目标内容
$('#El').before('<p>Hello World.</p>');
把匹配元素添加到目标元素之前
$('<p>Hello World.</p>').insertBefore('#El');
在匹配元素之后添加目标内容
$('#El').after('<p>Hello World.</p>');
把匹配元素添加到目标元素之后
$('<p>Hello World.</p>').insertAfter('#El')
删除节点
原生 JS 删除节点
El.parentNode.removeChild(El);
jquery 删除节点
$('#El).remove();
替换节点
原生 JS 替换节点
El.replaceChild(newNode,oldNode);
注意 oldNode 必须是 parentEl 真实存在的一个子节点
jQuery 替换节点
$('p').replaceWith('<p>Hello world</p>')
设置 / 获取 / 移除属性
原生 JS 设置 / 获取 / 移除属性
- imgEl.setAttribute("title","logo");
- imgEl.getAttribute("title");
- imgEl.removeAttribute("title");
- checkboxEl.checked = true;
- checkboxEl.checked;
jQuery 设置 / 获取 / 移除属性
- $('#logo').attr({'title':'logo'});
- $('#logo').attr('title');
- $('#logo').removeAttr('title');
- $('#checkbox').prop({'checked':true});
- $('#checkbox').prop('checked');
操作 class
原生 JS 为 DOM 添加 / 删除 / 判断是否有某类
- el.classList.add(className);
- el.classList.remove(className);
- if (el.classList.contains(className));
jQuery 为 DOM 添加 / 删除 / 判断是否有某类
- $(el).addClass(className);
- $(el).removeClass(className);
- if($(el).hasClass(className));
添加 / 获取样式
原生 JS 添加 / 获取样式
- el.style.color = "white"
- el.style.color;
注意 只能获取内联的 style 样式
显示隐藏
- el.style.display = '';
- el.style.display = 'none';
jQuery 添加 / 获取样式
- $el.CSS({'color':'white'});$el.css('color','white');
- $el.css('color');
显示隐藏
- $el.show();
- $el.hide();
来源: http://www.qdfuns.com/article/50494/0c61c10bd721f383c25db1fa1b71a885.html