jQuery快速上手:寫jQuery與直接寫JS的區(qū)別詳細(xì)解析
要使用jQuery,首先要在HTML代碼最前面加上對(duì)jQuery庫(kù)的引用,比如:
<script language="javascript" src="/js/jquery.min.js"></script>
庫(kù)文件既可以放在本地,也可以直接使用知名公司的CDN,好處是這些大公司的CDN比較流行,用戶訪問(wèn)你網(wǎng)站之前很可能在訪問(wèn)別的網(wǎng)站時(shí)已經(jīng)緩存在瀏覽器中了,所以能加快網(wǎng)站的打開(kāi)速度。另外一個(gè)好處是顯而易見(jiàn)的,節(jié)省了網(wǎng)站的流量帶寬。
jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見(jiàn)操作時(shí)的區(qū)別如下:
1 定位元素
JS
document.getElementById("abc")
jQuery
$("#abc") 通過(guò)id定位
$(".abc") 通過(guò)class定位
$("div") 通過(guò)標(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ì)象,自己處理瀏覽器兼容等亂七八糟的問(wèn)題,略去不表
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")
相關(guān)文章
Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法,涉及jQuery頁(yè)面元素操作及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開(kāi)折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jquery樹(shù)形菜單效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery樹(shù)形菜單效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
基于jQuery實(shí)現(xiàn)的打字機(jī)效果
本文主要分享了基于jQuery實(shí)現(xiàn)的打字機(jī)效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多選框聯(lián)動(dòng)插件,需要的朋友可以參考下2014-05-05
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個(gè)基于JQuery的插件,可以用來(lái)緩沖加載圖片。下面介紹這個(gè)插件的使用方法2014-02-02
cookie的復(fù)制與使用記住用戶名實(shí)現(xiàn)代碼
正如標(biāo)題所言cookie如何復(fù)制、使用與記住用戶名,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11
jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼,通過(guò)jQuery響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素實(shí)現(xiàn)伸縮菜單的效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09

