流程
/***

     * 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. GitLab版本定版

    定版指令: git add -Agit commit -m ""git push origin develops:V5.2

  2. mysql之数据表基本操作-第四篇

    在关系型数据库中,数据表是一系列二维数组的集合,用来存储数据和操作数据的逻辑结构. 1.创建表,以创建一个简单的员工表为例: create table employee ( empId INT(11) ...

  3. SpringBoot测试类注入Bean失败原因

    首先针对SpringBoot的测试类,2.2版本之前和2.2版本之后是不一样的,在2.2版本之前需要贴注解@SpringBootTest和@RunWith(SpringRunner.class)需要在 ...

  4. opencv3 7.3 重映射 仿射变换

    重映射的概念 将一幅图像某位置的像素放置到另外一幅图像的指定位置上,需要对非整数像素坐标重映射来表达每个像素的新位置. g(x,y)=f(h(x,y)); 实现重映射 remap()函数 dst(x, ...

  5. daimayuan第三课（哈希，堆）

    1:哈希 建立:拉链法: a:数组 #include <bits/stdc++.h> using namespace std; const int md = 1e9; int h[1000 ...

  6. 12.6linux学习第十三天

    今天老刘开始讲第9第章使用ssh服务管理远程主机.第10章开了个小头. 9.1 配置网卡服务 9.1.1 配置网卡参数 截至目前,大家已经完全可以利用当前所学的知识来管理Linux系统了.当然,大家的 ...

  7. NOIP2009普及组

    T3]细胞分裂 [算法]数论 [题解]均分的本质是A整除B,A整除B等价于A的质因数是B的子集. 1.将m1分解质因数,即m1=p1^a1*p2^a2*...*pk^ak 所以M=m1^m2=p1^( ...

  8. 【omr】linux配置omr识别项目moonlight环境

    最近又做了第n次moonlight的环境配置 moonlight是相对成熟的omr系统 这里记录环境配置的基本步骤 (总的来说主要是用conda新建符合程序要求的python版本 然后装好bazel和 ...

  9. Python - XSS-Attribute

    参考资料:https://owasp-skf.gitbook.io/asvs-write-ups/cross-site-scripting-attribute-xss-attribute/kbid-3 ...

  10. JavaScript 字符串和正则相关的方法

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