要使用jQuery，首先要在HTML代碼最前面加上對(duì)jQuery庫(kù)的引用，比如：
<script language="javascript" src="/js/jquery.min.js"></script>

庫(kù)文件既可以放在本地，也可以直接使用知名公司的CDN，好處是這些大公司的CDN比較流行，用戶訪問你網(wǎng)站之前很可能在訪問別的網(wǎng)站時(shí)已經(jīng)緩存在瀏覽器中了，所以能加快網(wǎng)站的打開速度。另外一個(gè)好處是顯而易見的，節(jié)省了網(wǎng)站的流量帶寬。

jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見操作時(shí)的區(qū)別如下：

1 定位元素
JS
document.getElementById("abc")

jQuery
$("#abc") 通過id定位
$(".abc") 通過class定位
$("div") 通過標(biāo)簽定位

需要注意的是JS返回的結(jié)果是這個(gè)元素，jQuery返回的結(jié)果是一個(gè)JS的對(duì)象。以下例子中假設(shè)已經(jīng)定位了元素abc。

2 改變?cè)氐膬?nèi)容
JS
abc.innerHTML = "test";
jQuery
abc.html("test");

3 顯示隱藏元素
JS
abc.style.display = "none";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle();
//在顯示和隱藏之間切換（2012.4.21更新）

4 獲得焦點(diǎn)
JS和jQuery是一樣的，都是abc.focus();

5 為表單賦值
JS
abc.value = "test";
jQuery
abc.val("test");

6 獲得表單的值
JS
alert(abc.value);
jQuery
alert(abc.val());

7 設(shè)置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 修改元素樣式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");

9 Ajax
JS
自己創(chuàng)建對(duì)象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json，則如下處理
//result = eval('(' + result + ')');
//alert(result);
}

10 判斷復(fù)選框是否選中
jQuery
if(abc.attr("checked") == "checked")

最新評(píng)論