jquery和javascript的區別(常用方法比較)

　　jquery 就對javascript的一個擴展封裝就是讓javascript更好用更簡單人家怎麼說的來著jquery就是要用更少的代碼漂亮的完成更多的功能JavaScript 與JQuery 常用方法比較

加載DOM區別

JavaScript
windowonload

function first(){
alert(first);
}
function second(){
alert(second);
}
windowonload = first;
windowonload = second;
//只會執行第二個windowonload不過可以通過以下方法來進行改進
windowonload = function(){
first();
second();
}

Jquery
$(document)ready()

$(document)ready(){
function first(){
alert(first);
}
function second(){
alert(second);
}
$(document)ready(function(){
first();
}
$(document)ready(function(){
second();
}
//兩條均會執行
}

獲取ID

JavaScript
documentgetElementById(idName)

JQuery
$(#idName)

獲取Class

JavaScript
JavaScript沒有默認的獲取class的方法

JQuery
$(className)

獲取TagName

JavaScript
documentgetElementsByTagName(tagName)

JQuery
$(tagName)

創建對象並加入文檔中

JavaScript 
var para = documentcreateElement(p);
//創建一個p元素
documentbodyappendElement(para);
//將p元素追加為body的lastchild子節點如果想將新創建的p元素插入到已存在的某個元素之前可以使用insertBefore()方法

JQuery
JQuery提供了種將新元素插入到已有元素（內部）之前或者之後的方法append()appendTo()prepend()prependTo()
格式$( html );
eghtml代碼
<p>World!</p>
$(p)append(<b>Hello!</b>);
//輸出<p>World!<b>Hello!</b></p>
$(<b>Hello!</b>)appendTo(p); //輸出同上
$(p)prepend(<b>Hello!</b>);
//輸出<p><b>Hello!</b>World! </p>
$(<b>Hello!</b>)prependTo(p);
//輸出同上

插入新元素

JavaScript
insertBefore() 語法格式
parentElementinsertBefore(newElementtargetElement)
eg 將一個img元素插入一個段落之前

html代碼
<img src="imagejpg" id="imgs" />
<p>這是一段文字</p>

JavaScript代碼
var imgs = documentgetElementById(imgs);
var para = documentgetElementsByTag(p);
paraparenetNodeinsertBefore(imgspara);

JQuery
JQuery提供了種將新元素插入到已有元素（外部）之前或者之後的方法after()insertAfter()before()insertBefore()
格式$( html );
eghtml代碼
<p>World!</p>

JQuery代碼
$(p)after(<b>Hello!</b>);
//輸出<p>World! </p><b>Hello!</b>
$(<b>Hello!</b>) insertAfter (p);
//輸出同上
$(p)before(<b>Hello!</b>);
//輸出<b>Hello!</b><p>World! </p>
$(<b>Hello!</b>)insertBefore(p);
//輸出同上

復制節點

JavaScript
reference = nodecloneNode(deep)
這個方法只有一個布爾型的參數它的可取值只能是true或者false該參數決定是否把被復制節點的子節點也一同復制到新建節點裡去

JQuery
clone() //復制節點後被復制的新元素並不具有任何行為
clone(true) //復制節點內容及其綁定的事件
備注該方法通常與appendTo()prependTo()等方法結合使用

刪除節點

JavaScript
reference = elementremoveChild(node)
removeChild()方法將一個給定元素裡刪除一個子節點

JQuery
remove();
remove()方法作用就是從DOM中刪除所有匹配的元素remove()方法還可以與其他的過濾選擇器結合使用非常方便
eg將ul li下的title不是"Hello"的li移除
$(ul li)remove(li[title!=Hello]);
empty();
empty()方法作用是清空節點

包裹節點

JavaScript
JavaScript暫無

JQuery
wrap() //將匹配元素用其他元素的結構化標記單獨包裹起來
wrapAll() //將所有匹配的元素用一個元素包裹起來
wrapInner() //將匹配元素的子內容用其他結構化的標記包裹起來

屬性操作設置屬性節點查找屬性節點

JavaScript
documentgetElementsByTagName(tagName)

JQuery
JQuery中設置和查找屬性節點都是attr()
$(p)attr(title); //獲取p元素的title屬性
$(p)attr(titleMy title); //設置p元素的title屬性
$(p)attr(title:My titleclass:myClass); //當需要添加多個屬性時可以用"名值"對的形式中間用逗號隔開

替換節點

JavaScript
reference = elementreplaceChild(newChildoldChild)
該方法是將一個給定父元素裡的一個子節點替換為另外一個節點

JQuery
replaceWith()replaceAll()
eg:
<p>hello</p>
想替換為
<h>Hi</h>

JQuery代碼
$(p) replaceWith(<h>Hi</h>);
或者可以寫成
$(<h>Hi</h>)replaceAll(p);

CSSDOM操作

JavaScript
格式elementstyleproperty
CSSDOM能夠讀取和設置style對象的屬性其不足之處是無法通過它來提取外部CSS設置的樣式信息而JQuery的css()方法是可以的
注意點CSS中的如"fontsize"這樣有""的要使用首字母小寫的駝峰式表示如fontSize

JQuery
格式$(selector)css()
css()方法獲取元素的樣式屬性
此外JQuery還提供了height()和width()分別用來獲取元素的高度和寬度（均不帶單位）而css(height)css(width)返回高寬且帶單位

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20445.html