JQuery從頭學(xué)起第一講
更新時(shí)間:2010年07月04日 18:23:02 作者:
JQuery的重要性對(duì)一個(gè)coder來(lái)說(shuō)應(yīng)該是不言而喻的, 多少次在應(yīng)聘的時(shí)候被問(wèn)及是否會(huì)JQuery;多少次在寫腳本的時(shí)候因?yàn)闉g覽器的不兼容而吐血;多少次因?yàn)樾枰媚_本做一個(gè)簡(jiǎn)單的效果而寫到手抽筋。JQuery出現(xiàn)后,很多問(wèn)題都被輕易解決了。
JQuery的重要性對(duì)一個(gè)coder來(lái)說(shuō)應(yīng)該是不言而喻的, 多少次在應(yīng)聘的時(shí)候被問(wèn)及是否會(huì)JQuery;多少次在寫腳本的時(shí)候因?yàn)闉g覽器的不兼容而吐血;多少次因?yàn)樾枰媚_本做一個(gè)簡(jiǎn)單的效果而寫到手抽筋。JQuery出現(xiàn)后,很多問(wèn)題都被輕易解決了。
每學(xué)一樣?xùn)|西的時(shí)候,我們總是喜歡去了解下它的歷史。既然是從頭學(xué)起,我們也來(lái)稍微了解下它的歷史。
jQuery由美國(guó)人John Resig創(chuàng)建,至今已吸引了來(lái)自世界各地的眾多javascript高手加入其team,包括來(lái)自德國(guó)的Jörn Zaefferer, 羅馬尼亞的Stefan Petre等等。
jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是—— WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ,這是其它的js庫(kù)所不及的,它兼容CSS3,還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一個(gè)快速的,簡(jiǎn)潔的javaScript庫(kù),使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果,并且方便地為網(wǎng)站提供AJAX交互。
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是,它的文檔說(shuō)明很全,而且各種應(yīng)用也說(shuō)得很詳細(xì),同時(shí)還有 許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離,也就是說(shuō),不用再在html 里面插入一堆js來(lái)調(diào)用命令了,只需定義id即可。
下面開始我們第一個(gè)DEMO,我們根據(jù)DEMO來(lái)講解,第一講我們只做簡(jiǎn)單的介紹,不做深入的講解分析。如果需要提供源碼的網(wǎng)友可以加入群:34979719
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery_1._Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
alert("hello world");
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world again");
});
</script>
<script type="text/javascript">
function f1() {
alert("hello world again again");}
</script>
</head>
<body onload="f1();">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
從上面的DEMO1中可以看出要用JQuery必須先引用一個(gè)JQuery包,JQuery包的下載地址附上
壓縮版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=<SPAN>Download<%2FSPAN>
未壓縮版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
以上下載的JQuery包版本是1.3.2的,最新的JQuery的包已經(jīng)到1.42了,各位網(wǎng)友如果想嘗鮮可以自己去下載。目前我們講的主要還是1.3.2版本的
引入JQuery包后,我們可以開始寫我們的腳本程序了,從例子的運(yùn)行效果可以看出,頁(yè)面在加載后會(huì)依次彈出:“hello world”、“hello world again”、“hello world again again”,效果相同。第一個(gè)和第三個(gè)是傳統(tǒng)的JS,第二個(gè)是JQuery程序。如果把<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>這行去掉,運(yùn)行后會(huì)提示:$ is not defined。
$號(hào)是 jQuery “類”(jQuery "class")的一個(gè)別稱,因此$()構(gòu)造了一個(gè)新的jQuery 對(duì)象(jQuery object)。$()是選擇器,$(document)構(gòu)造了一個(gè)JQuery的document對(duì)象。函數(shù) ready () 是這個(gè)jQuery對(duì)象的一個(gè)方法,DOM載入后開始執(zhí)行該方法的事件,DEMO中該事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法。JQuery的方法都以一對(duì)小括號(hào)()括起來(lái),括號(hào)后面加分號(hào)。
今天就講這么多,不好的地方希望各位網(wǎng)友可以諒解,也希望各位網(wǎng)友踴躍討論,及時(shí)指正。下一講我們會(huì)講JQuery的選擇器,JQuery是如何來(lái)獲得控件值的。
每學(xué)一樣?xùn)|西的時(shí)候,我們總是喜歡去了解下它的歷史。既然是從頭學(xué)起,我們也來(lái)稍微了解下它的歷史。
jQuery由美國(guó)人John Resig創(chuàng)建,至今已吸引了來(lái)自世界各地的眾多javascript高手加入其team,包括來(lái)自德國(guó)的Jörn Zaefferer, 羅馬尼亞的Stefan Petre等等。
jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是—— WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ,這是其它的js庫(kù)所不及的,它兼容CSS3,還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一個(gè)快速的,簡(jiǎn)潔的javaScript庫(kù),使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果,并且方便地為網(wǎng)站提供AJAX交互。
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是,它的文檔說(shuō)明很全,而且各種應(yīng)用也說(shuō)得很詳細(xì),同時(shí)還有 許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離,也就是說(shuō),不用再在html 里面插入一堆js來(lái)調(diào)用命令了,只需定義id即可。
下面開始我們第一個(gè)DEMO,我們根據(jù)DEMO來(lái)講解,第一講我們只做簡(jiǎn)單的介紹,不做深入的講解分析。如果需要提供源碼的網(wǎng)友可以加入群:34979719
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery_1._Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
alert("hello world");
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world again");
});
</script>
<script type="text/javascript">
function f1() {
alert("hello world again again");}
</script>
</head>
<body onload="f1();">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
從上面的DEMO1中可以看出要用JQuery必須先引用一個(gè)JQuery包,JQuery包的下載地址附上
壓縮版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=<SPAN>Download<%2FSPAN>
未壓縮版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
以上下載的JQuery包版本是1.3.2的,最新的JQuery的包已經(jīng)到1.42了,各位網(wǎng)友如果想嘗鮮可以自己去下載。目前我們講的主要還是1.3.2版本的
引入JQuery包后,我們可以開始寫我們的腳本程序了,從例子的運(yùn)行效果可以看出,頁(yè)面在加載后會(huì)依次彈出:“hello world”、“hello world again”、“hello world again again”,效果相同。第一個(gè)和第三個(gè)是傳統(tǒng)的JS,第二個(gè)是JQuery程序。如果把<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>這行去掉,運(yùn)行后會(huì)提示:$ is not defined。
$號(hào)是 jQuery “類”(jQuery "class")的一個(gè)別稱,因此$()構(gòu)造了一個(gè)新的jQuery 對(duì)象(jQuery object)。$()是選擇器,$(document)構(gòu)造了一個(gè)JQuery的document對(duì)象。函數(shù) ready () 是這個(gè)jQuery對(duì)象的一個(gè)方法,DOM載入后開始執(zhí)行該方法的事件,DEMO中該事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法。JQuery的方法都以一對(duì)小括號(hào)()括起來(lái),括號(hào)后面加分號(hào)。
今天就講這么多,不好的地方希望各位網(wǎng)友可以諒解,也希望各位網(wǎng)友踴躍討論,及時(shí)指正。下一講我們會(huì)講JQuery的選擇器,JQuery是如何來(lái)獲得控件值的。
相關(guān)文章
JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
下拉自動(dòng)加載進(jìn)行分頁(yè)的運(yùn)用越來(lái)越多,比起傳統(tǒng)的分頁(yè)該方法分頁(yè)用戶體驗(yàn)更好,布局也更簡(jiǎn)單了。目前正在使用和學(xué)習(xí)中……2014-06-06jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法,涉及jQuery表單操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08textarea 在瀏覽器中固定大小和禁止拖動(dòng)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇textarea 在瀏覽器中固定大小和禁止拖動(dòng)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
這篇文章主要介紹了jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收的相關(guān)資料,需要的朋友可以參考下2016-12-12jQuery圖片拖動(dòng)組件Dropzone用法示例
這篇文章主要介紹了jQuery圖片拖動(dòng)組件Dropzone用法,結(jié)合實(shí)例形式分析了圖片拖動(dòng)組件Dropzone的功能、安裝及具體使用方法,需要的朋友可以參考下2017-01-01jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果,可實(shí)現(xiàn)圖片組集體轉(zhuǎn)動(dòng)的功能,通過(guò)jQuery結(jié)合時(shí)間函數(shù)定時(shí)操作css3屬性實(shí)現(xiàn)旋轉(zhuǎn)效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01