jQuery有多好用，大家有目共睹的，但是有时候不是每个功能都是万能的，有时候我们需要实现自己的功能，jQuery提供了很好的拓展功能，我们可以去拓展插件，更好的利用jQuery

查看官网，可知，有两个拓展的方式，

第一：$工具方法

第二：$对象的方法

由于jQuery都是建立在自执行函数的，所以你自己写的插件必须也是自执行函数

好了，我就实现了几个功能，得到最大最小值，全选是否

废话少说辣，直接上来代码：

//自定义的插件

(function(){

    //扩展jQuery工具方法

    $.extend({

        min:function(a,b){

            return a < b ? a : b

        },

        max:function(a, b){

            return a > b ? a : b

        },

        leftTrim:function(string){

            return string.replace(/^\s+/,'')

        },

        rightTrim:function(string){

            return string.replace(/\s+$/,'')

        },

    })

    //$对象方法

    $.fn.extend({

        checkAll:function(){

            this.prop("checked",true)

        },

        unCheckAll:function(){

            this.prop("checked",false)

        },

        reverseCheck:function(){

            console.log(this)

            this.each(function(){

                console.log(this)

                this.checked = !this.checked

            })

        }

    })

})()

下面来几个例子来调用看看能不能实现啦，注意了，我们自定义的插件也是要建立在jQuery的插件之上的，所以顺序的事情大家就应该知道辣

<!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="反选"/>

<!--

1. 扩展jQuery的工具方法

  $.extend(object)

2. 扩展jQuery对象的方法

  $.fn.extend(object)

-->

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

<script src="../../js/my_plugin.js" type="text/javascript"></script>

<script type="text/javascript">

  /*

   需求：

   1. 给 $ 添加4个工具方法:

     * min(a, b) : 返回较小的值

     * max(c, d) : 返回较大的值

     * leftTrim() : 去掉字符串左边的空格

     * rightTrim() : 去掉字符串右边的空格

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

     * checkAll() : 全选

     * unCheckAll() : 全不选

     * reverseCheck() : 全反选

   */

  var str = 'rainbow cai   '

//console.log($.min(3,5))

//console.log($.max(3,5))

//console.log($.leftTrim(str))

//console.log($.rightTrim(str))

var $items = $(":checkbox[name='items']")

$("#checkedAllBtn").on("click",function(){

    $items.checkAll()

})

$("#checkedNoBtn").click(function(){

    $items.unCheckAll()

})

$("#reverseCheckedBtn").click(function(){

    $items.reverseCheck()

})

</script>

</body>

</html>

好啦好啦，最近太忙，已经很久没有继续更博了，接下来的时间希望可以继续更博，不断的监督自己。

jQuery扩展插件的更多相关文章

  1. jQuery扩展插件以及正则相关函数练习

    一.jQuery扩展插件 二.相关正则函数:

  2. Angular TypeScript开发环境集成jQuery扩展插件

    集成步骤: 1.安装jquery极其扩展插件库ts定义文件 npm install jquery --save npm install --save-dev @types/jquery npm ins ...

  3. jquery 扩展插件方法

    分析插件jquery.countdown.js (function($) { $.fn.countdown = function(options) { // default options var d ...

  4. jQuery扩展插件和拓展函数的写法

    <script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function ...

  5. JQuery扩展插件Validate—5添加自定义验证方法

    从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,下面的示例中添加了一个 ...

  6. jquery扩展插件，让demo元素也可以resize

    (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout&q ...

  7. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  8. 再谈：jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  9. jquery编写插件

    jquery编写插件的方法    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...

随机推荐

  1. python基础学习1-描述符

    #!/usr/bin/env python # -*- coding:utf-8 -*- #描述符就是将某种特殊类型的类的实例指派给另一个类的属性 #特殊类型指 实现了 # __get__(self, ...

  2. 02-分页器，自定义分页器，解耦函数分页器，分页器class

    1 .批量数据导入 主url from django.contrib import admin from django.urls import path, re_path, include urlpa ...

  3. JDBC注册驱动的三种方式(MySQL)

    第一种:通过反射Class.forName("com.mysql.jdbc.Driver"); 第二种:通过DriverManage的静态方法DriverManager.regis ...

  4. 日常的例子说明 throttle 和 debounce 的区别

    不小心接触到 throttle 和 debounce,按捺不住猎奇的心理,找这两个函数的资料. 然而百度到的各种对他们的理解,我去啊. 艰难地搞明白他们是干嘛的之后,忍不住举个例子说说自己的理解,希望 ...

  5. 大同世界的Java 和.NET 开发

    1.作为一个科班出生的根正苗红的软件开发人员,我认为现在的一群年轻的程序员总是在讨论JAVA  好还是.NET 好的同时,我作为一个做4年开发的.NET 程序员中间穿插了1年JAVA 开发的来说更加的 ...

  6. .net 分布式学习计划

    一: 1:.net分布式系统架构的思路     https://blog.csdn.net/slowlifes/article/details/53162014 2: nginx+iis实现负载均衡 ...

  7. 图片缩放插件GestureImageView——Android 常用插件推荐(一)

    Android 开发过程中,交互效果是一个非常繁琐的过程,甚至比Web开发过程中JS特效更加复杂.通过多年的发展,常用的交互方式已经发展相当成熟,而且有很多非常好的插件.为了避免重复造轮子,一些常用的 ...

  8. 安装vs2017后，RDLC 报表定义具有无法升级的无效目标命名空间

    原先的RDLC报表定义用的命名空间是2008,用vs2017报表设计器重新保存后,会自动升级成2016,导致无法使用. 不想升级控件,太麻烦,所以就手动修改RDLC文件吧. 1.修改http://sc ...

  9. css布局笔记（二）Flex

    flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...

  10. 域名配置https

    阿里可以一年的免费申请https证书 (1)域名->管理->免费开启SSL证书 (2)申请完.等待审核后就可以下载证书压缩包,包括key和pem两个文件 (3)在服务器的nginx目录下创 ...