通過 jQuery，可以選?。ú樵?，query） HTML 元素，并對它們執行“操作”（actions）。
1. 引用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
2. jQuery 描述
主要的 jQuery 函數是 $() 函數，向該函數傳遞 DOM 對象，它會返回 jQuery 對象，帶有向其添加的 jQuery 功能。
jQuery 允許您通過 CSS 選擇器來選取元素。
例如：
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
等價于
function myFunction()
{
$("#h01").html("Hello jQuery");
## $("#h01").attr("style","color:red").html("Hello jQuery") 添加顏色屬性
}
$(document).ready(myFunction);
上面代碼的最后一行，HTML DOM 文檔對象被傳遞到 jQuery ：$(document)。
當您向 jQuery 傳遞 DOM 對象時，jQuery 會返回以 HTML DOM 對象包裝的 jQuery 對象。
jQuery 函數會返回新的 jQuery 對象，其中的 ready() 是一個方法。
由于在 JavaScript 中函數就是變量，因此可以把 myFunction 作為變量傳遞給 jQuery 的 ready 方法。
提示：jQuery 返回 jQuery 對象，與已傳遞的 DOM 對象不同。jQuery 對象擁有的屬性和方法，與 DOM 對象的不同。您不能在 jQuery 對象上使用 HTML DOM 的屬性和方法。
3. 語法
- 基礎語法：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
例如：
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
- 文檔就緒函數
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全加載的圖像的大小
4. jQuery選擇器
- jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。 - jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。 - jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
實例
$("p").css("background-color","red");
5. jQuery 事件
jQuery 是為事件處理特別設計的。
| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) | 將函數綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
更多 事件方法見jQuery 事件參考手冊。
6. jQuery 效果
隱藏、顯示、淡入淡出、滑動、動畫
- 隱藏和顯示
語法：
$(selector).hide(speed,callback); //隱藏
$(selector).show(speed,callback); //顯示
$(selector).toggle(speed,callback); //切換 hide() 和 show() 方法
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
例如：
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
}); ##在body里有兩個按鈕，一個是隱藏，一個是顯示。
</script>
- 淡入淡出
類似hide與show
語法：
$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //淡出
$(selector).fadeToggle(speed,callback); //在淡入淡出之間切換
$(selector).fadeTo(speed,opacity,callback); //漸變為給定的不透明度（值介于 0 與 1 之間）
例如：
淡入： 注意display：none
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<body>
<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>
</body>
淡出：注意無display
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數的 fadeOut() 方法。</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>
在淡入淡出之間切換：fadeToggle()
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數的 fadeToggle() 方法。</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>
漸變到某個透明度fadeTo()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
- 滑動
語法：
$(selector).slideDown(speed,callback); //向下滑動元素
$(selector).slideUp(speed,callback); //向上滑動元素
$(selector).slideToggle(speed,callback); //在 slideDown()與slideUp() 之間切換
例如：
向下滑
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<body>
<p class="flip">請點擊這里</p>
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
</body>
向上滑動只需將slideDown改為slideUp即可
切換只需將slideDown換位slideToggle()即可
- 動畫animate() 方法
jQuery animate() 方法用于創建自定義動畫。
語法：
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成后所執行的函數名稱。
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({right:'70%'});
});
});
</script>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！
提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0',
height:'150px',
width:'150px'
});
});
});
</script>
定義相對值（該值相對于元素的當前值），需要在值的前面加上 += 或 -=：
例如：在{params}中填充
height:'+=150px',
width:'+=150px'
可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
把 <div> 元素移動到右邊，然后增加文本的字號：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
- 停止動畫stop()：用于在動畫或效果完成前對它們進行停止
語法：$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
- jiad
- dwd
- wdwd
