1. 表單驗證插件——validate
該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下：$(form).validate({options})
其中form參數表示表單元素名稱，options參數表示調用方法時的配置對象，所有的驗證規則和異常信息顯示的位置都在該對象中進行設置。
<form id="frmV" method="get" action="#">
<input name="email" type="text" />
<span class="tip"></span>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定義驗證規則*/
rules: {
email:{
required: true,
email: true
}
},
/*錯誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
2. 表單插件——form
通過表單form插件，調用ajaxForm()方法，實現ajax方式向服務器提交表單數據，並通過方法中的options對象獲取服務器返回數據，調用格式如下：$(form). ajaxForm ({options})
其中form參數表示表單元素名稱；options是一個配置對象，用於在發送ajax請求過程，設置發送時的數據和參數。
<form id="frmV" method="post" action="#">
<input id="nick" name="nick" type="text" />
<div class="tip"></div>
</form>
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
3. 該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，調用格式如下：$(linkimage).lightBox({options})
其中linkimage參數爲包含圖片的<a>元素名稱，options爲插件方法的配置對象。
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇風景圖片">
<img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇風景圖片">
<img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇風景圖片">
<img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("a").lightBox({
overlayBgColor: "#666", //圖片瀏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
});
});
</script>
4. 圖片放大鏡插件——jqzoom
在調用jqzoom圖片放大鏡插件時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果，調用格式如下：$(linkimage).jqzoom({options})
其中linkimage參數爲包含圖片的<a>元素名稱，options爲插件方法的配置對象。
<div class="content">
<a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
<script type="text/javascript">
$(function () {
$("a").jqzoom({ //綁定圖片放大插件jqzoom
zoomWidth: 123, //小圖片所選區域的寬
zoomHeight: 123, //小圖片所選區域的高
zoomType: 'reverse' //設置放大鏡的類型
});
});
</script>
5. cookie插件——cookie
使用cookie插件後，可以很方便地通過cookie對象保存、讀取、刪除用戶的信息，還能通過cookie插件保存用戶的瀏覽記錄，它的調用格式爲：
保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)
其中參數key爲保存cookie對象的名稱，value爲名稱對應的cookie值。
<div class="content">
<span class="fl">郵箱：</span><br />
<input id="email" name="email" type="text" /><br />
<input id="chksave" type="checkbox" />是否保存郵箱
</div>
<script type="text/javascript">
$(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: "/"
})
}
});
});
</script>
6. 搜索插件——autocomplete
搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇，調用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox參數爲文本框元素名稱，urlData爲插件返回的相近字符串數據，可選項參數options爲調用插件方法時的配置對象。
<div class="content">
<span class="fl">用戶名</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
<script type="text/javascript">
$(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));
}
});
</script>