1. jQuery介紹

jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì)，全世界排名前100萬(wàn)的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過(guò)其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。

jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。

jquery是一個(gè)函數(shù)庫(kù)，一個(gè)js文件，頁(yè)面用script標(biāo)簽引入這個(gè)js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

1、http://jquery.com/ 官方網(wǎng)站
2、https://code.jquery.com/ 版本下載

2. jQuery使用

• 書(shū)寫(xiě)格式

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

簡(jiǎn)寫(xiě):

<script type="text/javascript">

$(function(){

     ......

});

</script>

3. jQuery選擇器

• jquery選擇器
  jquery選擇器可以快速地選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是否選擇成功。

$('#myId') //選擇id為myId的網(wǎng)頁(yè)元素
$('.myClass') // 選擇class為myClass的元素
$('li') //選擇所有的li元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
$('input[name=first]') // 選擇name屬性等于first的input元素

• 對(duì)選擇集進(jìn)行過(guò)濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').eq(5); //選擇第6個(gè)div元素

• 選擇集轉(zhuǎn)移

$('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素
$('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素
$('#box').next(); //選擇id是box的元素后面緊挨的同輩元素
$('#box').nextAll(); //選擇id是box的元素后面所有的同輩元素
$('#box').parent(); //選擇id是box的元素的父元素
$('#box').children(); //選擇id是box的元素的所有子元素
$('#box').siblings(); //選擇id是box的元素的同級(jí)元素
$('#box').find('.myClass'); //選擇id是box的元素內(nèi)的class等于myClass的元素

• 判斷是否選擇到了元素
  jquery有容錯(cuò)機(jī)制，即使沒(méi)有找到元素，也不會(huì)出錯(cuò)，可以用length屬性來(lái)判斷是否找到了元素,length等于0，就是沒(méi)選擇到元素，length大于0，就是選擇到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個(gè)div</div>

4. jquery樣式操作

• 操作行間樣式

// 獲取div的樣式

$("div").css("width");
$("div").css("color");

//設(shè)置div的樣式

$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特別注意:
選擇器獲取的多個(gè)元素，獲取信息獲取的是第一個(gè)，比如：$("div").css("width")，獲取的是第一個(gè)div的width。

• 操作樣式類(lèi)名

$("#div1").addClass("divClass2") //為id為div1的對(duì)象追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的對(duì)象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個(gè)樣式
$("#div1").toggleClass("anotherClass") //重復(fù)切換anotherClass樣式

5. 綁定click事件

• 給元素綁定click事件，可以用如下方法：

$('#btn1').click(function(){
    // 內(nèi)部的this指的是原生對(duì)象

    // 使用jquery對(duì)象用 $(this)

})

• 獲取元素的索引值
  有時(shí)候需要獲得匹配元素相對(duì)于其同胞元素的索引位置，此時(shí)可以用index()方法獲取

var $li = $('.list li').eq(1);
alert($li.index()); // 彈出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

6. jquery動(dòng)畫(huà)

通過(guò)animate方法可以設(shè)置元素某屬性值上的動(dòng)畫(huà)，可以設(shè)置一個(gè)或多個(gè)屬性值，動(dòng)畫(huà)執(zhí)行完成后會(huì)執(zhí)行一個(gè)函數(shù)。

    animate參數(shù)：
    參數(shù)一：要改變的樣式屬性值，寫(xiě)成字典的形式
    參數(shù)二：動(dòng)畫(huà)持續(xù)的時(shí)間，單位為毫秒，一般不寫(xiě)單位
    參數(shù)三：動(dòng)畫(huà)曲線，默認(rèn)為‘swing’，緩沖運(yùn)動(dòng)，還可以設(shè)置為‘linear’，勻速運(yùn)動(dòng)
    參數(shù)四：動(dòng)畫(huà)回調(diào)函數(shù)，動(dòng)畫(huà)完成后執(zhí)行的匿名函數(shù)

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});