概述

jQuery 是一個 JavaScript 庫，包含了大量的函式。

jQuery 極大地簡化了 JavaScript 程式設計。

jQuery 很容易學習。

使用

cdn引入：<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

語法：

$(selector).action()

selector：選擇器，選取html元素時和css選擇器語法一致，也可以寫document物件。

action()：操作，比如click()事件、hide()隱藏、css()

//隱藏當前的 HTML 元素。
$(this).hide()

//隱藏 id="test" 的元素。
$("#test").hide()

//隱藏所有 class="test" 的所有元素
$(".test").hide() 

//隱藏所有 <p> 元素。
$("p").hide()

//隱藏所有 class="test" 的元素。
$(".test").hide()

//選取所有帶有 href 值等於 "#" 的元素。
$("[href='#']") 

//選擇所有p標籤，修改其背景顏色
$("p").css("background-color","red");
 

事件

滑鼠事件、鍵盤事件，其他事件

注：

• $(document).ready(function) 可以簡寫為$(function(){})
• 事件的函式一般可以接收一個引數儲存事件的一些資訊，如$(document).mousemove(function(event){})的event.pageX是滑鼠的x座標。

操作DOM

節點文字操作:

$('#a').text();//獲得值
$('#a').text('設定值');//設定值
$('#a').html();//獲得值
$('#a').html('<strong>123</strong>');//設定值

css操作：

$('#a').css({"color","red"});
 

元素的隱藏與顯示

本質是操作：display：none

$('#a').show();
$('#a').hide();

jQuery的淡入淡出：

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 自動判斷是淡入還是淡出
• fadeTo() 淡入或淡出到某種程度（調整透明度）

$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
//speed :可選引數，規定效果時長，可選值有slow、fast或毫秒
//callback：可選引數，規定完成後執行的函式
//opacity：透明度 0-1

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>



</p><p>演示帶有不同引數的 fadeIn() 方法。</p>
<button>點選這裡，使三個矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>