[JavaScript知识库]jQuery-jQuery插件

jQuery-jQuery插件

1. 扩展插件

   扩展jQuery对象的方法

   —语法：$.fn.extend(object)

   —这里面的this为jQuery对象，即$(xxx)

   —例如为jQuery对象添加功能方法，调用时$().fn()：

   (function(){
   //扩展jQuery对象的方法
   $.fn.extend({
     //增加全选功能
     checkAll:function(){
         //当前this为jQuery对象
         this.prop('checked',true)
     },
     //增加全不选功能
     unCheckAll:function(){
         this.prop('checked',false)
     },
     //增加反选功能
     reverseCheck:function(){
         //这里的this为jQuery对象
         this.each(function(){
             //这里的this为DOM元素
             this.checked = !this.checked
         })
     }
   })
   })()
   

   扩展jQuery的工具方法

   —基于jQuery库编写的扩展方法；

   —语法：$.extend(object)

   —这里面的this指向$

   —例如：给$添加四个工具方法：新建一个js文件，然后再页面中引入添加了扩展方法的js文件，调用时$.fn()；

   (function(){
   //扩展$的方法
   $.extend({
   //返回较小值的工具方法
   min:function(a,b){
      return a<b ? a : b
   },
   //返回较大值的工具方法
   max:function(a,b){
      return a>b ? a : b
   },
   //去掉字符串左边的空格
   leftTrim:function(str){
      return str.replace(/^\s+/,'')
   },
   //去掉字符串右边的空格
   leftTrim:function(str){
      return str.replace(/\s+$/,'')
   }
   })
   })()
   

2. jQuery插件

   jQuery-Validate插件

   —表单声明式验证插件，只需要声明各种验证规则；

   —可以在官网搜索下载插件；目前已经不存在了；

   —可以依照插件，引入相对应的js库、js插件文件；

   —可以参考插件的语法进行修改自身代码；

   —一般需要对写好的表单对象开启验证：$(表单id).validate()，可以传递参数，即可以自定义表单验证错误的默认文本提示；

   jQuery-UI插件

   —用户接口插件；

   —可以将插件相对应的js文件和样式文件拷贝到自身代码下；

   —开启UI效果语法：$(容器id).fun();其中fun()为插件中定义的各种效果函数；

   laydate插件

   —日期插件；

   —相关网站：https://www.layui.com/