流程
/***

     * 1.文件命名

     *      jquery.banner.1.0.0.js

     *      jquery.banner.js

     * 2、添加匿名函数

     *      (function(){})()

     * 3、给插件前后添加;

     *      ;(function(){})();

     * 4、开启严格模式 --- 代码的严谨性 ----- 但不是必须

     *      'use strict';

     * 5、给匿名函数传入jQuery

     *      ;(function($){})(jQuery);

     * 6、给插件中jQuery绑定适用的方法

     *

     * 7、开发功能

     * */

绑定的6种方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>给jquery绑定方法</title>

</head>

<body>

</body>

<script src="../../jquery.js"></script>

<script>

    /***

     * 1.文件命名

     *      jquery.banner.1.0.0.js

     *      jquery.banner.js

     * 2、添加匿名函数

     *      (function(){})()

     * 3、给插件前后添加;

     *      ;(function(){})();

     * 4、开启严格模式 --- 代码的严谨性 ----- 但不是必须

     *      'use strict';

     * 5、给匿名函数传入jQuery

     *      ;(function($){})(jQuery);

     * 6、给插件中jQuery绑定适用的方法

     *

     * 7、开发功能

     * */

     // 1、使用对象形式，给jQuery绑定了一个  全局  的方法  如:$.cookie()

      jQuery.test = function () {

          console.log('测试')

      }

      $.test();

    // 2、使用对象形式，给jQuery绑定一个  局部 (DOM)  的方法  如:$('form').validate()

//     jQuery.fn 局部

     jQuery.fn.test = function () {

         console.log('局部测试')

     };

     $().test();

    // $.extend() 的第一个参数是目标 对象，会将后面的对象或者方法合并到第一个中

    // https://www.runoob.com/jquery/misc-extend.html

     var data1 = { a: 1 };

     var data2 = { b: 2 };

     var data3 = $.extend(data1, data2)

     var data4 = $.extend({}, data1, data2)

     console.log(data1) // { a: 1, b: 2}

     console.log(data2) // { b: 2 }

     console.log(data3) // { a: 1, b: 2}

     console.log(data4)

    // 3、使用jq中的$.extend() 扩展自己的函数 --- 全局的方法 -- 2个参数

     $.extend($, {

         test: function () {

            console.log('$.extend() 扩展自己的函数')

         }

     })

     $.test()

    // 4、使用jq中的$.extend() 扩展自己的函数 --- 局部的方法 - DOM -- 2个参数

     $.extend($.fn, {

         test: function () {

            console.log('$.extend() 扩展自己的函数')

         }

     })

     $().test()

    // $.extend(target, obj1, obj2...)

    //  如果只为$.extend()指定了一个参数，则意味着参数target被省略。

    // 此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。

    // 5、使用jq中的$.extend() 扩展自己的函数 -- 全局

     $.extend({

         test () {

             console.log('test')

         }

     })

     $.test();

    // $.fn.extend({}) 如果只有一个参数，会把该对象合并到 $.fn中

    // 6、使用jq中的$.extend() 扩展自己的函数 -- 局部

    $.fn.extend({

        test () {

            console.log('fn-test')

        }

    });

    $().test()

    /***

     * 总结

     *  最常见的给jquery绑定方法的是

     *      第 5 + 6 种

     *

     *  全局

     *      $.extend({})

     *  局部

     *      $.fn.extend({})

     * */

</script>

</html>

jQuery绑定方法的更多相关文章

  1. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  2. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  3. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  4. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  5. jQuery事件绑定方法bind、 live、delegate和on的区别

    我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...

  6. 关于JQuery的绑定方法

    从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,j ...

  7. [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析

    问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...

  8. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  9. 完美的jquery事件绑定方法on()

    在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,使用方法例如以下: $("#info_table td& ...

  10. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

随机推荐

  1. echarts 画图报错 this.dom.getContext is not a function

    我给 <el-card>绑定了ref,利用$refs获取 echarts实例  const echarts1 = echarts.init(this.$refs.echarts1); 结果 ...

  2. gcc的编译过程

    1. 预处理,生成 .i 的文件.(input) 2. 将 .i的文件转换成汇编语言,生成 .s 的文件 3.生成机器语言文件,.o的文件 4.连接目标代码,生成可执行文件 .out

  3. C#——》发布ASP.NET Core项目到Windows IIS服务器中环境部署

    服务器:Windows Server2012 R2 IIS:8 .net Core版本:1.1.2 一,在VS中点击项目-->依赖项-->SDK下可以查看当前项目.Net core是哪个版 ...

  4. UCID数据集

    UCID数据集,做实验使用, 免费分享. 自取 链接:https://pan.baidu.com/s/1etMgXShdd_tJFHWbP3ipNw 提取码:62ww

  5. QThead实现模拟VC线程函数

    // 头文件 #ifndef QTHREADBASE_H #define QTHREADBASE_H #include <iostream> #include <stdlib.h&g ...

  6. JMeter参数化（二）--数据库参数化

    1.下载mysql驱动,解压得到mysql-connector-java-8.0.17.jar(驱动一般放在java的 \java\jre\lib\ext 路径下): 2.在 测试计划-->浏览 ...

  7. Spring 笔记二 IOC

    1.IOC IOC:Inversion  od  controller ,控制反转,控制的是资源的获取方式,由原来的自己创建 new 变成 Spring 容器创建. DI:Dependency  In ...

  8. 运行python脚本报错SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape

    运行python脚本报错 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes  in position 2-3: ...

  9. jxg项目Day2-git

    申请了我自己的gitee账号,建了我的仓库,在idea中点这个,然后就算漫长的自动下载的过程.. 对分支和冲突的理解:每个人都有自己的develop分支,可以commit到本地的分支,可以push到远 ...

  10. mac安装mysql5.6默认密码修改

    前言: 每次安装mysql都被烦的要死,痛并思痛记下此篇文章: 参考: https://blog.csdn.net/u010377383/article/details/82688250 https: ...