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代碼風格
<span style="color:#000000;"><!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>
</span>這是利用jQuery實現的一個導航欄，我們來看一下這段代碼：
<span style="color:#333333;">$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children ("a").hide();
})</span>意思是當鼠標單擊到class爲has_children元素上的時候：
A、爲該元素增加樣式highlight
B、將該元素的子節點中的a標籤顯示出來並重新定位到本身
C、找到該元素的兄弟元素並刪除它們的highlight樣式並將其子節點中的a標籤隱藏
這裏我們看到了jQuery強大的鏈式操作，一行代碼就實現了導航欄的功能。但是有一點，這段代碼都放在一行的話可讀性會很不好，這裏換一種方式，並且爲其加上註釋：
<span style="color:#333333;">$(".has_children").click(function(){
$(this).addClass("highlight") //爲當前元素增加highlight類
<span style="white-space:pre"> </span>.children("a").show().end() //將子節點a元素顯示出來並重新定位到上次操作的元素
.siblings().removeClass("highlight") //獲取元素的兄弟元素並去掉他們的highlight類
<span style="white-space:pre"> </span>.children("a").hide(); //將兄弟元素下的a元素隱藏
})</span>代碼格式調整後,易讀性好了很多，總結下規範：
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(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對象<!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判斷是否選中" onclick="isChecked()">
<input type="button" value="DOM判斷是否選中" onclick="isChecked1()">
</body>
</html>