jquery是一個函式庫，一個js檔案，頁面用script標籤引入這個js檔案就可以使用。

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

jquery文件載入完再執行

　　將獲取元素的語句寫到頁面頭部，會因為元素還沒有載入而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。

　　可以簡寫為：

1 <script type="text/javascript">
2 
3 $(function(){
 
4 
5      ......
6 
7 });
8 
9 </script>

jquery選擇器

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

　　$('#myId') //選擇id為myId的網頁元素

　　$('.myClass') // 選擇class為myClass的元素

　　$('li') //選擇所有的li元素

　　$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

　　$('input[name=first]') // 選擇name屬性等於first的input元素

對選擇集進行過濾

　　$('div').has('p'); // 選擇包含p元素的div元素

　　$('div').not('.myClass'); //選擇class不等於myClass的div元素

　　$('div').eq(5); //選擇第6個div元素

選擇集轉移

　　$('#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的元素的同級元素

　　$('#box').find('.myClass'); //選擇id是box的元素內的class等於myClass的元素

判斷是否選擇到了元素 

var $div1 = $('#div1');

var $div2 = $('#div2');

alert($div1.length); // 彈出1

alert($div2.length); // 彈出0

......

<div id="div1">這是一個div</div>

jquery樣式操作

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");

//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

繫結click事件

$('#btn1').click(function(){

    // 內部的this指的是原生物件

    // 使用jquery物件用 $(this)

})

//獲取元素的索引值 
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>

jquery動畫

/*
    animate引數：
    引數一：要改變的樣式屬性值，寫成字典的形式
    引數二：動畫持續的時間，單位為毫秒，一般不寫單位
    引數三：動畫曲線，預設為‘swing’，緩衝運動，還可以設定為‘linear’，勻速運動
    引數四：動畫回撥函式，動畫完成後執行的匿名函式

*/

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