JQuery 學(xué)習(xí)筆記01 JQuery初接觸
更新時(shí)間:2010年05月06日 22:13:42 作者:
jQuery是一個(gè)Javascript庫(kù),用于簡(jiǎn)化Web相關(guān)的Javascript開發(fā)
一、下載
官方網(wǎng)址是http://jquery.com/
官方下載地址:http://docs.jquery.com/Downloading_jQuery
里邊有當(dāng)前版本和歷史版本的下載,可以下載下來(lái)部署在自己的服務(wù)器上
上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的廣泛使用,選擇CDN地址可以充分利用緩存和這些互聯(lián)網(wǎng)大佬們的帶寬和服務(wù)器資源。
官網(wǎng)上下載有兩種版本Compressed(Minified version)和Uncompressed(Source version)
前者體積小70k左右,還不到未壓縮版本的一半大小。
但是未壓縮版本更容易閱讀源代碼,以及調(diào)試
二、安裝
安裝jQuery非常簡(jiǎn)單 只需在HTML中引用你下載的那個(gè)js文件即可
比如 <script type="text/javascript" src="/jslibs/jquery.min.js"></script>
如果使用CDN 就直接引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
三、第一個(gè)程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { alert("hello"); })
</script>
</head>
<body>
</body>
</html>
刷新頁(yè)面后 就可以執(zhí)行了。
剛開始可能對(duì)$有點(diǎn)不適應(yīng),其實(shí)用不了多久就會(huì)習(xí)慣,并且喜歡它的簡(jiǎn)潔。如果實(shí)在吃不消,“$”也可以用“jQuery”代替
相當(dāng)于
也基本相當(dāng)于
也就是說(shuō)當(dāng)瀏覽器把文檔結(jié)構(gòu)完全解析后,就可以執(zhí)行下面的語(yǔ)句了。
與document.onload的區(qū)別在于,onload不但需要解析完文檔結(jié)構(gòu),還要等待所有需要加載的內(nèi)容加載完畢(比如圖片等)
因?yàn)?(document).ready(fn)的頻繁使用,所以可以簡(jiǎn)化為$(fn)
官方網(wǎng)址是http://jquery.com/
官方下載地址:http://docs.jquery.com/Downloading_jQuery
里邊有當(dāng)前版本和歷史版本的下載,可以下載下來(lái)部署在自己的服務(wù)器上
上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的廣泛使用,選擇CDN地址可以充分利用緩存和這些互聯(lián)網(wǎng)大佬們的帶寬和服務(wù)器資源。
官網(wǎng)上下載有兩種版本Compressed(Minified version)和Uncompressed(Source version)
前者體積小70k左右,還不到未壓縮版本的一半大小。
但是未壓縮版本更容易閱讀源代碼,以及調(diào)試
二、安裝
安裝jQuery非常簡(jiǎn)單 只需在HTML中引用你下載的那個(gè)js文件即可
比如 <script type="text/javascript" src="/jslibs/jquery.min.js"></script>
如果使用CDN 就直接引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
三、第一個(gè)程序
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { alert("hello"); })
</script>
</head>
<body>
</body>
</html>
刷新頁(yè)面后 就可以執(zhí)行了。
剛開始可能對(duì)$有點(diǎn)不適應(yīng),其實(shí)用不了多久就會(huì)習(xí)慣,并且喜歡它的簡(jiǎn)潔。如果實(shí)在吃不消,“$”也可以用“jQuery”代替
復(fù)制代碼 代碼如下:
$(function() { alert("hello"); })
相當(dāng)于
復(fù)制代碼 代碼如下:
$(document).ready(function() { alert("hello"); })
也基本相當(dāng)于
復(fù)制代碼 代碼如下:
document.onready = function() {alert("hello");}
也就是說(shuō)當(dāng)瀏覽器把文檔結(jié)構(gòu)完全解析后,就可以執(zhí)行下面的語(yǔ)句了。
與document.onload的區(qū)別在于,onload不但需要解析完文檔結(jié)構(gòu),還要等待所有需要加載的內(nèi)容加載完畢(比如圖片等)
因?yàn)?(document).ready(fn)的頻繁使用,所以可以簡(jiǎn)化為$(fn)
相關(guān)文章
jQuery的each循環(huán)用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery的each循環(huán)用法,以簡(jiǎn)單實(shí)例形式分析了jQuery中each循環(huán)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
基于jQuery的input輸入框下拉提示層,方便用戶輸入郵箱時(shí)的提示信息,需要的朋友可以參考下2012-06-06
jQuery-ui中自動(dòng)完成實(shí)現(xiàn)方法
關(guān)于jQuery-ui-1.8中的自動(dòng)完成控件,其匹配方式是使用正則表達(dá)式進(jìn)行匹配的。2010-06-06
基于Jquery實(shí)現(xiàn)表單驗(yàn)證
本文給大家分享的是一段基于Jquery實(shí)現(xiàn)表單驗(yàn)證的代碼,非常簡(jiǎn)單實(shí)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08
jQuery.position()方法獲取不到值的安全替換方法
這篇文章主要介紹了jQuery.position()方法獲取不到值的安全替換方法,本文給出了一種變通的方法,用.offset()來(lái)?yè)Q算,需要的朋友可以參考下2015-03-03
JQuery中form驗(yàn)證出錯(cuò)信息的查看方法
JQuery中form驗(yàn)證出錯(cuò),可以采用以下方式來(lái)查看具體input的出錯(cuò)信息,下面有個(gè)不錯(cuò)的示例,有類似情況的朋友可以參考下2013-10-10
jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過(guò)使用滑動(dòng)效果(高度變化)來(lái)切換元素的可見狀態(tài)。2011-06-06
jQuery 可以拖動(dòng)的div實(shí)現(xiàn)代碼 腳本之家修正版
最近研究了一下jQuery,覺得真的是一個(gè)很不錯(cuò)的js庫(kù),其他的不說(shuō),關(guān)鍵是有翔實(shí)的文檔,這點(diǎn)是非常關(guān)鍵的。2009-06-06

