jquery和javascript常用方法比较

jquery 就是对JavaScript的一个扩展，封装，就是让javascript更好用，更简单。
人家怎么说的来着，jquery就是要用更少的代码，漂亮的完成更多的功能。
JavaScript 与JQuery 常用方法比较

1、加载DOM区别

JavaScript，使用window.onload：

function first(){
    alert(1);
}
function second(){
    alert(2);
}
window.onload=first;
window.onload=second;//只会执行第二个onload；不过可以通过以下方法来进行改进：
window.onload=function(){
    first();
    second();
}

JQuery，使用$(document).ready()：

$(document).ready(){
    function first(){
        alert("first");
    }
    function second(){
        alert("second");
    }
}
$(document).ready(function(){
    first();
});
$(document).ready(function(){
    second();
});
//两条均会执行

2、获取ID

JavaScript：

document.getEElementById('idName');

JQuery：

$('#idName');

3、获取Class

JavaScript：

Javascript没有默认的获取class的方法

JQuery：

$('.className');

4、获取TagName

JavaScript：

document.getElementsByTagName('tagName') 

JQuery：

$('tagName') 

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

JavaScript：

var para = document.createElement('p'); 
//创建一个p元素 
document.body.appendElement(para); 
//将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法 

JQuery：
JQuery提供了4种将新元素插入到已有元素（内部）之前或者之后的方法：append()、appendTo()、prepend()、prependTo()。
格式：$( html );

<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'); 
//输出：同上 

6、插入新元素

JavaScript：insertBefore()语法
eg：将一个img元素插入一个段落之前。
html代码：

<img src="image.jpg" id="imgs" /> 
<p>这是一段文字</p> 

JavaScript代码：

var imgs = document.getElementById('imgs'); 
var para = document.getElementsByTag('p'); 
para.parenetNode.insertBefore(imgs,para); 

JQuery：
JQuery提供了4种将新元素插入到已有元素（外部）之前或者之后的方法：after()、insertAfter()、before()、insertBefore()。 格式：$(html)
html代码：

<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'); //输出：同上 

7、复制节点

JavaScript：
这个方法只有一个布尔型的参数，它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。

reference = node.cloneNode(deep) 

JQuery：

clone() //复制节点后，被复制的新元素并不具有任何行为 
clone(true) //复制节点内容及其绑定的事件 

备注：该方法通常与appendTo()、prependTo()等方法结合使用。

8、删除节点

JavaScript：removeChild()方法将一个给定元素里删除一个子节点

reference = element.removeChild(node) 

JQuery：remove(); 和empty();
remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。
eg：将 ul li下的title不是“Hello”的li移除：

$('ul li').remove(li[title!='Hello']); 

empty()方法作用是清空节点。

9、包裹节点

JavaScript：
无
JQuery：

wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 
wrapAll() //将所有匹配的元素用一个元素包裹起来 
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来 

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

JavaScript：document.getElementsByTagName(‘tagName’)

JQuery：JQuery中设置和查找属性节点都是：attr() 。

$('p').attr('title'); //获取p元素的title属性； 
$('p').attr('title','My title'); //设置p元素的title属性 
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时，可以用"名：值"对的形式，中间用逗号隔开。 

11、替换节点

JavaScript：

reference = element.replaceChild(newChild,oldChild) 

该方法是将一个给定父元素里的一个子节点替换为另外一个节点。

JQuery：

12、CSS-DOM操作

JavaScript：
格式：element.style.property
CSS-DOM能够读取和设置style对象的属性，其不足之处是无法通过它来提取外部CSS设置的样式信息，而JQuery的.css()方法是可以的。
注意点：CSS中的如”font-size”这样有”-“的，要使用首字母小写的驼峰式表示，如fontSize。

JQuery：
格式：$(selector).css()
css()方法获取元素的样式属性
此外，JQuery还提供了height()和width()分别用来获取元素的高度和宽度（均不带单位），而css(height)、css(width)返回高宽，且带单位。

---

---

其他网友补充，比较常用的一些方法：

1、定位元素

JavaScript：document.getElementById(“abc”)

JQuery：

$(“#abc”) 通过id定位$(“.abc”) 通过class定位
$(“div”) 通过标签定位
需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。

以下例子中假设已经定位了元素abc。即：var abc=$(“#abc”)

2、改变元素的内容

JavaScript：

abc.innerHTML = "test"; 

JQuery：

abc.html("test");

3、显示隐藏元素

JavaScript：

abc.style.display = "none"; 
abc.style.display = "block";

JQuery：

abc.hide(); 
abc.show();
abc.toggle(); //在显示和隐藏之间切换（2012.4.21更新）

5、获得焦点

JavaScript和JQuery是一样的，都是：

abc.focus();

5、为表单赋值

JavaScript：

abc.value = "test"; 

JQuery：

abc.val("test");

6、获得表单的值

JavaScript：

abc.value;

JQuery：

abc.val();

7、设置元素不可用

JavaScript：

abc.disabled = true; 

JQuery：

abc.attr("disabled", true);

8、修改元素样式

JavaScript：

abc.style.fontSize=size;
abc.className="test";

JQuery：

abc.css('font-size', 20);

abc.removeClass(); 
abc.addClass("test");

9、ajax

JavaScript：
不表述

JQuery：

//get方法
$.get("getdata.php?a=1",recall);
//post方法
var postParam="a=1&b=2"
$.post("getdata.php",postParam,recall);

function recall(result){
    alert(result);
    //如果返回的是json数据，则做以下处理
    result=eval('('+result+')');
    alert(result);
}

//ajax请求
$.ajax({
    url:'getdata.php',//发送请求的地址
    type:'post',//请求方式（post或get）默认为get。
    async:'false',//异步请求，默认设置为true
    data:{id:'123',name:'data'},//请求参数，要求为Object或String类型的参数，get请求中将附加在url后。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}
    dataType:'json',//服务器返回的数据类型,可以是xml，html，json，text，jsonp等格式数据
    success:function(result, textStatus){
        //data可能是xmlDoc、jsonObj、html、text等等
        //调用本次ajax请求时传递的options参数
        //如果只写一个参数，就是返回的数据
    }
});

10、判断复选框是否选中

JavaScript：
无

JQuery：

if(abc.attr("checked") == "checked")
//注意：网上说的.attr("checked") == true实际上不能用，上面这个测试过能用