jQuery——两分钟看懂jQuery和JavaScript的使用不同

jquery与JavaScript的区别：
jquery是使用JavaScript写成的程序库，因此jquery的功能由JavaScript一定能实现。
jQuery的优势在于：代码简短，非常直观

1.简单的DOM操作
在javascript中使用DOM对象:

document.getElementById("IDName");
document.getElementByTagName("TagName");

在jQuery中，只需要使用DOM元素检索所使用的CSS选择器即可方便的进行
DOM操作。如：

$("#UserName").css("color","red")

这句代码就修改了id是UserName的元素的颜色为红色。用javaScript来实现要多写好几行代码。

2.Ajax的简单使用
什么是Ajax？是通过在JavaScript中使用浏览器中包括的HTTP通信功能来实现
不用跳转界面即可实现页面内局部内容更新的技术。

如使用Ajax加载文本文件并在div中显示：

$("div").load("test.txt");

如何使用js代码创建XHR对象？

function CreateHttpRequest(){
   return window.ActiveXobject?new ActiveXobject("Msxm12.XMLHTTP")
   ||new ActiveXobject("Microsoft.XMLHTTP"):new XMLHttpRequest();
   //为了对IE 浏览器进行支持
}

如何使用XHR对象发起请求?

function sendRequest(id,url){
var obj=CreateHttpRequest();
//调用obj.onreadystatechange
obj.onreadystatechange=function(){

if(obj.readyState==4){
document.getElementById(id).innerHTML=obj.responseText;
              }
       }
 obj.open("GET",url);
 obj.send("");
}

事件处理
使用jQuery不需要考虑浏览器的不同，而且比普通方法更简单的实现时间处理
简单的例子如下：
单击testClick元素时，在其下方的test元素中显示不同的文字

<div id="testClick">单击此处</div>
<div id="test">在此显示新内容</div>

jQuery(function($)){
$("#testClick").click(function(){
$("#test").html("欢迎你！")
});
}

短短的两三行代码就搞定问题，可见jquery是一个十分方便的程序包！

下一篇：jQuery如何获取元素？