首先，JQuery簡介：
jQuery是一個JavaScript函數(shù)庫。
jQuery庫包含以下特性：
HTML元素選取
HTML元素操作
CSS操作
HTML事件函數(shù)
JavaScript特效和動畫
HTML DOM 遍歷和修改
AJAX
Utitles
然后，怎么在你的代碼之中用到j(luò)Query
在你的<head>部分，添加引用代碼
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
就這樣把jQuery添加到了網(wǎng)頁之中。
（<script src="jquery.js"></script>）寫這一段也行
接下來我們來講一下jQuery的語法：
jQuery的語法是為HTML元素選取編制的，可以對元素執(zhí)行某些操作。
基礎(chǔ)語法構(gòu)造是：$(selector).action()
美元符號定義jQuery
選擇器用來"查詢"和"查找"HTML元素
jQuery的action（）執(zhí)行對元素的操作
文檔就緒函數(shù)
$(document).ready(function(){
/*--- jQuery functions go here ----*/
});
這個document ready函數(shù)防止文檔在完全加載之前運行jQuery代碼。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取<p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素
jQuery的CSS選擇器
jQuery的CSS選擇器可用于改變HTML元素的CSS屬性。
下面來舉個例子：
$("p").css("background-color","red");
接下來是最重要的一節(jié)，就是jQuery的事件函數(shù)
首先來看這段代碼
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
在上面的例子中，按鈕的點擊會觸發(fā)一個函數(shù)：
$("button").click(function(){}
作用是隱藏所有p元素。
$("p").hide();
jQuery的一些其他用法：
下面的是顯示和隱藏
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
使用toggle（）方法來切換hide（）和show（）
語法如下：
$(selector).toggle(speed,callback);
其中speed參數(shù)規(guī)定顯示/隱藏的速度，可以取得以下值：" slow"，"fast"，或者是毫秒。
接下來是淡入淡出
jQuery擁有四中fade方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
我們來一個一個的介紹：
$(selector).fadeIn(speed,callback);
callback參數(shù)是fading完成后所執(zhí)行的函數(shù)名稱。
接下來是一段例子，用來演示不同參數(shù)的fadeIn()方法。
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<p>演示帶有不同參數(shù)的 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>
</body>
</html>
同理fadeOut()也不再贅述.
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
語法是:
$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeTo() 方法。</p>
<button>點擊這里，使三個矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
