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

未完待續。。。。