JQuery之常用插件
1、表單驗證插件validate
該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下：
$(form).validate({options})
其中form參數表示表單元素名稱，options參數表示調用方法時的配置對象，所有的驗證規則和異常信息顯示的位置都在該對象中進行設置。
例如，當點擊表單中的“提交”按鈕時，調用validate插件驗證用戶名輸入是否符合規則，并將異常信息顯示在頁面中，
?
<head><title>表單驗證插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script></head>?
?
<body><form id="frmV" method="get" action="#"><div id="divtest"><div class="title"><span class="fl">表單驗證插件</span> <span class="fr"><input id="btnSubmit" type="submit" value="提交" /></span></div><div class="content"><span class="fl">郵箱：</span><br /><input id="email" name="email" type="text" /><br /><span class="tip"></span></div></div></form><script type="text/javascript">$(function () {$("#frmV").validate({/*自定義驗證規則*/rules:{email:{required:true,email:true}},/*錯誤提示位置*/errorPlacement: function (error, element) {error.appendTo(".tip");}});});</script></body>?
?
2、表單插件form
通過表單form插件，調用ajaxForm()方法，實現ajax方式向服務器提交表單數據，并通過方法中的options對象獲取服務器返回數據，調用格式如下：
$(form). ajaxForm ({options})
其中form參數表示表單元素名稱；options是一個配置對象，用于在發送ajax請求過程，設置發送時的數據和參數。
例如，在頁面中點擊“提交”按鈕，調用form插件的
ajaxForm()方法向服務器發送錄入的用戶名和密碼數據，服務器接收后返回并顯示在頁面中，
?
<head><title>表單插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script></head><body><form id="frmV" method="post" action="#"><div id="divtest"><div class="title"><span class="fl">個人信息頁</span> <span class="fr"><input id="btnSubmit" type="submit" value="提交" /></span></div><div class="content"><span class="fl">用戶名：</span><br /><input id="user" name="user" type="text" /><br /><span class="fl">昵稱：</span><br /><input id="nick" name="nick" type="text" /><div class="tip"></div></div></div></form><script type="text/javascript">$(function () {var options = {url: "http://www.imooc.com/data/form_f.php", target: ".tip"}$("#frmV").ajaxForm(options);});</script></body>
3、圖片燈箱插件lightBox
?
該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，調用格式如下：
$(linkimage).lightBox({options})
其中linkimage參數為包含圖片的<a>元素名稱，options為插件方法的配置對象。
例如，以列表的方式在頁面中展示全部的圖片，當用戶單擊其中某張圖片時，通過引入的圖片插件，采用“燈箱”的方式顯示所選的圖片，
?
<head><title>圖片燈箱插件</title><link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script></head><body><div id="divtest"><div class="title"><span class="fl">我的相冊</span></div><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></div><script type="text/javascript">$(function () {?overlayBgColor: "#666", //圖片瀏覽時的背景色overlayOpacity: 0.5, //背景色的透明度containerResizeSpeed: 600 //圖片切換時的速度})});</script></body>
4、圖片放大鏡插件jqzoom
?
在調用jqzoom圖片放大鏡插件時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果，調用格式如下：
$(linkimage).jqzoom({options})
其中linkimage參數為包含圖片的<a>元素名稱，options為插件方法的配置對象。
例如在頁面中，添加一個被<a>元素包含的圖片元素，當在圖片元素中移動鼠標時，在圖片的右邊，將顯示放大后的所選區域效果，
?
<head><title>圖片放大鏡插件</title><link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script></head><body><div id="divtest"><div class="title"><span class="fl">圖片放大鏡</span> </div><div class="content"><a href="http://static.mukewang.com/img/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"><img src="http://static.mukewang.com/img/52e4aee700012df702130212.jpg" alt=""/></a></div></div><script type="text/javascript">$(function () {$("#jqzoom").jqzoom({ //綁定圖片放大插件jqzoomzoomWidth: 123, //小圖片所選區域的寬zoomHeight: 123, //小圖片所選區域的高zoomType: 'reverse' //設置放大鏡的類型});});</script></body>
5、cookie插件
?
使用cookie插件后，可以很方便地通過cookie對象保存、讀取、刪除用戶的信息，還能通過cookie插件保存用戶的瀏覽記錄，它的調用格式為：
保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)
其中參數key為保存cookie對象的名稱，value為名稱對應的cookie值。
例如，當點擊“設置”按鈕時，如果是“否保存用戶名”的復選框為選中狀態時，則使用cookie對象保存用戶名，否則，刪除保存的cookie用戶名，
?
<head><title>cookie插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">cookie插件</span> <span class="fr"><input id="btnSet" type="button" value="設置" /></span></div><div class="content"><span class="fl">郵箱：</span><br /><input id="email" name="email" type="text" /><br /><input id="chksave" type="checkbox" />是否保存郵箱</div></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></body>
6、搜索插件autocomplete
?
搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定后的插件將返回與字符相近的字符串提示選擇，調用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox參數為文本框元素名稱，urlData為插件返回的相近字符串數據，可選項參數options為調用插件方法時的配置對象。
例如，當用戶在文本框輸入內容時，調用搜索插件的autocomplete()方法返回與輸入內容相匹配的字符串數據，顯示在文本框下，提示選擇，
?
<head><title>搜索插件</title><link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">搜索插件</span></div><div class="content"><span class="fl">用戶名</span><br /><input id="txtSearch" name="txtSearch" type="text" /><div class="tip"></div></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></body>
7、右鍵菜單插件contextMenu
?
右鍵菜單插件可以綁定頁面中的任意元素，綁定后，選中元素，點擊右鍵，便通過該插件彈出一個快捷菜單，點擊菜單各項名稱執行相應操作，調用代碼如下：
$(selector).contextMenu(menuId,{options});
Selector參數為綁定插件的元素，meunId為快捷菜單元素，options為配置對象。
例如，選中頁面<textarea>元素，點擊右鍵，彈出插件綁定的快捷菜單，點擊菜單中的各個選項，便在頁面中顯示操作的對應名稱。
?
<head><title>右鍵菜單插件</title><link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">點擊右鍵</span></div><div class="content"><input id="btnSubmit" type="button" value="提交" /><div class="tip"></div></div><div class="contextMenu" id="sysMenu"><ul><li id="Li3"><img src="http://static.mukewang.com/img/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li><li id="Li4"><img src="http://static.mukewang.com/img/52e4b3680001424900160016.jpg" alt="" />退出</li></ul></div></div><script type="text/javascript">$(function () {$(".title").contextMenu("sysMenu",{ bindings:{'Li3': function (Item) {$(".tip").show().html("您點擊了“保存”項");},'Li4': function (Item) {$(".tip").show().html("您點擊了“退出”項");}}});});</script></body>
8、自定義對象級插件lifocuscolor插件
?
自定義的lifocuscolor插件可以在<ul>元素中，鼠標在表項<li>元素移動時，自定義其獲取焦點時的背景色，即定義<li>元素選中時的背景色，調用格式為：
$(Id).focusColor(color)
其中，參數Id表示<ul>元素的Id號，color表示<li>元素選中時的背景色。
例如，在頁面中，調用自定義的lifocuscolor插件，自定義<li>元素選中時的背景色，
?
<head><title>自定義對象級別插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">對象級別的插件</span></div><div class="content"><ul id="u1"><li><span>橘子</span><span>水果</span></li><li><span>芹菜</span><span>蔬菜</span></li><li><span>香蕉</span><span>水果</span></li></ul></div></div><script type="text/javascript">$(function () {$("#u1").focusColor("red");//調用自定義的插件})</script></body>
9、自定義類級別插件—— twoaddresult
通過調用自定義插件twoaddresult中的不同方法，可以實現對兩個數值進行相加和相減的運算，導入插件后，調用格式分別為：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述調用格式分別為計算兩數值相加和相減的結果，p1和p2為任意數值。
例如，在頁面的兩個文本框中輸入任意數值，點擊“計算”按鈕調用自定義插件中$.addNum()方法，計算兩數值的和并將結果顯示在另一文本框中，
?
?
?
?
<head><title>自定義類級別插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.twoaddresult.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">自定義類級別插件</span> <span class="fr"><input id="btnCount" type="button" value="計算" /></span></div><div class="content">兩數相減：<input id="Text1" type="text" class="txt" />-<input id="Text2" type="text" class="txt" />=<input id="Text3" type="text" class="txt" /></div></div><script type="text/javascript">$(function () {$("#btnCount").bind("click", function () {$("#Text3").val($.subNum($("#Text1").val(),$("#Text2").val()));});});</script></body>?
最近在整理一些資源工具，放在網站分享?http://tools.maqway.com
歡迎關注公眾號：麻雀唯伊 ， 不定時更新資源文章，生活優惠，或許有你想看的
?
?
?
總結
以上是生活随笔為你收集整理的JQuery之常用插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【浅析STM32之GPIO寄存器（CRL
- 下一篇： 英语考研语法--什么是英语句子？（刘晓艳