jquery外掛學習
1. $(document).ready(function(){ });
這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼。
如果在文件沒有完全載入之前就執行函式，操作可能失敗。下面是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全載入的影象的大小
2.jQuery 屬性選擇器
jQuery 使用 XPath 表示式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
$("ul li:first") 獲取每個 <ul> 的第一個 <li> 元素
3. jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
例項
$("p").css("background-color","red");4.jQuery 名稱衝突
jQuery 使用 $ 符號作為 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函式（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名為 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()
5.結論
由於 jQuery 是為處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的程式碼會更恰當且更易維護：
- 把所有 jQuery 程式碼置於事件處理函式中
- 把所有事件處理函式置於文件就緒事件處理器中
- 把 jQuery 程式碼置於單獨的 .js 檔案中
- 如果存在名稱衝突，則重新命名 jQuery 庫
6.
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。Callback 函式在當前動畫 100% 完成之後執行
下面的例子演示了帶有 speed 引數的 hide() 方法：
$("button").click(function(){
$("p").hide(1000,function(){alert('ok');});
});jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，並隱藏已顯示的元素：
例項
1. $("button").click(function(){
$("p").toggle();
});2. $(selector).toggle(speed,callback); //speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒7. jQuery Fading 方法
通過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
- fadeIn() //淡入
- fadeOut() //淡出
- fadeToggle() // 淡入/淡出 切換
- fadeTo()
特殊：$(selector).fadeTo(speed,opacity,callback); //speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 //fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）
8.jQuery 滑動方法
通過 jQuery，您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法：
- slideDown()
- slideUp()
- slideToggle()
語法：$(selector).slideDown(speed,callback);
9.jQuery 動畫 - animate() 方法
jQuery animate() 方法用於建立自定義動畫。
語法：
$(selector).animate({params},speed,callback);必需的 params 引數定義形成動畫的 CSS 屬性。
可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是動畫完成後所執行的函式名稱。
下面的例子演示 animate() 方法的簡單應用；它把 <div> 元素移動到左邊，直到 left 屬性等於 250 畫素為止：
例項
$("button").click(function(){
$("div").animate({left:'250px'});
}); 預設地，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！ 請注意，生成動畫的過程中可同時使用多個屬性：
例項
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}); 提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫並不包含在核心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛。
jQuery animate() - 使用相對值
也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
例項
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
}); jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"：
例項
$("button").click(function(){
$("div").animate({
height:'toggle'
});
}); jQuery animate() - 使用佇列功能
預設地，jQuery 提供針對動畫的佇列功能。
這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的“內部”佇列。然後逐一執行這些 animate 呼叫。
例項 1
隱藏，如果您希望在彼此之後執行不同的動畫，那麼我們要利用佇列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});例項 2
下面的例子把 <div> 元素移動到右邊，然後增加文字的字號：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});10.jQuery 方法連結
例子 1
下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);如果需要，我們也可以新增多個方法呼叫。
提示：當進行連結時，程式碼行會變得很差。不過，jQuery 在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮排。
例子 2
這樣寫也可以執行：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);11.attr() 方法也允許您同時設定多個屬性
下面的例子演示如何同時設定 href 和 title 屬性：
例項
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});attr() 的回撥函式
jQuery 方法 attr()，也提供回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
下面的例子演示帶有回撥函式的 attr() 方法：
例項
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});