流程
/***

     * 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. JAVA框架入门理解

    一:关于java开发的框架我们可以先从java web开发框架的变迁来给大家简单叙述一下: 1 SSH --Struts+Spring+Hibernate 2 Spring +SpringMVC + ...

  2. oracle 锁用户和解锁。

    1 批量锁用户--数据库迁移后不允许在连接了 SELECT 'alter user '||username||' account lock;' from dba_users WHERE usernam ...

  3. Microsoft Edge 浏览器中 Vue.js devtools 插件安装与使用

    下载插件 通过插件下载网站crx4chrome搜索下载,也可以直接百度"site:(www.crx4chrome.com) Vue.js Devtools"找到下载页面下载 或者通 ...

  4. Android studio应用

    菜单的使用 public class FirstActivity extends AppCompatActivity { @Override protected void onCreate(Bundl ...

  5. 【项目记录】4：Pycharm激活方法

    引用一下: 今天给大家带来一种全新的Pycharm安装激活方式.可以激活到2099年. 安装 1.我们首先进入idea官网 jetbrains.com 找到最新版本的pycharm,这里就以windo ...

  6. spring boot 中 CommandLineRunner接口使用

    接口定义:接口,用于指示bean包含在SpringApplication中时应运行.可以在同一应用程序上下文中定义多个CommandLineRunner bean,并可以使用ordered接口或@Or ...

  7. springboot整合mybatis：查询语句，返回null

    springboot整合mybatis时,查询数据库数据时,返回结果为null; 刚开始以为是数据库没连接上,结果增.改.删的其他语句则执行成功: 但唯有查询语句始终返回null,一条数据一个null ...

  8. springmvc接口访问流程排查

    首先找到webapp下面的web.xml文件: 检查前端控制器: 并注意contextConfigLocation配置的springmvc的配置文件路径: 接着找到springmvc配置文件路径,如果 ...

  9. logging 模块详解

    日志记录函数以它们用来跟踪的事件的级别或严重性命名.下面描述了标准级别及其适用性(从高到低的顺序) 日志等级(level) 描述DEBUG 最详细的日志信息,典型应用场景是 问题诊断INFO 信息详细 ...

  10. 源代码管理工具-Github

    一.实验目的 个人编程:每个开发人员电脑上有自己的代码.硬盘坏了,所有的数据和资料不能找回或是很难复原.安全意识强一些的公司会要求开发人员将代码隔一段时间放到一个集中的计算机上,以日期为文件夹进行备份 ...