jQuery學(xué)習(xí)筆記之Helloworld
更新時(shí)間：2010年12月22日 14:09:52 作者：
剛學(xué)習(xí)jQuery，覺得有的東西確實(shí)有必要寫下來，加深下記憶，本文純屬給自己寫的，希望大家不要見笑。
jQuery是什么？
jQuery由美國(guó)人John Resig創(chuàng)建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國(guó)的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它是輕量級(jí)的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery是一個(gè)快速的，簡(jiǎn)潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。
jQuery的構(gòu)成？
通過 jQuery，您可以選?。ú樵儯琿uery） HTML 元素，并對(duì)它們執(zhí)行“操作”（actions）。如圖：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
1.其中 ：<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
本句是引入jQuery庫文件，本文件可以到http://jQuery.com網(wǎng)站下載
2.代碼：
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
alert("Hello World!");
});
</script>
$(document).ready(function(){})相當(dāng)于JS中的windows.onload方法，再文檔加載完畢時(shí)執(zhí)行，
在jQuery中"$()"符號(hào)就相當(dāng)于"jQuery()"
$(document).ready(function(){})可以簡(jiǎn)寫為$(function(){})
jQuery由美國(guó)人John Resig創(chuàng)建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國(guó)的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它是輕量級(jí)的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery是一個(gè)快速的，簡(jiǎn)潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。
jQuery的構(gòu)成？
通過 jQuery，您可以選?。ú樵儯琿uery） HTML 元素，并對(duì)它們執(zhí)行“操作”（actions）。如圖：
helloworld!
簡(jiǎn)單熟悉了jQuery的構(gòu)成，我先寫一個(gè)helloworld！
復(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
1.其中 ：<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
本句是引入jQuery庫文件，本文件可以到http://jQuery.com網(wǎng)站下載
2.代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
alert("Hello World!");
});
</script>
$(document).ready(function(){})相當(dāng)于JS中的windows.onload方法，再文檔加載完畢時(shí)執(zhí)行，
在jQuery中"$()"符號(hào)就相當(dāng)于"jQuery()"
$(document).ready(function(){})可以簡(jiǎn)寫為$(function(){})
相關(guān)文章
這篇文章主要介紹了jquery預(yù)加載圖片的方法,涉及jQuery操作圖片的相關(guān)技巧,需要的朋友可以參考下2015-05-05
客戶端的抖動(dòng),快速操作,網(wǎng)絡(luò)通信或者服務(wù)器響應(yīng)慢,都容易造成服務(wù)器重復(fù)處理,這篇文章主要給大家介紹了關(guān)于jquery項(xiàng)目中如何防重復(fù)提交的相關(guān)資料,需要的朋友可以參考下2021-11-11
jQuery實(shí)現(xiàn)給input綁定回車事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給input綁定回車事件的方法,結(jié)合實(shí)例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下2017-02-02
基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果
本文主要分享了基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果的示例代碼，附源碼下載。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
利用jQuery.Validate異步驗(yàn)證用戶名是否存在（推薦）
這篇文章主要介紹了利用jQuery.Validate異步驗(yàn)證用戶名是否存在的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了JQuery ztree帶篩選、異步加載實(shí)例，zTree支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)，并支持極其靈活的checkbox或radio選擇功能，本文為大家進(jìn)行具體介紹2016-02-02
在WinForm程序開發(fā)中，經(jīng)常用MessageBox彈出某些提示，功能雖簡(jiǎn)單但卻非常的實(shí)用！而在Web頁面中，瀏覽器也提供了Alert或Confirm等腳本語句用于彈出提示窗口2009-12-12
相信大家都見過或使用過放大鏡效果，甚至實(shí)現(xiàn)過該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。那么接下來，我們將向大家介紹通過jQuery實(shí)現(xiàn)放大鏡效果。2014-09-09
基于HTML+CSS，jQuery編寫的簡(jiǎn)易計(jì)算器后續(xù)（添加了鍵盤監(jiān)聽）
這篇文章主要介紹了使用HTML+CSS，jQuery編寫的簡(jiǎn)易計(jì)算器后續(xù)（添加了鍵盤監(jiān)聽） 的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02