js中元素操作的有关内容与对比

以下 A：代表原生js B:代表jQuery

1 创建元素／节点

A:

元素节点- createElement( )   
文本节点 - createTextNode()
例如：

    var a = document.createElement("a");
    a.href = http://baidu.com;
    a.innerHTML = "go to baidu";

B:

$(HTML代码)
例如：

$li = $("<a href="http://baidu.com">go to baidu</a>);

2 追加新元素节点

A:

parentelement.appendChild(elem)；
例如：

    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落。");
    para.appendChild(node);

B:

append(content)
appendTo()

3 删除节点

A:

parentelement.removeChild(子节点)

B:

remove()【删除自身以及后代节点】 
eg:$(“#bj”).remove();
empty()【删除后代节点，保留自身节点】

4 获取属性

A:

element.getAttribute() 方法返回指定属性名的属性值。
例如：

document.getElementsByTagName("a")[0].getAttribute("target");

B:

attr( “属性名”)

5 设置属性

A:

setAttribute(“属性名”,”属性值”)   

B:

attr(“属性名”,”属性值”)  

6 删除属性

A:

removeAttribute(“属性名”)  

B:

removeAttr(“属性名”) 

7 获取/设置元素内容

A:

innerHTML、textContent、innerText 
例如：

document.getElementsByTagName("BUTTON")[0].textContent; //获得第一个 button 元素的文本内容：

B:

html()、text()   

8 获取/设置元素样式

A:

获取：
elem.style.属性名

设置：
elem.style.属性名=”值 ”;
【仅针对内联样式】

B:

获取: css(attrName)
设置：（一个或多个）
css(attrName,attrValue)
css({
  attrName : attrValue，
  attrName : attrValue
})" 

9 返回元素父节点

A:

父节点 - parentNode  
子节点
    所有子节点 - childNodes
    第一个子节点 - firstChild
    最后一个子节点 - lastChild 
兄弟节点
    上一个兄弟节点 － previousSibling
    下一个兄弟节点 - nextSibling 

B:

父元素 - parent()
祖先元素 - parents() 
子元素 - children()
兄弟元素
    上一个兄弟元素 - prev()
    下一个兄弟元素 - next()
    所有兄弟元素 - siblings()

未完待续。。。。