第7章 jQuery插件的編寫和使用

時間 2019-11-26

原文原文鏈接

第7章 jQuery插件的編寫和使用javascript

經常使用的jQuery插件
1 表單驗證插件 formValidator
做用:爲了簡化客戶端流程,提升代碼的重用性
formValidator支持的五大校驗方式以下:
inputValidator:針對input,textarea,select控件的字符長度,值範圍和選擇個數的控制.
compareValidator:共兩個對象比較(支持比較字符串和數值型).
ajaxValidator:經過ajax到服務器上作數據校驗.
regexValidator:針對一些驗證,如正則表達式
functionValidator:使用外部函數來作校驗.
formValidator中注意全局配置要初始化,即initConfig().css

示例:用formValidator驗證學號是否存在html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../validator.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../formValidator.js" type="text/javascript"></script>
    <script src="../formValidatorRegex.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $.formValidator.initConfig({
                formID:"form1",
                onError:function(){alert("對不起，驗證沒有經過，請查看錯誤消息！");}
            });
            $("#txtStuNo").formValidator({
                onShow:"請輸入學號",
                onFocus:"輸入學生編號",
                onCorrect:"謝謝您的配合"
            }).regexValidator({
                        regExp:"notempty",
                        dataType:"enum",
                        onError:"學號必填"
                    }).ajaxValidator({
                        type:"get",
                        url:"http://localhost:1105/MyHandler.ashx",
                        dataType:"text",
                        success:function(data){
                            if(data=="ok")
                            {
                                return true;
                            }
                             else
                            {
                                return false;
                            }
                        },error:function(){alert("服務器沒有返回數據，可能服務器忙，請重試")},onError:"該學號已經存在",
                        onWait:"正在對學號進行校驗，請稍後...."
                    });
        });

    </script>
</head>
<body>
      <form id="form1">
          <table>
              <tr>
                  <td>學號：<input type="text" id="txtStuNo"/></td>
                  <td><div id="txtStuNoTip"></div></td>
              </tr>
          </table>
      </form>
</body>
</html>

View Code

2 動態綁定事件插件-livequery
做用:爲動態生成的控件去追加事件處理.
bind(),live(),livequery()三者之間的區別:
bind():已存在元素的註冊事件.
live():動態添加的元素的註冊事件.它與livequery的區別在於live()不支持movseover,focus,blur等屬性,而livequery卻支持.
livequery還有一個用法是觸發回調函數.
示例1:java

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("a").live("click",function(){
                alert("Live()方法");
            });
            $("body").append("<a href='#'>超連接B</a>");
        });
    </script>
</head>
<body>
      <a href="#">超連接A</a>
</body>
</html>

3 jQuery UI插件
做用:實現了界面表達的易用化.
jQuery UI主要分爲3個部分,交互,微件和效果庫.
使用此插件一般會用到Sortable(排序)庫jquery

4.Cookie插件
它是一種輕量級的插件.一般用於用戶填寫完用戶名後,單擊下面的"記住用戶名"複選框,使之處於選中狀態.
寫如Cookie的語法以下:
$.cookie(cookie_name,cookie_value,{path:'/',expires:time});
參數說明:
cookie_name:待寫入的Cookie名;
cookie_value:爲待寫入的值.
expries:(Number|Date)Cookie值得有效期.
path:cookie的路徑屬性.ajax

插件的種類:
1 封裝對象方法的插件
2 封裝全局函數的插件
3 選擇器插件
注意:插件應返回一個jQuery對象,以保證插件的可鏈式操做.正則表達式