一、说明

jQuery插件官网:http://plugins.jquery.com/

运用插件时引用顺序:插件引用要放在主jquery库之后。

仲、插件应用实例

示范插件jquery.validate.js的用办法:

①引用jQuery主库和validate插件。

注意:

  • jQuery主库要早插件引用;
  • 如若想显示中文错误提醒,还索要引用jquery.validate.messages_cn.js。



    请输入下列资料
    标题:

    *

②安装验证规则,注意name要和控件对应。

<script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      title: { required: true, minlength: 5,maxlength:18 }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
    </script>

其三、自定义插件

1.插件分类:

  • 包装方法插件:对象插件
  • 封闭函数插件:类插件

2.插件开发注意事项

①插件命名格式: jquery.[插件名].js;

②负有插件都该因分行;起先,制止压缩插件之后出现谬误;为了保险JQuery的链式写法是,插件本身要回到一个jQuery对象;

③于插件内部,this代表采取器选中的靶子,和平日之this含义不绝雷同;

④为了制止冲突,在编辑插件时尽量采纳jQuery而非是$符号;

⑤对象级别插件所有办法都依附于jquery.fn主体对象;类级别插件所有术都依附于jquery对象。

⑥编纂对象级别插件是由此jQuery.fn.extend()方法开展扩张,编写类级别插件时凡用jQuery.extend()方法举办扩张。

2.对象插件示例:

插件效能相比较简便,当鼠标经过菜单项时自动切换背景颜色。

首先定义插件jquery.color.js

; (function($) {
    $.fn.extend({
          "focusColor":function (color) {
              var def_col = "#ccc";
              var list_bg = "#fff";
              color = (color == undefined )? def_col : color;
              $(this).find("li").each(function() {
                  $(this).mouseover(function() {
                      $(this).css("background-color", color);
                  }).mouseout(function() {
                      $(this).css("background-color", list_bg);
                  });
              });
              return $(this);
          }
    });
})(jQuery);

调用:

<script type="text/javascript">
        $(function() {
            $("#u1").focusColor("green");//调用自定义的插件
        })
    </script>

3.类插件示例:

定义类级别插件jquery.calc.js。

;$(function () {
    $.extend({
        "addNum": function (a, b) {
            a = a || 0;
            b = b || 0;
            return parseInt(a) + parseInt(b);
        }
    });
})(jQuery);

调用:

<script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); 
        })
    </script>

相关文章

网站地图xml地图