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 -*- li=[11,22,33,44,55] r= filter(lambda x:x>22,li) prin ...

  2. VI ORB-SLAM初始化与VINS初始化对比(将vi orb-slam初始化方法移植到vins中)

    初始化时需要求出的变量:相机和imu外参r t.重力g.尺度s.陀螺仪和加速度计偏置ba bg. 下面对两种算法初始化的详细步骤进行对比: 求陀螺仪偏置bg 求解公式相同,求解方法不同.公式如下,VI ...

  3. 如何用python获取文件中的某一行——python小技巧

    很多人有的时候只需要获取文章中的固定的一行,那么我知道这一行,我需要怎么样去获取呢 可能会有人说读取这一行,如果这一行是已什么开头的就读出来, 其实还有一种办法,就是我知道文件的路径.知道我要取的行数 ...

  4. linux 修改文件最大数

    ulimit -a 查看所有 open files (-n) 1024 是linux操作系统对一个进程打开的文件句柄数量的限制(也包含打开的套接字数量) ulimit -SHn 10000 ##临时修 ...

  5. dbutis事务管理

    1.在dao层用dbutils实现事务管理 //从a--->b帐户转100元 public void transfer() throws SQLException{ Connection con ...

  6. SpringCloud使用Feign出现java.lang.ClassNotFoundException: org.springframework.cloud.client.loadbalancer.LoadBalancedRetryFactory异常

    废话不多说!!! 在SpringCloud项目中配置了Feign来调用restful接口,项目启动的时候报错,报错信息如下: 找不到org.springframework.cloud.client.l ...

  7. [算法总结] 20 道题搞定 BAT 面试——二叉树

    本文首发于我的个人博客:尾尾部落 0. 几个概念 完全二叉树:若二叉树的高度是h,除第h层之外,其他(1~h-1)层的节点数都达到了最大个数,并且第h层的节点都连续的集中在最左边.想到点什么没?实际上 ...

  8. Ubuntu下配置Anaconda

    转自:https://blog.csdn.net/Horcham/article/details/57075388 安装Anaconda Ubuntu下似乎库中不自带Anaconda,是自带纯净的py ...

  9. vue mock(模拟后台数据) 最简单实例（一）——适合小白

    开发是前后端分离,不需要等待后台开发.前端自己模拟数据,经本人测试成功. 我们在根目录新建存放数据的json文件,存放我们的数据data.json //data.json{ "status& ...

  10. Stack Overflow访问问题的处理

    一直以来都有访问stackoverflow的习惯,但是老是因为js的问题让人很多操作都操作不了,而且打开的速度也很慢. 原因其实就是stackoverflow使用的google的cdn,于是想彻底一点 ...