JavaScript与jQuery常用方法的比较

1.加载DOM区别

JavaScript:

　　window.onload = first;

　　window.onload = second;

只会执行第二个window.onload

jQuery:

　　$(document).ready(function(){

　　　　first();

　　}　

　　$(document).ready(function(){

　　　　first();

　　}

2.获取ID

JavaScript:

　　document.getElementById("idName")

jQuery:

　　$("#idName")

3.获取Class

JavaScript:

　　无明确方法

jQuery:

　　$(".className")

4.获取元素

JavaScript:

　　document.getElementsByTagName("tagName")

jQuery:

　　$("tagName")

5.创建对象并加入文档中

JavaScript:

　　var elem = document.createElement("p")

　　document.body.appendElement(elem)

jQuery:

　　$("div").append("<span>里约奥运</span>")

6.插入元素

JavaScript:

　　var imgs = document.getElementById('imgs');

　　var para = document.getElementById('ps');

　　para.parentNode.insertBefore(imgs,para);

jQuery:

　　$('<b>Hello!</b>').insertBefore('p');

7.复制节点

JavaScript:

　　reference = node.cloneNode(deep)//参数true,false决定是否复制子节点

jQuery:

　　clone(true)//参数true,false决定是否连事件一起复制

8.删除节点

JavaScript:

　　reference = element.removeChild(node);

jQuery:

　　remove();

9.属性操作：设置属性节点、查找属性节点

JavaScript:

　　object.getAttribute(attribute);

　　object.setAttribute(attribute);

jQuery:

　　$("p").attr('title');

　　$("p").attr("title","my title");

10.替换节点

JavaScript:

　　reference = element.replaceChild(newChild,oldChild)

jQuery:

　　$("p").replaceWith('<h2>HI</H2>');

11.CSS-DOM操作

JavaScript:

　　element.style.property

jQuery:

　　$(selector).css

12.表单赋值

JavaScript:

　　abc.value = "text";

jQuery:

　　abc.val("test");

13.改变元素的内容

JavaScript：

　　abc.innerHTML = "test";

jQuery:

　　abc.html("test");

14.获得焦点，都是abc.focus();

15.事件绑定

JavaScript:

　　function test(){

　　　　 //处理…

　　}

　　document.getElementById("but1").onclick=test;

jQuery:

　　$(“button”).click(function(){//处理…});

16.事件绑定与解除事件绑定

Javascript:

　　document.getElementById("but1").attachEvent("onclick",test);

　　document.getElementById("but1").detachEvent("onclick",test);

jQuery:

　　$("button").bind("click",function(){//处理… }); 

　　$("button").unbind("click",function(){//处理… });

　　$("button").unbind("click");

17.判断某个元素是否存在

JavaScript:

　　if(document.getElementByIdx_x('but')){}

jQuery:

　　if($(".classname").length>0){}