文章
238
标签
95
分类
12
主页
归档
标签
分类
友情链接
关于我
列表
目录
  1. 1. 通过几个案例需求来了解Jquery如何扩展方法
    1. 1.1. 需求
      1. 1.1.1. 给 $ 添加4个工具方法:
        1. 1.1.1.1. jQuery.extend()
      2. 1.1.2. 给jQuery对象 添加3个功能方法:
        1. 1.1.2.1. $.fn.extend()
  2. 2. JQ常用插件
JQ扩展插件
|前端
字数总计: 504|阅读时长: 2 分钟|阅读量:

通过几个案例需求来了解Jquery如何扩展方法

需求

给 $ 添加4个工具方法:

  • min(a, b) : 返回较小的值
  • max(c, d) : 返回较大的值
  • leftTrim() : 去掉字符串左边的空格
  • rightTrim() : 去掉字符串右边的空格

jQuery.extend()

jquery_plugin.js

(function(){
   jQuery.extend({
	   min:function(a, b){
		   return a < b ? a : b;
	   },
	   max:function(c, d){
		   return c > d ? c : d;
	   },
	   leftTrim: function(str){
		   return str.replace(/^\s+/, '')
	   },
	   rightTrim:function(str){
		   return str.replace(/\s+$/, '')
	   }
   })
})()

页面

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_plugin.js"></script>
<script type="text/javascript">
    console.log($.min(3, 5), $.max(3, 5))
    var string = '   my atguigu    '
    console.log('-----' + $.leftTrim(string) + '-----')
    console.log('-----' + $.rightTrim(string) + '-----')
</script>

给jQuery对象 添加3个功能方法:

$.fn.extend()

jquery_plugin.js

(function(){

  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })
})()

页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>25_扩展插件</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全　选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_plugin.js"></script>
<script type="text/javascript">

  var $items = $(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.checkAll()
  })
  $('#checkedNoBtn').click(function () {
    $items.unCheckAll()
  })
  $('#reverseCheckedBtn').click(function () {
    $items.reverseCheck()
  })
</script>
</body>
</html>

JQ常用插件

  • jquery-validation：表单验证插件
  • jqueryUI： 是一组用户界面交互、特效、小部件及主题
  • laydate：日期与时间组件
文章作者: Jachie Xie
文章链接: https://xjc5772.github.io/2020-05/27/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/JQ/JQ%E6%89%A9%E5%B1%95%E6%8F%92%E4%BB%B6/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog！
前端 jQuery 插件
打赏
  • 微信
  • 支付宝
相关推荐
jqueryUI插件
jquery-validation插件
多库共存
评论
繁