0%

JavaScript与jQuery其他操作对比

JavaScript与jQuery其他元素操作对比

JavaScript与jQuery其他操作对比

功能JavaScriptjQuery
创建元素createElement("tag-name")$("<tag-name></tag-name>")
清空节点hxbhxb.innerHTML=""hxb.empty()
删除节点hxbhxb.parentNode.removeChild(hxb)hxb.remove()
获取HTMLinnerHTMLhtml()
获取文本innerTexttext()
获取值valueval()
获取属性getAttribute("attr-name")attr("attr-name")
设置属性setAttribute("attr-name","attr-val")attr("attr-name","attr-val")
删除属性removeAttribute("attr-name")removeAttr("attr-name")
设置cssstyle.cssAttrcss("css-attr","css-val")
添加classclassList.add("class-name")addClass("class-name")
删除classclassList.remove("class-name")removeClass("class-name")

toggleClass(“class-name”,条件);

添加元素操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

bulb