JavaScript与jQuery其他元素操作对比
JavaScript与jQuery其他操作对比
功能 | JavaScript | jQuery |
|---|---|---|
创建元素 | createElement("tag-name") | $("<tag-name></tag-name>") |
清空节点hxb | hxb.innerHTML="" | hxb.empty() |
删除节点hxb | hxb.parentNode.removeChild(hxb) | hxb.remove() |
获取HTML | innerHTML | html() |
获取文本 | innerText | text() |
获取值 | value | val() |
获取属性 | getAttribute("attr-name") | attr("attr-name") |
设置属性 | setAttribute("attr-name","attr-val") | attr("attr-name","attr-val") |
删除属性 | removeAttribute("attr-name") | removeAttr("attr-name") |
设置css | style.cssAttr | css("css-attr","css-val") |
添加class | classList.add("class-name") | addClass("class-name") |
删除class | classList.remove("class-name") | removeClass("class-name") |
代码语言：javascript复制toggleClass(“class-name”,条件);
添加元素操作
JavaScript
hxb.insertBefore(Element,hxb.firstElementChild); //在hxb中插入子节点/文本到最开始
hxb.appendChild(Element); //在hxb中插入子节点/文本到最后
hxb.removeChild(Element); //删除hxb中的子节点/文本
hxb.insertBefore(newElement,targetElement); //在hxb中插入newElement到子节点targetElement之前。
hxb.insertAfter(newElement,targetElement); //在hxb中插入newElement到子节点targetElement之后。因为js中没有insertAfter()方法，所以自己写一个。
/* insertAfter()方法 */
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastElementChild === targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextElementSibling);
}
}
jQuery
$('#id').append($('.appendDom')); //在#id的最后添加.appendDom元素节点
$('#id').prevpend($('appendDom')); //在#id的最开始添加.appendDom元素节点
$('#id').after($('appendDom')); //在#id节点之前添加.appendDom元素节点
$('#id').before($('appendDom')); //在#id节点之后添加.appendDom元素节点
$('.appendDom').appendTo('#id'); //把.appendDom元素节点插入到#id节点的最后(内部)（和append效果相同）
$('.appendDom').prevpendTo('#id'); //把.appendDom元素节点插入到#id节点的最开始(内部)（和prevpend效果相同）
$('.appendDom').insertAfter('#id'); //把.appendDom元素节点插入到#id节点之后(同级)（和after效果相同）
$('.appendDom').insertBefore('#id'); //把.appendDom元素节点插入到#id节点之前(同级)（和before效果相同）
