Jquery是一個快速、簡潔的JavaScript架構,jQuery設計宗旨是：Write Less,Do More（寫更少的代碼,做更多的事情）。
一、Jquery架構優勢：
1、輕量級
jQuery源代碼壓縮後僅僅有幾十KB，是jQuery的先天優勢，是任何其它架構無法比拟的。在jQuery官網上下載下傳的最新的庫檔案版本是2.1.0，大小為82KB
2、相容主流浏覽器
jQuery能在常用的各種主流浏覽器中正常運作，解決了JavaScript在不同浏覽器上的差異性
3、操作比較友善
jQuery提供了強大的HTML元素選擇功能。Sizzle引擎功能強大，能夠支援CSS1到CSS3的所有選擇器、Xpath選擇器以及Jquery自定義選擇器
4、優雅的文法規則
jQuery中最具特色的莫過于它的鍊式操作方式，即對發生在同一jQuery對象上的一組動作可直接連寫而無需重複擷取對象。這一點使得jQuery代碼無比優雅
5、支援拓展功能
jQuery提供了豐富的插件支援。jQuery的易拓展性可以友善任何使用者拓展jQuery的功能。
6、完善的ajax
jQuery将所有的ajax操作封裝到$.ajax()中，使得使用者在處理ajax操作的時候能夠專心處理業務邏輯而無需關注複雜的浏覽器相容性以及XMLHttpRequest對象建立和使用的問題。
7、無污染
jQuery隻建立了一個名為jQuery的對象，其所有的方法都在這個對象之下。另外一個别名$也是可以随時交出控制權的，不會污染其他對象，也不會與JavaScript對象發生沖突。
8、開源、完善的學習文檔等。
二、一段最簡單的jQuery代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Hello jQuery </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
alert('Hello jQuery')
})
$(function(){
alert('簡寫形式')
})
//-->
</script>
</head>
<body>
</body>
</html>
下面整理一下jQuery我們最常用也是最重要的一個事件$(document).ready(function())：
1、window.onload 和 $(document).ready(function())的差別
A、我們實際最容易發現的就是兩者的可同時存在個數
對于window.onload來說隻能同時存在一個
對于 $(document).ready(function())可以同時存在多個,順序執行
B、是否有簡寫形式
window.onload沒有
$(document).ready(function())有$(function())
C、最重要的一個差別是二者的執行時機
window.onload是頁面中所有元素(包含元素關聯的所有檔案)都加載完畢後才執行。
而通過jQuery的$(function())，在DOM完全就緒時就可以被調用，此時頁面上的所有元素對于jQuery而言都是可以通路的，但是這并不意味這這些元素的關聯檔案都已經加載完畢。
舉個例子來說,有一個大型圖庫網站，加載頁面的時候為所有圖檔添加了某些樣式。當我們使用window.onload的時候，需要等到頁面上所有的圖檔都加載出來之後才執行給圖檔添加樣式的行為。而用$(function())，那麼隻需要DOM就緒就可以執行了，不需要等待所有圖檔加載完畢，顯而易見，$(function())相比于window.onload效果更好，它能提高web頁面的加載速度。
三、jQuery代碼風格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery代碼風格 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0}
div a{background:#888;display:none;float:left;width:300px;}
</style>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //為目前元素增加highlight類
.children("a").show().end() //将子節點a元素顯示出來并重新定位到上次操作的元素
.siblings().removeClass("highlight") //擷取元素的兄弟元素并去掉他們的highlight類
.children("a").hide(); //将兄弟元素下的a元素隐藏
})
})
//-->
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>jQuery學習筆記一</span>
<a>1.1 aaaa</a>
<a>1.2 bbbb</a>
<a>1.3 cccc</a>
<a>1.4 dddd</a>
<a>1.5 eeee</a>
<a>1.6 ffff</a>
<a>1.7 gggg</a>
</div>
<div class="has_children">
<span>jQuery學習筆記二</span>
<a>2.1 aaaa</a>
<a>2.2 bbbb</a>
<a>2.3 cccc</a>
<a>2.4 dddd</a>
<a>2.5 eeee</a>
<a>2.6 ffff</a>
<a>2.7 gggg</a>
</div>
</div>
</body>
</html>
這是利用jQuery實作的一個導航欄，我們來看一下這段代碼：
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children ("a").hide();
})
意思是當滑鼠單擊到class為has_children元素上的時候：
A、為該元素增加樣式highlight
B、将該元素的子節點中的a标簽顯示出來并重新定位到本身
C、找到該元素的兄弟元素并删除它們的highlight樣式并将其子節點中的a标簽隐藏
這裡我們看到了jQuery強大的鍊式操作，一行代碼就實作了導航欄的功能。但是有一點，這段代碼都放在一行的話可讀性會很不好，這裡換一種方式，并且為其加上注釋：
$(".has_children").click(function(){
$(this).addClass("highlight") //為目前元素增加highlight類
.children("a").show().end() //将子節點a元素顯示出來并重新定位到上次操作的元素
.siblings().removeClass("highlight") //擷取元素的兄弟元素并去掉他們的highlight類
.children("a").hide(); //将兄弟元素下的a元素隐藏
})
代碼格式調整後,易讀性好了很多，總結下規範：
A、對于同一個對象不超過三個操作的可以寫在一行
B、對于同一對象有多個操作,建議每一行寫一個操作
C、對于多個對象的少量操作，可以考慮每個對象寫一行，如果涉及到子元素，适當縮進
D、為代碼添加注釋
四、jQuery對象和DOM對象
1、獲得方式
DOM(Document Object Model 文檔對象模型)對象擷取方式是通過JavaScript中的getElementById、getElementByTagName等方法擷取到的。
如下：
var domObj=document.getElementById("id") //擷取DOM對象
var objHtml=domObj.innerHTML //使用JavaScript中的方法----innerHTML
jQuery對象就是通過jQuery包裝DOM對象後産生的對象，jQuery對象是jQuery獨有的，隻要是jQuery對象就可以使用jQuery提供的方法
$("#foo").html() //擷取id為foo的元素内的html代碼 html()是jQuery内的方法。
注意：jQuery對象隻能使用jQuery中提供的方法,不能使用DOM對象的方法,DOM對象隻能使用JavaScript提供的方法，不能使用jQuery提供的方法。
2、jQuery對象與DOM對象的互相轉換
在考慮兩者之間的互相轉換之前先約定好定義變量的風格。如果擷取的對象為jQuery對象那麼就在定義的變量前面加上$。例如
var $variable=jQuery對象;
var variable=DOM對象;
(1)、jQuery對象轉換成DOM對象：
當我們對jQuery封裝的方法不能完全掌握或者jQuery沒有封裝的方法，那麼我們需要将jQuery對象轉換成DOM對象，然後調用JavaScript對象中的方法，jQuery提供了兩種方法将jQuery對象轉換成DOM對象，即index[] ,get(index)
A、jQuery對象是一個數組對象，可以通過[index]将其轉換成DOM對象：
var $cr=$("#id"); //jQuery對象
var cr=$cr[0]; //DOM對象
B、另一種方法是jQuery本身提供的，通過get(index)方法得到DOM對象
var $cr=$("#id"); //jQuery對象
var cr=$cr.get(0); //DOM對象
（2）、DOM對象轉換成jQuery對象
隻需要用$把DOM對象包裝起來就可以了
var cr =document.getElementById('id') //DOM對象
var $cr=$(cr); //jQuery對象
通過以上方法可以任意的轉換jQuery對象和DOM對象
3、執行個體研究
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//jquery判斷
function isChecked(){
var $ch=$("#agree");
if($ch.is(":checked")){
alert("jquery判斷目前處于選中狀态");
}else{
alert("jquery判斷目前處于非選中狀态");
}
}
//dom判斷
function isChecked1(){
var $ch=$("#agree");
var ch=$ch.get(0);
if(ch.checked){
alert("dom判斷目前處于選中狀态");
}else{
alert("dom判斷目前處于非選中狀态");
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" id="agree" name="a">同意
<input type="button" value="jQuery判斷是否選中" οnclick="isChecked()">
<input type="button" value="DOM判斷是否選中" οnclick="isChecked1()">
</body>
</html>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)