1.jQuery的簡介 : )
jQuery是什麼?
一個優秀的JS庫，大型開發必備。官方的宣傳爲Write less,do more(寫的更少，做的更多)。
jQuery的三大好處:
1. 簡化Javascript的複雜操作
2. 不需要再關心瀏覽器兼容性
3. 提供了大量實用簡便的方法
現在的jQuery有1.x和2.x兩大版本，最主要的區別在於2.x版本不再提供對IE6,7,8的兼容，1.x則還是會對原來的老版本瀏覽器進行兼容。如果我們的項目主要運用於移動端的話，則可以選擇使用2.x版本，2.x版本的jQuery代碼也更爲簡潔，如果需要考慮兼容IE6等老版本的瀏覽器，則還是選擇1.x的jQuery。
如何學習jQuery?
總的來說，jQuery只是一個輔助工具，就像做飯一樣，就算給你準備好了成百上千的材料，你也不一定能做出一道很美味的晚餐。真正能實現我們想要的效果的東西，其實是我們自己的一個操作過程，也就是我們的邏輯思維和我們掌握的細節知識，所以最後還是得通過我們自身的能力來操作，工具始終只能是工具而已。另外，jQuery很龐大，想要獲得提高，必須分階段的來學習，不可能一口氣就掌握。
2.選擇元素:
全球100萬個網站當中有50%的網站都在使用着jQuery，這歸結於jQuery在選擇網頁元素的操作上爲開發者們提供了很大的方便，除此之外，jQuery的寫法也極爲簡潔，如鏈式操作，取值與賦值合體，方法函數化等。但是，jQuery始終只是Javascript下的一個子集，它們可以出現在同一個項目中，但是不能混用，這就像男廁和女廁，雖然可以放在一起來使用，但終究男性只能使用男廁，女性只能使用女廁一個道理。下面就通過一些具體的例子來看看jQuery的一些基本操作,這裏我們選擇使用的jQuery爲1.10.1。
Case01 jQuery中ID選擇器，類選擇器，標籤選擇器的使用:
<div id="d1" class="box">
div
</div>
<script>
//模擬CSS選擇元素
$('#d1').css('background','red');
//根據標籤選擇
$('div').css('background','blue');
//根據類選擇
$('.box').css('background','yellow');
</script>
如果我們此時再向頁面中添加一個類名爲box的span標籤:
<div id="d1" class="box">
div
</div>
<span class="box">span</span>
這時再使用jQuery類選擇器代碼:
$(‘.box’).css(‘background’,’yellow’);進行背景色變化時，會發現span標籤的背景色也會和div標籤的背景色一樣變爲黃色。雖然這只是一個顯而易見，可想而知的改變，但這就是jQuery與原生的Javascript的一個基本區別——省略了循環。在原生Javascript中，要想讓選擇到的一組元素都去進行操作，必須要加入一個循環，而在jQuery中，選擇到了一組元素，我們可以直接對這一組元素進行後續操作，而不用進行繁瑣的循環。
Case02 jQuery中獨有表達式的選擇操作:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//讓所有li標籤的背景色變紅
$('li').css('background','red');
//讓第一個li標籤的背景色變紅
$('li:first').css('background','red');
//讓最後一個li標籤的背景色變紅
$('li:last').css('background','red');
//讓中間的某個li標籤的背景色變紅,eq()當中的數字爲li標籤的索引值，和數組一樣，也是從0開始
$('li:eq(2)').css('background','red');
//讓li標籤進行隔行換色(奇數行用even表示)
$('li:even').css('background','red');
//讓li標籤進行隔行換色(偶數行用odd表示)
$('li:odd').css('background','red');
</script>
除了這些選擇方式外，jQuery還有很多其他獨有的選擇方式，比如爲上述的li標籤中的某兩個添加一個box的類,這時我們可以通過$(‘li.box’)或者$(‘li’).filter(‘.box’)來選擇我們想要的元素:
<ul>
<li></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
</ul>
<script>
$('li.box').css('background','red');
$('li').filter('.box').css('background','red');
</script>
這時，我們再爲上述的li標籤中的某兩個li標籤加上一個title屬性,這時我們又可以通過以下的方式來選擇到對應的元素:
<ul>
<li></li>
<li title="jquery"></li>
<li class="box"></li>
<li class="box"></li>
<li title="jquery"></li>
</ul>
<script>
$('li').filter('[title=jquery]').css('background','red');
</script>
3.jQuery的寫法:
jQuery與Javascript的寫法，我們只需要注意一點，jQuery中的所有操作都已經函數化了。
舉個例子，在原生的Javascript中我們想讓頁面在加載完畢後做一些事情，使用的是:
window.onload = function(){ //你想要做的事情 };
如果用jQuery來寫，就是這樣的:
$() //很簡單吧,這相當於定義了一個名爲$的函數
$(function(){ //你想要做的事情 });
再比如,Javascript中的innerHTML，到jQuery中變成了html(),Javascript中的onclick=function(){}，到jQuery中變成了click(function(){});。所以，原生的Javascript都可以轉化爲jQuery的寫法，這就是典型的jQuery式的方法函數化。接下來我們可以寫一個小效果:
先定義一個id爲d1的div標籤，裏面的內容爲”Hello,jQuery”,在點擊這個盒子時我們需要彈出這一段內容。
我們先用Javascript的寫法來看一下:
<div
id="d1">
Hello,jQuery!
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('d1');
oDiv.onclick=function(){
alert(this.innerHTML);
};
};
</script>
我們現在再用jQuery來寫一下看看:
<div id="d1">
Hello,jQuery!
</div>
<script>
$(function(){
$('#d1').click(function(){
alert($(this).html());
});
});
</script>
我們可以發現一些小問題，jQuery當中基本可以把“=”忽略掉，操作都是通過傳參來完成。調用jQuery的時候一定要帶上括號，因爲方法函數化是jQuery的基本寫法。另外再來說下什麼是鏈式操作吧，這很簡單，但卻也是jQuery那麼受歡迎的一個重要原因。下面是一個鏈式操作的例子:
<div id="d1">
Hello,jQuery!
</div>
<script>
$(function(){
var oDiv= $('#d1');
oDiv.html('hello');
oDiv.css('background','red');
oDiv.click(function(){
alert(123);
});
});
</script>
上面的操作，我們可以寫成:
$('#d1').html('hello').css('background','red').click(function(){
alert(123);
});
但是，如果我們對鏈式操作不是很熟練的話，我們還是分開來寫，這樣代碼也易於閱讀和修改。
在jQuery中，還有一個很重要的東西，那就是取值與賦值的合體這樣一個思想。
在原生的Javascript中，爲元素賦值取值是這樣來做的:
window.onload = function(){
oDiv.innerHTML = ‘jQuery’;//賦值
alert(oDiv.innerHTML); //取值
};
在jQuery中,是這樣來做:
$(function(){
$(‘#d1’).html(‘jQuery’);//賦值
alert($(‘#d1’).html());//取值
});
可以看出，jQuery中的html()方法同時承擔了取值和賦值，這就是取值和賦值合體的特徵表現。講到這裏，有一個很重要的細節不得不說，那就是在針對一組，而不是一個元素進行賦值取值時，jQuery又是怎麼來做的呢，下面我們還是通過一個例子來說明一下:
我們定義了一組li元素，現在要做的就是使用jQuery選擇li元素，然後來彈出li下面的內容：
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<script>
$(function(){
alert($('li').html());
});
</script>
彈出的結果可以看出，jQuery只是取到了這組li元素中的第一個li標籤中的內容，不會取出所有li元素中的內容。如果想要取出所有li元素中的內容，我們必須通過循環才能做到。
由此可以得出一個類似於結論的東西:
當選取到的是一組元素時，對其進行取值時，取到的只是這組元素中的第一個元素的值。相反，如果進行的是賦值操作，則會對取到的所有元素都進行賦值而不用通過循環。下面的操作可以證明這一點：
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<script>
$(function(){
alert($('li').html(‘jQuery’));
});
</script>
上面的這個賦值與取值的細節是很正確的，很符合生活中的思路。取值只取相同的一組元素中的一個，而賦值則爲這一組元素都賦值。