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. Linux下查看Mysql数据库端口的方法

    mysql 默认的端口是 3306,但是如果在安装的时候,修改了mysql的默认端口的话,可以采用以下方式查看 第一种方法: 直接查看数据库的配置文件 在/etc/mysql/my.cnf(Linux ...

  2. 20145234黄斐《Java程序设计》课程总结

    每周作业链接汇总 预习作业一:http://www.cnblogs.com/taigenzhenjun/p/6492903.html 对专业的期望 预习作业二:http://www.cnblogs.c ...

  3. hashMap put的返回值测试

    @Testpublic void findOne() throws Exception { HashMap<Integer,Integer> hashMap = new HashMap&l ...

  4. 远端访问MySQL

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  5. jQuery学习- 获取与设置属性的函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. QtWidgets Module's Classes

    Qt Widgets C++ Classes The Qt Widgets module extends Qt GUI with C++ widget functionality. More... A ...

  7. [BZOJ2742][HEOI2012]Akai的数学作业[推导]

    题意 给定各项系数,求一元 \(n\) 次方程的有理数解. \(n\leq 100\). 分析 设答案为 \(\frac{p}{q}\) ,那么多项式可以写成 \(a_0\frac{p}{q}+a_1 ...

  8. NGUI可展开列表的实现

    本文来自网易云社区 作者:汪毅军 最近使用了NGUI做了下可展开列表,其主要思路如下:首先最外层使用Scroll view以达到滑动效果,然后列表使用UITable进行排列,最后通过点击Item控制I ...

  9. javascript中encodeURI和decodeURI方法使用介绍

    encodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误, 所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字 ...

  10. C# string 的一点属性、方法什么的

    今天学的基本可以说是都属于方法和属性 下面这两句话非常重要,确实非常重要 凡是可以  “ . ”     出来的,前面是黑色的小扳手的:属性 紫色的立方体的:方法 这个对于以后自学帮助是不小的,当然, ...