Jquery常用插件總結(jié)

1.表單驗證插件——validate

$(form).validate({options})

            $(function () {
                $("#frmV").validate(
                  {
                      /*自定義驗證規(guī)則*/
                      rules: {
                            email:{
                            required:true,
                            email:true,
                          }
                      },
                      /*錯誤提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
2.表單插件——form

通過表單form插件,調(diào)用ajaxForm()
方法,實現(xiàn)ajax方式向服務(wù)器提交表單數(shù)據(jù),并通過方法中的options對象獲取服務(wù)器返回數(shù)據(jù),調(diào)用格式如下:
$(form). ajaxForm ({options})

$(function () {
                var options = {
                    url: "http://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
3.圖片燈箱插件——lightBox

該插件可以用圓角的方式展示選擇中的圖片,使用按鈕查看上下張圖片,在加載圖片時自帶進度條,還能以自動播放的方式瀏覽圖片,調(diào)用格式如下:
$(linkimage).lightBox({options})

$(function () {
                 $(".divPics a").lightBox({
                    overlayBgColor: "#666", //圖片瀏覽時的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //圖片切換時的速度
                })
            });
4.圖片放大鏡插件——jqzoom

在調(diào)用jqzoom圖片放大鏡插件時,需要準備一大一小兩張一樣的圖片,在頁面中顯示小圖片,當鼠標在小圖片中移動時,調(diào)用該插件的jqzoom()
方法,顯示與小圖片相同的大圖片區(qū)域,從而實現(xiàn)放大鏡的效果,調(diào)用格式如下:
$(linkimage).jqzoom({options})

$(function () {
                $("#jqzoom").jqzoom({//綁定圖片放大插件jqzoom
                    zoomWidth: 200, //小圖片所選區(qū)域的寬
                    zoomHeight: 300, //小圖片所選區(qū)域的高
                    zoomType: 'reverse' //設(shè)置放大鏡的類型
                });
            });
5.cookie插件——cookie

保存:$.cookie(key,value);讀?。?code>$.cookie(key),刪除:$.cookie(key,null)

6.搜索插件——autocomplete

$(textbox).autocomplete(urlData,[options]);
其中,textbox參數(shù)為文本框元素名稱,urlData為插件返回的相近字符串數(shù)據(jù),可選項參數(shù)options為調(diào)用插件方法時的配置對象。

7.右鍵菜單插件——contextmenu

右鍵菜單插件可以綁定頁面中的任意元素,綁定后,選中元素,點擊右鍵,便通過該插件彈出一個快捷菜單,點擊菜單各項名稱執(zhí)行相應(yīng)操作,調(diào)用代碼如下:
$(selector).contextMenu(menuId,{options});
Selector參數(shù)為綁定插件的元素,meunId為快捷菜單元素,options為配置對象。

8.自定義對象級插件——lifocuscolor插件

自定義的lifocuscolor插件可以在<ul>元素中,鼠標在表項<li>元素移動時,自定義其獲取焦點時的背景色,即定義<li>元素選中時的背景色,調(diào)用格式為:
$(Id).focusColor(color)
其中,參數(shù)Id表示<ul>元素的Id號,color表示<li>元素選中時的背景色。

9.自定義類級別插件—— twoaddresult

通過調(diào)用自定義插件twoaddresult中的不同方法,可以實現(xiàn)對兩個數(shù)值進行相加和相減的運算,導入插件后,調(diào)用格式分別為:
$.addNum(p1,p2) , $.subNum(p1,p2)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容