JavaScript与jQuery其他操作对比

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")

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效果相同）