jquery core
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
第1章 初識jQuery
第2章 jQuery 基礎選擇器
第3章 jQuery過濾性選擇器
第4章 jQuery表單選擇器
第5章 jQuery 操作DOM元素
attr() clone() replaceWith()和replaceAll() wrap()和wrapInner() each() remove()
第6章 jQuery 事件與應用
ready() bind() hover() toggle() unbind() one() trigger() focus live() show()和hide()
第7章 jQuery 動畫特效
show()和hide() toggle() slideUp()和slideDown() slideToggle() fadeIn()和fadeOut() fadeTo() animate() stop() delay()
第8章 jQuery 實現Ajax應用
load() getJSON() getScript() get() serialize() ajax() ajaxSetup() ajaxStart()和ajaxStop()
第9章 jQuery 常用外掛
表單驗證外掛——validate
表單外掛——form
圖片燈箱外掛——lightBox
圖片放大鏡外掛——jqzoom
cookie外掛——cookie
搜尋外掛——autocomplete
右鍵選單外掛——contextmenu
自定義物件級外掛——lifocuscolor外掛
自定義類級別外掛—— twoaddresult
第10章 jQuery UI型外掛
拖曳外掛——draggable
放置外掛——droppable
拖曳排序外掛——sortable
皮膚摺疊外掛——accordion
選項卡外掛——tabs
對話方塊外掛——dialog
選單工具外掛——menu
微調按鈕外掛——spinner
工具提示外掛——tooltip
$.browser $.support.boxModel $.isEmptyObject $.isPlainObject $.contains $.trim $. param $.extend()
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
---------------------------------------------------------------------------------------------------------------------------------
第1章 初識jQuery
---------------------------------------------------------------------------------------------------------------------------------
第2章 jQuery 基礎選擇器
$("parent > child")
child引數獲取的元素都是parent選擇器的子元素，它們之間通過“>”符號來表示一種層次關係。
$("prev + next")
其中引數prev為任何有效的選擇器，引數“next”為另外一個有效選擇器，它們之間的“+”表示一種上下的層次關係，也就是說，“prev”元素最緊鄰的下一個元素由“next”選擇器返回的並且只返回唯的一個元素。
$("prev ~ siblings")
其中引數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關係，表明siblings選擇器獲取的元素都是prev元素之後的同輩元素。
---------------------------------------------------------------------------------------------------------------------------------
第3章 jQuery過濾性選擇器
$("li:first") $("li:last") $("li:eq(2)") $("li:contains('aaa')") $("li>label") $("input:hidden") $("li:visible") $("li[attribute=value]")
$("li[attribute!=value]") $("li[attribute*=value]") $("li:first-child") $("li:last-child") $("div:has(span)")
---------------------------------------------------------------------------------------------------------------------------------
第4章 jQuery表單選擇器
$("form :input") $("form :text") $("form :password") $("form :radio") $("form :checkbox") $("form input:submit") $("form :image") $("form :button")
$("form :checked") $("form :selected")
---------------------------------------------------------------------------------------------------------------------------------
第5章 jQuery 操作DOM元素
+ attr()方法的作用是設定或者返回元素的屬性，其中attr(屬性名)格式是獲取元素屬性名的值，attr(屬性名，屬性值)格式則是設定元素屬性名的值
使用html()和text()方法操作元素的內容，當兩個方法的引數為空時，表示獲取該元素的內容，而如果方法中包含引數，則表示將引數值設定為元素內容。
通過addClass()和css()方法可以方便地操作元素中的樣式，前者括號中的引數為增加元素的樣式名稱，後者直接將樣式的屬性內容寫在括號中。
使用removeAttr(name)和removeClass(class)分別可以實現移除元素的屬性和樣式的功能，前者方法中參數列示移除屬性名，後者方法中引數則表示移除的樣式名
append(content)方法的功能是向指定的元素中追加內容，被追加的content引數，可以是字元、HTML元素標記，還可以是一個返回字串內容的函式。
$(content).appendTo(selector) 引數content表示需要插入的內容，引數selector表示被選的元素，即把content內容插入selector元素內，預設是在尾部。
使用before()和after()方法可以在元素的前後插入內容，它們分別表示在整個元素的前面和後面插入指定的元素或內容，呼叫格式分別為： $(selector).before(content)和$(selector).after(content) 其中引數content表示插入的內容，該內容可以是元素或HTML字串。
+ 呼叫clone()方法可以生成一個被選元素的副本，即複製了一個被選元素，包含它的節點、文字和屬性，它的呼叫格式為：
$(selector).clone()
其中引數selector可以是一個元素或HTML內容。
例如，使用clone()方法複製頁面中的一個<span>元素，並將複製後的元素追加到頁面的後面
+ replaceWith()和replaceAll()方法都可以用於替換元素或元素中的內容，但它們呼叫時，內容和被替換元素所在的位置不同，分別為如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
引數selector為被替換的元素，content為替換的內容。
例如，呼叫replaceWith()方法將頁面中<span>元素替換成一段HTML字串
+ wrap()和wrapInner()方法都可以進行元素的包裹，但前者用於包裹元素本身，後者則用於包裹元素中的內容，它們的呼叫格式分別為：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
引數selector為被包裹的元素，wrapper引數為包裹元素的格式。
例如，呼叫wrap()方法，將<span>用<div>元素包裹起來，
+ 使用each()方法可以遍歷指定的元素集合，在遍歷時，通過回撥函式返回遍歷元素的序列號，它的呼叫格式為：
$(selector).each(function(index))
引數function為遍歷時的回撥函式，index為遍歷元素的序列號，它從0開始。
例如，遍歷頁面中的<span>元素，當元素的序列號為2時，新增名為“focus”的樣式
+ remove()方法刪除所選元素本身和子元素，該方法可以通過新增過濾引數指定需要刪除的某些元素，而
empty()方法則只刪除所選元素的子元素。
例如，呼叫remove()方法刪除<span>元素中類別名為“red”的
---------------------------------------------------------------------------------------------------------------------------------
第6章 jQuery 事件與應用
+ ready()事件類似於onLoad()事件，但前者只要頁面的DOM結構載入後便觸發，而後者必須在頁面全部元素載入成功才觸發，ready()可以寫多個，按順序執行。此外，下列寫法是相等的：
$(document).ready(function(){})等價於$(function(){});
例如，當觸發頁面的ready()事件時，在<div>元素中顯示一句話
+ bind()方法繫結元素的事件非常方便，繫結前，需要知道被繫結的元素名，繫結的事件名稱，事件中執行的函式內容就可以，它的繫結格式如下：
$(selector).bind(event,[data] function)
引數event為事件名稱，多個事件名稱用空格隔開，function為事件執行的函式。
例如，繫結按鈕的單擊事件，單擊按鈕時，該按鈕變為不可用
+ hover()方法的功能是當滑鼠移到所選元素上時，執行方法中的第一個函式，滑鼠移出時，執行方法中的第二個函式，實現事件的切實效果，呼叫格式如下：
$(selector).hover(over，out);
over引數為移到所選元素上觸發的函式，out引數為移出元素時觸發的函式
+ toggle()方法可以在元素的click事件中繫結兩個或兩個以上的函式，同時，它還可以實現元素的隱藏與顯示的切換，繫結多個函式的呼叫格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多個函式的名稱
例如，使用toggle()方法，當每次點選<div>元素時，顯示不同內容
toggle()····同時，它還可以實現元素的隱藏與顯示的切換····
+ unbind()方法可以移除元素已繫結的事件，它的呼叫格式如下：
$(selector).unbind(event,fun)
其中引數event表示需要移除的事件名稱，多個事件名用空格隔開，fun引數為事件執行時呼叫的函式名稱。
例如，點選按鈕時，使用unbind()方法移除<div>元素中已繫結的“dblclick”事件
one()方法可以繫結元素任何有效的事件，但這種方法繫結的事件只會觸發一次，它的呼叫格式如下：
$(selector).one(event,[data],fun)
引數event為事件名稱，data為觸發事件時攜帶的資料，fun為觸發該事件時執行的函式。
例如，使用one方法繫結<div>元素的單擊事件，在事件執行的函式中，累計執行的次數，並將該次數顯示在頁面中
+ trigger()方法可以直接手動觸發元素指定的事件，這些事件可以是元素自帶事件，也可以是自定義的事件，總之，該事件必須能執行，它的呼叫格式為：
$(selector).trigger(event)
其中event引數為需要手動觸發的事件名稱。
例如，當頁面載入時，手動觸發文字輸入框的“select”事件，使文字框的預設值處於全部被選中的狀態
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger("change-color");
+ focus事件在元素獲取焦點時觸發，如點選文字框時，觸發該事件；而blur事件則在元素丟失焦點時觸發，如點選除文字框的任何元素，都會觸發該事件。
例如，在觸發文字框的“focus”事件時，<div>元素顯示提示內容
+ 當一個元素的值發生變化時，將會觸發change事件，例如在選擇下拉選單框中的選項時，就會觸change事件。
例如，當在頁面選擇下拉選單框中的選項時，將在<div>元素中顯示所選擇的選項內容
+ 與bind()方法相同，live()方法與可以繫結元素的可執行事件，除此相同功能之外，live()方法還可以繫結動態元素，即使用程式碼新增的元素事件，格式如下：
$(selector).live(event,[data],fun)
引數event為事件名稱，data為觸發事件時攜帶的資料，fun為觸發該事件時執行的函式。
例如，使用live()方法繫結，頁面中按鈕元素的單擊事件，而這個按鈕是通過追加的方式新增至頁面的
+ show()和hide()方法用於顯示或隱藏頁面中的元素，它的呼叫格式分別為：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
引數speed設定隱藏或顯示時的速度值，可為“slow”、“fast”或毫秒數值，可選項引數callback為隱藏或顯示動作執行完成後呼叫的函式名。
例如，在頁面中，通過點選“顯示”和“隱藏”兩個按鈕來控制圖片元素的顯示或隱藏狀態
---------------------------------------------------------------------------------------------------------------------------------
第7章 jQuery 動畫特效
+ show()和hide()方法用於顯示或隱藏頁面中的元素，它的呼叫格式分別為：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
引數speed設定隱藏或顯示時的速度值，可為“slow”、“fast”或毫秒數值，可選項引數callback為隱藏或顯示動作執行完成後呼叫的函式名。
例如，在頁面中，通過點選“顯示”和“隱藏”兩個按鈕來控制圖片元素的顯示或隱藏狀態
+ 第一節我們學過實現元素的顯示與隱藏需要使用hide()與show()，那麼有沒有更簡便的方法來實現同樣的動畫效果呢？
呼叫toggle()方法就可以很容易做到，即如果元素處於顯示狀態，呼叫該方法則隱藏該元素，反之，則顯示該元素，它的呼叫格式是：
$(selector).toggle(speed,[callback])
其中speed引數為動畫效果時的速度值，可以為數字，單位為毫秒，也可是“fast”、“slow”字元，可選項引數callback為方法執行成功後回撥的函式名稱。
例如，呼叫toggle()方法以動畫的效果顯示和隱藏圖片元素
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$spn.toggle(3000,function(){
$spn.html() == "隱藏" ? $spn.html("顯示") : $spn.html("隱藏");
})
});
});
+ 可以使用slideUp()和slideDown()方法在頁面中滑動元素，前者用於向上滑動元素，後者用於向下滑動元素，它們的呼叫方法分別為：
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
其中speed引數為滑動時的速度，單位是毫秒，可選項引數callback為滑動成功後執行的回撥函式名。
要注意的是：slideDown()僅適用於被隱藏的元素；slideup()則相反。
例如，呼叫slideUp()和slideDown()方法實現頁面中元素的向上和向下的滑動效果
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("ul").slideUp(3000,function() {
$("#hidval").val(1);
})
} else {
$("ul").slideDown(3000,function(){
$("#hidval").val(0);
})
}
})
});
+ 使用slideToggle()方法可以切換slideUp()和slideDown()，即呼叫該方法時，如果元素已向上滑動，則元素自動向下滑動，反之，則元素自動向上滑動，格式為：
$(selector).slideToggle(speed,[callback])
其中speed引數為動畫效果時的速度值，可以為數字，單位為毫秒，也可是“fast”、“slow”字元，可選項引數callback為方法執行成功後回撥的函式名稱
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$spn.slideToggle(3000,function() {
$spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
})
})
});
+ fadeIn()和fadeOut()方法可以實現元素的淡入淡出效果，前者淡入隱藏的元素，後者可以淡出可見的元素，它們的呼叫格式分別為：
$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
其中引數speed為淡入淡出的速度，callback引數為完成後執行的回撥函式名。
例如，分別在頁面中以淡入淡出的動畫效果顯示圖片元素
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("ul").fadeIn(30,function() {
$("#hidval").val(1);
})
} else {
$("ul").fadeOut(30,function() {
$("#hidval").val(0);
})
}
})
});
+ 使用fadeTo()方法設定淡入淡出效果的不透明度
呼叫fadeTo()方法，可以將所選擇元素的不透明度以淡入淡出的效果調整為指定的值，該方法的呼叫格式為：
$(selector).fadeTo(speed,opacity,[callback])
其中speed引數為效果的速度，opacity引數為指定的不透明值，它的取值範圍是0.0~1.0，可選項引數callback為效果完成後，回撥的函式名。
例如，分別呼叫fadeTo()方法，設定三個圖片元素的不透明度值，
+ 呼叫animate()方法可以建立自定義動畫效果，它的呼叫格式為：
$(selector).animate({params},speed,[callback])
其中，params引數為製作動畫效果的CSS屬性名與值，speed引數為動畫的效果的速度，單位為毫秒，可選項callback引數為動畫完成時執行的回撥函式名。
例如，呼叫animate()方法以由小到大的動畫效果顯示圖片
$(function () {
$("span").animate({
width: "80px",
height: "80px"
},
3000, function () {
});
});
+ 呼叫animate()方法不僅可以製作簡單漸漸變大的動畫效果，而且還能製作移動位置的動畫，在移動位置之前，必須將被移元素的“position”屬性值設為“absolute”或“relative”，否則，該元素移動不了。
例如，呼叫animate()方法先將圖片向右移動90px，然後，再將圖片寬度與高度分別增加30px
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
});
});
+ stop()方法的功能是在動畫完成之前，停止當前正在執行的動畫效果，這些效果包括滑動、淡入淡出和自定義的動畫，它的呼叫格式為：
$(selector).stop([clearQueue],[goToEnd])
其中，兩個可選項引數clearQueue和goToEnd都是布林型別值，前者表示是否停止正在執行的動畫，後者表示是否完成正在執行的動畫，預設為false。
例如，在頁面中，當圖片元素正在執行動畫效果時，點選“停止”按鈕，中止正在執行的動畫效果
$(function () {
$("span").animate({
left: "+=200px"
}, 3000, function () {
});
$("#btnStop").bind("click", function () {
$("span").stop();
});
});
+ delay()方法的功能是設定一個延時值來推遲動畫效果的執行，它的呼叫格式為：
$(selector).delay(duration)
其中引數duration為延時值，它的單位是毫秒，當超過延時值時，動畫繼續執行。
例如，當頁面中圖片動畫正在執行時，點選“延時”按鈕呼叫delay()方法推遲2000毫秒後繼續執行
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=60px',
width: '+=60px'
}, 3000, function () {
$("#tip").html("執行完成!");
});
});
$("#btnStop").bind("click", function () {
$("span").delay(2000);
$("#tip").html("正在延時!");
});
});
delay函式不會終止當前動畫執行的一個階段，比如說例子中的左邊距+100px，這個過程是不會被中斷的
---------------------------------------------------------------------------------------------------------------------------------
第8章 jQuery 實現Ajax應用
+ 使用load()方法通過Ajax請求載入伺服器中的資料，並把返回的資料放置到指定的元素中，它的呼叫格式為：
load(url,[data],[callback])
引數url為載入伺服器地址，可選項data引數為請求時傳送的資料，callback引數為資料請求成功後，執行的回撥函式。
例如，點選“載入”按鈕時，向伺服器請求載入一個指定頁面的內容，載入成功後，將資料內容顯示在<div>元素中，並將載入按鈕變為不可用。
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("data/fruit_part.html li",function(){
$this.attr("disabled", "true");
});
})
});
+ 使用getJSON()方法可以通過Ajax非同步請求的方式，獲取伺服器中的陣列，並對獲取的資料進行解析，顯示在頁面中，它的呼叫格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url引數為請求載入json格式檔案的伺服器地址，可選項data引數為請求時傳送的資料，callback引數為資料請求成功後，執行的回撥函式
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
+ 使用getScript()方法非同步請求並執行伺服器中的JavaScript格式的檔案，它的呼叫格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
引數url為伺服器請求地址，可選項callback引數為請求成功後執行的回撥函式。
例如，點選“載入”按鈕，呼叫getScript()載入並執行伺服器中指定名稱的JavaScript格式的檔案，並在頁面中顯示載入後的資料內容
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript(" /data/sport_f.js",function(){
$this.attr("disabled", "true");
});
})
});
+ 使用get()方法時，採用GET方式向伺服器請求資料，並通過方法中回撥函式的引數返回請求的資料，它的呼叫格式如下：
$.get(url,[callback])
引數url為伺服器請求地址，可選項callback引數為請求成功後執行的回撥函式。
例如，當點選“載入”按鈕時，呼叫get()方法向伺服器中的一個.php檔案以GET方式請求資料，並將返回的資料內容顯示在頁面中
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}, "json");
})
});
+ 與get()方法相比，post()方法多用於以POST方式向伺服器傳送資料，伺服器接收到資料之後，進行處理，並將處理結果返回頁面，呼叫格式如下：
$.post(url,[data],[callback])
引數url為伺服器請求地址，可選項data為向伺服器請求時傳送的資料，可選項callback引數為請求成功後執行的回撥函式。
例如，在輸入框中錄入一個數字，點選“檢測”按鈕，呼叫post()方法向伺服器以POST方式傳送請求，檢測輸入值的奇偶性，並顯示在頁面中
$("#btnCheck").bind("click", function () {
$.post("/data/check_f.php",{num: $("#txtNumber").val()},
function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
+ 使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文字字串，直接可用於ajax請求，它的呼叫格式如下：
$(selector).serialize()
其中selector引數是一個或多個表單中的元素或表單元素本身。
例如，在表單中新增多個元素，點選“序列化”按鈕後，呼叫serialize()方法，將表單元素序列化後的標準URL編碼文字字串顯示在頁面中
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
==>Text1=aaa&Select1=0&Checkbox1=on
+ 使用ajax()方法是最底層、功能最強大的請求伺服器資料的方法，它不僅可以獲取伺服器返回的資料，還能向伺服器傳送請求並傳遞數值，它的呼叫格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中引數settings為傳送ajax請求時的配置物件，在該物件中，url表示伺服器請求的路徑，data為請求時傳遞的資料，dataType為伺服器返回的資料型別，success為請求成功的執行的回撥函式，type為傳送資料請求的方式，預設為get。
例如，點選頁面中的“載入”按鈕，呼叫ajax()方法向伺服器請求載入一個txt檔案，並將返回的檔案中的內容顯示在頁面
$("#btnCheck").bind("click", function () {
$.ajax({
url:"/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
+ 使用ajaxSetup()方法可以設定Ajax請求的一些全域性性選項值，設定完成後，後面的Ajax請求將不需要再新增這些選項值，它的呼叫格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options引數為一個物件，通過該物件設定Ajax請求時的全域性選項值。
例如，先呼叫ajaxSetup()方法設定全域性的Ajax選項值，再點選兩個按鈕，分別使用ajax()方法請求不同的伺服器資料，並將資料內容顯示在頁面
$(function () {
$.ajaxSetup({
type:"text",
success:function(data){
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: " data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: " data/check_f.php"
});
})
});
+ 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是繫結Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函式，ajaxStop()方法用於在Ajax請求完成後觸發函式。它們的呼叫格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是繫結的函式，當傳送Ajax請求前執行ajaxStart()方法繫結的函式，請求成功後，執行ajaxStop ()方法繫結的函式。
例如，在呼叫ajax()方法請求伺服器資料前，使用動畫顯示正在載入中，當請求成功後，該動畫自動隱藏
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在請求資料...");
});
$("#divload").ajaxStop(function(){
$(this).html("資料請求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>對我說：" + data.say + "</li>");
}
});
})
});
---------------------------------------------------------------------------------------------------------------------------------
第9章 jQuery 常用外掛
+ 表單驗證外掛——validate
<script type="text/javascript" src="/jquery.validate.js"></script>
<script type="text/javascript" src="/jquery.validate.messages_cn.js"></script>
該外掛自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常資訊，此外，還允許自定義驗證規則，外掛呼叫方法如下：
$(form).validate({options})
其中form參數列示表單元素名稱，options參數列示呼叫方法時的配置物件，所有的驗證規則和異常資訊顯示的位置都在該物件中進行設定。
例如，當點選表單中的“提交”按鈕時，呼叫validate外掛驗證使用者名稱輸入是否符合規則，並將異常資訊顯示在頁面中
$("#frmV").validate(
{
email:{
required:true,
email:true
}
},
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
+ 表單外掛——form
<script type="text/javascript" src="jquery.form.js">
通過表單form外掛，呼叫ajaxForm()方法，實現ajax方式向伺服器提交表單資料，並通過方法中的options物件獲取伺服器返回資料，呼叫格式如下：
$(form). ajaxForm ({options})
其中form參數列示表單元素名稱；options是一個配置物件，用於在傳送ajax請求過程，設定傳送時的資料和引數。
例如，在頁面中點選“提交”按鈕，呼叫form外掛的
ajaxForm()方法向伺服器傳送錄入的使用者名稱和密碼資料，伺服器接收後返回並顯示在頁面中
$(function () {
var options = {
url: "/form_f.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
+ 圖片燈箱外掛——lightBox
<script type="text/javascript" src=" /jquery.notesforlightbox.js"></script>
該外掛可以用圓角的方式展示選擇中的圖片，使用按鈕檢視上下張圖片，在載入圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，呼叫格式如下：
$(linkimage).lightBox({options})
其中linkimage引數為包含圖片的<a>元素名稱，options為外掛方法的配置物件。
例如，以列表的方式在頁面中展示全部的圖片，當使用者單擊其中某張圖片時，通過引入的圖片外掛，採用“燈箱”的方式顯示所選的圖片
$(function () {
$("li a").lightBox({
overlayBgColor: "#666", //圖片瀏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
})
});
+ 圖片放大鏡外掛——jqzoom
<script type="text/javascript" src=" jquery.jqzoom.js"></script>
在呼叫jqzoom圖片放大鏡外掛時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當滑鼠在小圖片中移動時，呼叫該外掛的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果，呼叫格式如下：
$(linkimage).jqzoom({options})
其中linkimage引數為包含圖片的<a>元素名稱，options為外掛方法的配置物件。
例如，在頁面中，新增一個被<a>元素包含的圖片元素，當在圖片元素中移動滑鼠時，在圖片的右邊，將顯示放大後的所選區域效果
$(function () {
$("#jqzoom").jqzoom({ //繫結圖片放大外掛jqzoom
zoomWidth: 100, //小圖片所選區域的寬
zoomHeight: 100, //小圖片所選區域的高
zoomType: 'reverse' //設定放大鏡的型別
});
});
+ cookie外掛——cookie
<script src=" jquery.cookie.js" type="text/javascript"></script>
使用cookie外掛後，可以很方便地通過cookie物件儲存、讀取、刪除使用者的資訊，還能通過cookie外掛儲存使用者的瀏覽記錄，它的呼叫格式為：
儲存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)
其中引數key為儲存cookie物件的名稱，value為名稱對應的cookie值。
例如，當點選“設定”按鈕時，如果是“否儲存使用者名稱”的核取方塊為選中狀態時，則使用cookie物件儲存使用者名稱，否則，刪除儲存的cookie使用者名稱，
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email", $("#email").val(), {
path: "/", expires: 7
})
}
else {
$.cookie("email", null, {
path: "/"
})
}
});
});
+ 搜尋外掛——autocomplete
<script src=" jquery.autocomplete.js" type="text/javascript"></script>
搜尋外掛的功能是通過外掛的autocomplete()方法與文字框相繫結，當文字框輸入字元時，繫結後的外掛將返回與字元相近的字串提示選擇，呼叫格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox引數為文字框元素名稱，urlData為外掛返回的相近字串資料，可選項引數options為呼叫外掛方法時的配置物件。
例如，當使用者在文字框輸入內容時，呼叫搜尋外掛的autocomplete()方法返回與輸入內容相匹配的字串資料，顯示在文字框下，提示選擇
$(function () {
var arrUserName = ["王五", "劉明", "李小四", "劉促明", "李淵", "張小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //雙擊空白文字框時顯示全部提示資料
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改變匹配資料顯示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
}
});
+ 右鍵選單外掛——contextmenu
<script src=" jquery.contextmenu.js" type="text/javascript"></script>
右鍵選單外掛可以繫結頁面中的任意元素，繫結後，選中元素，點選右鍵，便通過該外掛彈出一個快捷選單，點選選單各項名稱執行相應操作，呼叫程式碼如下：
$(selector).contextMenu(menuId,{options});
Selector引數為繫結外掛的元素，meunId為快捷選單元素，options為配置物件。
例如，選中頁面<textarea>元素，點選右鍵，彈出外掛繫結的快捷選單，點選選單中的各個選項，便在頁面中顯示操作的對應名稱
$(function () {
$("#divtest").contextMenu("sysMenu",
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您點選了“儲存”項");
},
'Li4': function (Item) {
$(".tip").show().html("您點選了“退出”項");
}
}
});
});
+ 自定義物件級外掛——lifocuscolor外掛
<script src=" jquery.lifocuscolor.js" type="text/javascript"></script>
自定義的lifocuscolor外掛可以在<ul>元素中，滑鼠在表項<li>元素移動時，自定義其獲取焦點時的背景色，即定義<li>元素選中時的背景色，呼叫格式為：
$(Id).focusColor(color)
其中，引數Id表示<ul>元素的Id號，color表示<li>元素選中時的背景色。
例如，在頁面中，呼叫自定義的lifocuscolor外掛，自定義<li>元素選中時的背景色
$(function () {
$("#u1").focusColor("#ccc"); //呼叫自定義的外掛
})
+ 自定義類級別外掛—— twoaddresult
<script src=" jquery.twoaddresult.js" type="text/javascript"></script>
通過呼叫自定義外掛twoaddresult中的不同方法，可以實現對兩個數值進行相加和相減的運算，匯入外掛後，呼叫格式分別為：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述呼叫格式分別為計算兩數值相加和相減的結果，p1和p2為任意數值。
例如，在頁面的兩個文字框中輸入任意數值，點選“計算”按鈕呼叫自定義外掛中$.addNum()方法，計算兩數值的和並將結果顯示在另一文字框中
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.subNum($("#Text1").val(),$("#Text2").val());
);
});
});
---------------------------------------------------------------------------------------------------------------------------------
第10章 jQuery UI型外掛
<script src=" /jquery-ui-1.9.2.min.js" type="text/javascript"></script>
+ 拖曳外掛——draggable
拖曳外掛draggable的功能是拖動被繫結的元素，當這個jQuery UI外掛與元素繫結後，可以通過呼叫draggable()方法，實現各種拖曳元素的效果，呼叫格式如下：
$(selector). draggable({options})
options引數為方法呼叫時的配置物件，根據該物件可以設定各種拖曳效果，如“containment”屬性指定拖曳區域，“axis”屬性設定拖曳時的座標方向。
例如，在頁面中的<div>元素中新增兩個子類<div>，通過與拖曳外掛繫結，這兩個子類<div>元素只能在外層的父<div>元素中任意拖曳
$(function () {
$("#x").draggable({containment:"parent",axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});
});
+ 放置外掛——droppable
除使用draggable外掛拖曳任意元素外，還可以呼叫droppable UI外掛將拖曳後的任意元素放置在指定區域中，類似購物車效果，呼叫格式如下：
$(selector).droppable({options})
selector引數為接收拖曳元素，options為方法的配置物件，在物件中，drop函式表示當被接收的拖曳元素完全進入接收元素的容器時，觸發該函式的呼叫。
例如，在頁面中，通過呼叫droppable外掛將“產品區”中的元素拖曳至“購物車”中，同時改變“購物車”的背景色和數量值
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
$(this).addClass('focus').find('#tip').html('有產品了');
}
})
});
+ 拖曳排序外掛——sortable
拖曳排序外掛的功能是將序列元素（例如<option>、<li>）按任意位置進行拖曳從而形成一個新的元素序列，實現拖曳排序的功能，它的呼叫格式為：
$(selector).sortable({options});
selector引數為進行拖曳排序的元素，options為呼叫方法時的配置物件，
例如，在頁面中，通過載入sortable外掛將<ul>元素中的各個<li>表項實現拖曳排序的功能
$(function () {
$("ul").sortable({
delay:2,
opacity:0.5
})
});
+ 皮膚摺疊外掛——accordion
皮膚摺疊外掛可以實現頁面中指定區域類似“手風琴”的摺疊效果，即點選標題時展開內容，再點另一標題時，關閉已展開的內容，呼叫格式如下：
$(selector).accordion({options});
其中，引數selector為整個皮膚元素，options引數為方法對應的配置物件。
例如，通過accordion外掛展示幾個相同區域皮膚的摺疊效果
$(function () {
$("#accordion").accordion();
});
+ 選項卡外掛——tabs
使用選項卡外掛可以將<ul>中的<li>選項定義為選項標題，在標題中，再使用<a>元素的“href”屬性設定選項標題對應的內容，它的呼叫格式如下：
$(selector).tabs({options});
selector引數為選項卡整體外圍元素，該元素包含選項卡標題與內容，options引數為tabs()方法的配置物件，通過該物件還能以ajax方式載入選項卡的內容。
例如，在頁面中，新增選項卡的標題和內容元素，並繫結tabs外掛，當點選標題時，以選項卡的方式切內容
$(function () {
$("#tabs").tabs({
//設定各選項卡在切換時的動畫效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通過移動滑鼠事件切換選項卡
})
});
+ 對話方塊外掛——dialog
對話方塊外掛可以用動畫的效果彈出多種型別的對話方塊，實現JavaScript程式碼中alert()和confirm()函式的功能，它的呼叫格式為：
$(selector).dialog({options});
selector引數為顯示彈出對話方塊的元素，通常為<div>，options引數為方法的配置物件，在物件中可以設定對話方塊型別、“確定”、“取消”按鈕執行的程式碼等。
例如，當點選“提交”按鈕時，如果文字框中的內容為空，則通過dialog外掛彈出提示框，提示輸入內容不能為空
$(function () {
$("#btnDelete").bind("click", function () { //詢問按鈕事件
if ($("#spnName").html() != null) { //如果物件不為空
sys_Confirm("您真的要刪除該條記錄嗎？");
return false;
}
});
});
function sys_Confirm(content) { //彈出詢問資訊視窗
$('#dialog-modal').dialog({
height: 140,
modal: true,
title: '系統提示',
hide: 'slide',
buttons: {
'確定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}
+ 選單工具外掛——menu
選單工具外掛可以通過<ul>建立多級內聯或彈出式選單，支援通過鍵盤方向鍵控制選單滑動，允許為選單的各個選項新增圖示，呼叫格式如下：
$(selector).menu({options});
selector引數為選單列表中最外層<ul>元素，options為menu()方法的配置物件。
例如，在頁面中，通過<ul>元素內聯的方式構建一個三層結構的導航選單，並將最外層<ul>元素通過menu()方法繫結外掛，實現導航選單的功能
$(function () {
$("#menu").menu( );
});
+ 微調按鈕外掛——spinner
微調按鈕外掛不僅能在文字框中直接輸入數值，還可以通過點選輸入框右側的上下按鈕修改輸入框的值，還支援鍵盤的上下方向鍵改變輸入值，呼叫格式如下：
$(selector).spinner({options});
selector引數為文字輸入框元素，可選項options引數為spinner()方法的配置物件，在該物件中，可以設定輸入的最大、最小值，獲取改變值和設定對應事件。
例如，將頁面中的三個輸入文字框都與微調外掛相繫結，當改變三個文字框值時，對應的<div>元素的背景色也將隨之發生變化
$(function () {
//定義變數
var intR = 0, intG = 0, intB = 0, strColor;
$("input") .spinner({
//初始化外掛
max: 255,
min: 0,
//設定微調按鈕遞增/遞減事件
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
},
//設定微調按鈕值改變事件
change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
});
});
+ 工具提示外掛——tooltip
工具提示外掛可以定製元素的提示外觀，提示內容支援變數、Ajax遠端獲取，還可以自定義提示內容顯示的位置，它的呼叫格式如下：
$(selector).tooltip({options});
其中selector為需要顯示提示資訊的元素，可選項引數options為tooltip()方法的配置物件，在該物件中，可以設定提示資訊的彈出、隱藏時的效果和所在位置。
例如，將三個<a>元素與工具提示外掛相繫結，當把滑鼠移動在<a>元素內容時，以動畫效果彈出對應的提示圖片，移出時，圖片自動隱藏
$(function () {
$("input").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
---------------------------------------------------------------------------------------------------------------------------------
第11章 jQuery 工具類函式
+ 獲取瀏覽器的名稱與版本資訊
在jQuery中，通過$.browser物件可以獲取瀏覽器的名稱和版本資訊，如$.browser.chrome為true，表示當前為Chrome瀏覽器，$.browser.mozilla為true，表示當前為火狐瀏覽器，還可以通過$.browser.version方式獲取瀏覽器版本資訊。
例如，呼叫$.browser物件，獲取瀏覽器名稱並顯示在頁面中
$(function () {
var strTmp = "您的瀏覽器名稱是：";
if ($.browser.chrome) { //谷歌瀏覽器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相關瀏覽器
strTmp += "Mozilla FireFox";
}
strTmp += "<br /><br /> 版本號是：" //獲取版本號
strTmp += $.browser.version;
$(".content").html(strTmp);
});
+ 檢測瀏覽器是否屬於W3C盒子模型
瀏覽器的盒子模型分為兩類，一類為標準的w3c盒子模型，另一類為IE盒子模型，兩者區別為在Width和Height這兩個屬性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型則包含，而在jQuery 中，可以通過$.support.boxModel物件返回的值，檢測瀏覽器是否屬於標準的w3c盒子模型。
例如，根據頁面的特徵，並通過$.support.boxModel屬性的返回值，顯示當前瀏覽器是否屬於標準的w3c盒子模型
$(function () {
var strTmp = "您開啟的頁面是：";
if ($.support.boxModel) { //是W3C盒子模型
strTmp += "W3C盒子模型";
}
else { //是IE盒子模型
strTmp += "IE盒子模型";
}
$(".content").html(strTmp);
});
+ 檢測物件是否為空
在jQuery中，可以呼叫名為$.isEmptyObject的工具函式，檢測一個物件的內容是否為空，如果為空，則該函式返回true，否則，返回false值，呼叫格式如下：
$.isEmptyObject(obj);
其中，引數obj表示需要檢測的物件名稱。
例如，通過$.isEmptyObject()函式，檢測某個指定的物件是否為空
$(function () {
var obj = { "姓名": "土豪一族" };
var strTmp = "您定義了一個：";
if ($.isEmptyObject(obj)) { //檢測是否為空
strTmp += "空物件";
}
else {
strTmp += "非空物件";
}
$(".content").html(strTmp);
});
+ 檢測物件是否為原始物件
呼叫名為$.isPlainObject的工具函式，能檢測物件是否為通過{}或new Object()關鍵字建立的原始物件，如果是，返回true，否則，返回false值，呼叫格式為：
$.isPlainObject (obj);
其中，引數obj表示需要檢測的物件名稱。
例如，通過$.isPlainObject()函式，檢測某個指定的物件是否為原始，並將結果顯示在頁面中
$(function () {
var obj = "null";
var strTmp = "您定義了一個：";
if ($.isPlainObject (obj)) { //檢測是否為原始物件
strTmp += "原始物件";
}
else {
strTmp += "非原始物件";
}
$(".content").html(strTmp);
});
+ 檢測兩個節點的包含關係
呼叫名為$.contains的工具函式，能檢測在一個DOM節點中是否包含另外一個DOM節點，如果包含，返回true，否則，返回false值，呼叫格式為：
$.contains (container, contained);
引數container表示一個DOM物件節點元素，用於包含其他節點的容器，contained是另一個DOM物件節點元素，用於被其他容器所包含。
例如，通過$.contains()函式，檢測兩個節點物件間是否存在包含關係，並將檢測的結果顯示在頁面中
$(function () {
var node_a = document.body.firstChild;
var node_b = document.body;
var strTmp = "物件node_a";
if ($.contains (node_a, node_b)) { //檢測是否包含節點
strTmp += " 包含 ";
}
else {
strTmp += " 不包含 ";
}
strTmp += "物件node_b";
$(".content").html(strTmp);
});
+ 字串操作函式
呼叫名為$.trim的工具函式，能刪除字串中左右兩邊的空格符，但該函式不能刪除字串中間的空格，呼叫格式為：
$.trim (str);
引數str表示需要刪除左右兩邊空格符的字串。
例如，通過$.trim()函式，除掉一個兩邊均有空格符的字串，並將其執行前後的字元長度都顯示在頁面中
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "內容：";
var strOld = $("#txtName").val();
var strNew =$.trim (strOld);
strTmp += strOld;
strTmp += "<br/><br>除掉空格符前的長度："
strTmp += strOld.length;
strTmp += "<br/><br>除掉空格符後的長度："
strTmp += strNew.length;
$(".tip").show().append(strTmp);
});
});
+ URL操作函式
呼叫名為$. param的工具函式，能使物件或陣列按照key/value格式進行序列化編碼，該編碼後的值常用於向服務端傳送URL請求，呼叫格式為：
$. param (obj);
引數obj表示需要進行序列化的物件，該物件也可以是一個陣列，整個函式返回一個經過序列化編碼後的字串。
例如，通過$.param()函式，對指定的物件進行序列化編碼，使其成為可執行傳值的URL地址，並將該地址顯示在頁面中
$(function () {
//基本資訊物件
var objInfo = new Object();
objInfo.name = "白富美";
objInfo.sex = 1;
//序列化物件
var objNewInfo =$. param (objInfo);
//顯示序列化後的物件
var strTmp = "<b>物件 白富美 序列化後</b>：<br/><br/>";
strTmp += objNewInfo;
//顯示在頁面中
$(".tip").show().append(strTmp);
});
+ 使用$.extend()擴充套件工具函式
呼叫名為$. extend的工具函式，可以對原有的工具函式進行擴充套件，自定義類級別的jQuery外掛，呼叫格式為：
$. extend ({options});
引數options表示自定義外掛的函式內容。
例如，呼叫$.extend()函式，自定義一個用於返回兩個數中最大值的外掛，並在頁面中將外掛返回的最大值顯示在頁面中
(function ($) {
$. extend ({
"MinNum": function (p1, p2) {
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "17與18中最小的數是：";
strTmp +=$.MinNum (17, 18);
//顯示在頁面中
$(".tip").show().append(strTmp);
});
});
+ 使用$.extend()擴充套件Object物件
除使用$.extend擴充套件工具函式外，還可以擴充套件原有的Object物件，在擴充套件物件時，兩個物件將進行合併，當存在相同屬性名時，後者將覆蓋前者，呼叫格式為：
$. extend (obj1,obj2,…objN);
引數obj1至objN表示需要合併的各個原有物件。
例如，呼叫$.extend()函式對兩個已有的物件進行合併，並將合併後的新物件元素內容顯示在頁面中
$(function () {
var objInfo = { name: "" };
var objMess = { name: "白富美,", title: "歡迎與我聯絡！" };
var objNewInfo =$. extend (objInfo,objMess);
var strTmp = "<b>物件 白富美 合併後</b>：<br/><br/>";
strTmp += objNewInfo.name + objInfo.title;
//顯示在頁面中
$(".tip").show().append(strTmp);
});
捐助開發者
在興趣的驅動下,寫一個免費的東西，有欣喜，也還有汗水，希望你喜歡我的作品，同時也能支援一下。 當然，有錢捧個錢場（右上角的愛心標誌，支援支付寶和PayPal捐助），沒錢捧個人場，謝謝各位。
謝謝您的贊助，我會做的更好！