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. 20155220 吴思其 《网络攻防》 Exp1 PC平台逆向破解(5)M

    20155220 <网络攻防> Exp1 PC平台逆向破解(5)M 实践内容 通过对实践对象--20155220pwn1的linux可执行文件的修改或输入,完成以下三块: 手工修改可执行文 ...

  2. 2017-2018-1 20155330 《信息安全系统设计基础》加分项目--实现mypwd

    2017-2018-1 20155330 <信息安全系统设计基础>加分项目--实现mypwd pwd命令 命令功能:查看"当前工作目录"的完整路径. 通过man命令查看 ...

  3. VC编译连接选项详解

    VC编译连接选项详解 大家可能一直在用VC开发软件,但是对于这个编译器却未必很了解.原因是多方面的.大多数情况下,我们只停留在“使用”它,而不会想去“了解”它.因为它只是一个工具,我们宁可把更多的精力 ...

  4. 2 python介绍

    1.Python介绍:龟叔 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Gui ...

  5. 【HNOI2014】米特运输

    题面 题解 首先我们需要看懂题目 然后我们需要发现一个结论 只要有一个节点的权值确定,那么整棵树的权值就确定了 就像这样:(图片来源于网络,侵删) 然后我们根据这张图片,可以设\(f[i] = a[i ...

  6. CF 258 D. Little Elephant and Broken Sorting

    D. Little Elephant and Broken Sorting 链接 题意: 长度为n的序列,m次操作,每次交换两个位置,每次操作的概率为$\frac{1}{2}$,求m此操作后逆序对的期 ...

  7. 运行用例时，报错Unknow Error：Element xxx is not clickable……的解决方法

    P.S:近期selenium官方更新了版本以解决此问题 通常这种情况是由于在点击该元素时,js更换了元素属性造成的. 所以可以采用js的方式进行处理 方法如下: WebDriver driver = ...

  8. leetcode_11. Container With Most Water

    leetcode_11. Container With Most Water 一,问题: Given n non-negative integers a1, a2, ..., an, where ea ...

  9. CentOS7的安装与配置

    Linux系统以前接触的不多,主要是公司的网站部署在了一台安装了Ubuntu系统的机器上.是典型的LAMP架构的产物,因为偶而需要更新网站内容及需要定期备份.所以学习了一些Ubuntu & A ...

  10. mac指令备忘

    在这里简单记录下最近使用的快捷键,备忘,随时更新. 简单指令记录 mkdir 创建路径 pwd 输出当前路径 ls 查看目录 cd touch 创建文件 tree 输出目录树 mv 源文件 目标文件或 ...