jQuery-jQuery插件

萧宁
2023-12-01

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/

 类似资料: