流程
/***

     * 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. （论文笔记）Deep Neural Network for YouTube Recommendation

    YouTube推荐系统上的深度神经网络 [总结] 在召回模型中,用到的特征比较粗,在训练过程中,目的是训练出一个用户向量u(通过用户本身的浏览和观看信息和统计学信息,假设是N维的),用户向量的用途分两 ...

  2. pads:数据格式不正确，网络必须包含一个以上管脚

    1,如果已经有pcb封装,则在pads logic软件里面-元件编辑器-重新做封装,在--编辑电参数--里面匹配对应pcb封装, 2,点击-工具--,--从库中更新--,更新一下,之后导入pcb la ...

  3. bat脚本批量删除指定源码编译后的文件

    @echo off @REM 使循环内的set命令有效 setlocal enabledelayedexpansion set DIR_ROOT=%~dp0..\ for /f "delim ...

  4. 【Operating System】——An interesting question on Process Creation

    In the book Operating System Concepts- 9th Edition - Chapter 3 - Page 117 - Page 120 it says: How do ...

  5. win10 系统 腾讯云服务器 部署网站 并进行访问

    1.首先需要一个服务器 我是用的Windows系统 我用的是腾讯云的服务器(因为便宜) 然后给服务器重置密码 然后用重置后的密码 用户名 用远程桌面连接登录试试 远程桌面连接成功 然后回到服务器网站 ...

  6. GPS时钟之户外防水防雷细节

    GPS时钟之户外防水防雷细节------专业LED时钟厂家![点击进入] GPS的脆弱性: 由于在GPS设计时,干扰环境下的工作能力不是优先考虑的因素,它只是作为一种导航的辅助工具,而不是用于精确制导 ...

  7. springboot项目 报错No mapping for GET /css/bootstrap.css，前端无法展示样式

    说来也奇怪,前几天刚写完的项目 写的好好的 现在打开他就加载不了前端的静态资源了 报错No mapping for GET /css/bootstrap.css 解决方法: 新建一个配置类 ,将静态资 ...

  8. 使用Jquery的.css('border')在火狐不兼容

    改成如下就可以兼容火狐.IE.谷歌(border-left-color.border-left-width等)

  9. 第十二组 -摩天脆脆冰淇淋队-第四次团队作业：Git实战

    这个作业属于哪个课程 至诚软工实践F班 - 福州大学至诚学院 - 班级博客 - 博客园 (cnblogs.com) 这个作业要求在哪里 第四次团队作业:Git实战 - 作业 - 至诚软工实践F班 - ...

  10. [Leetcode 787]中转K站内最便宜机票

    题目 n个城市,想求从src到dist的最廉价机票 有中转站数K的限制,即如果k=5,中转10次机票1000,中转5次机票2000,最后返回2000 There are n cities connec ...