第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对象,以保证插件的可链式操做.正则表达式