流程
/***

     * 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. GAN的两种训练方式，以及梯度求导问题——detch()，retain_graph

    http://t.zoukankan.com/LXP-Never-p-13951578.html detach():截断node反向传播的梯度流,将某个node变成不需要梯度的Varibale,因此当 ...

  2. Pytest+allure+requests接口自动化

    实现功能 测试数据隔离: 测试前后进行数据库备份/还原 接口直接的数据依赖: 需要B接口使用A接口响应中的某个字段作为参数 对接数据库: 讲数据库的查询结果可直接用于断言操作 动态多断言: 可(多个) ...

  3. 基于uniapp框架开发飞书小程序总结

    前期准备 飞书官方客户端文档:https://open.feishu.cn/document/home/intro 飞书官方工具资源文档:https://open.feishu.cn/document ...

  4. java整合SSM框架

    使用Myeclipse搭建maven项目 准备工作 安装maven 官网下载安装(http://maven.apache.org/)    配置环境变量      配置完后,使用命令行输入mvn -v ...

  5. 【python】第一模块 步骤五 第一课、内存管理机制

    第一课.内存管理机制 一.课程介绍 1.1 课程概要 课程概要 赋值语句的内存分析 垃圾回收机制 内存管理机制 课程目标 掌握赋值语句内存分析方法 掌握id()和is()的使用 了解python的垃圾 ...

  6. CentOS 8.x 编译安装LNMP（Linux + Nginx + MySQL + PHP）架构部署动态网站环境

    LNMP动态网站部署架构是一套由Linux + Nginx + MySQL + PHP组成的动态网站系统解决方案,具有免费.高效.扩展性强且资源消耗低等优良特性,目前正在被广泛使用. 前传: 1.Ce ...

  7. error：Visual Studio 2012.4, “Run As Administrator” -> “The application cannot start”

    复制所有 dte*.olb 文件 从C:\Program Files (X86)\Common Files\Microsoft Shared\MSEnv   到 C:\Program Files X8 ...

  8. Spring Boot 中的异步调用

    通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行.而异步编程则没有这个限制,代码的调用不再是阻塞的.所以在一些情景下,通 ...

  9. 位运算与MOD快速幂详细知识点

    最近写的一些题目设计到了数论的取模 如下题 链接:https://ac.nowcoder.com/acm/contest/3003/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制: ...

  10. element ui动态生成表单数据与校验(后台传入数据）

    前言 最近有一个需求是通过后台返回的数据,生成表单并添加校验.在做的过程中,动态表单挺好做,关键是校验.困扰了我2天,最后通过查找资料和"运气"终于解决了.解决问题关键点:vue的 ...