--------杂谈--------

随着使用的使用js和jq使用的越来越娴熟，也就是说日常产品经理给的一些需求，已经在自己的能力范围内了。空出来了一点时间，来研究如何优化你的代码，

不管是性能上，还是美观上，都应该有一个更好的提升。你决定做这件事的时候，就应该用最大的努力，去做到最好，给自己最好的答案。要是每天浑浑噩噩

的混日子，老来想必会后悔吧。特别是在工作中，一定要做好，做好了就有人看到，自然利益什么的就会向你靠。或者不单单是金钱，还有爱情呢。所以一定

要做最好的自己。做最好的自己。

-------技术段--------

下面写的都是我自己在开发中的一些理解，当然想法也是在参考别人的思想后自己总结的一套，忘君喜欢。

$.extend这个是JQ提供的添加静态内容的方法，在开始开发的时候你会掂量着这个功能如何实现，是的，你在掂量的时候就应该把一整个页面的功能一个一个

的细分成一个个方法，这个方法实现这个小功能，那个方法实现那个小功能。思路会清晰很多。

$.fn.extend是添加动态内容的一个方法，像什么click,hover等一些事件就可以封装在其中。

代码示例：

             (function() {

                 //添加一个静态方法

                 $.extend({

                     add: function(a, b) {

                         return a + b;

                     }

                 });

                 //添加动态方法

                 $.fn.extend({

                     alertWhileClick: function() {

                         $(this).hover(function() {

                             console.log($(this).val());

                         })

                     }

                 });

                 $("#input1").alertWhileClick();

                 console.log($.add(3, 4))

             })(jQuery)

注意此代码是有顺序的，先引入JQ，封装的方法在前面，而最后才是调用的方法，不然事件是不会其效果的。

全部代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

         <title></title>

     </head>

     <body>

         <input type="text" name="input1" id="input1" value="wushuhongshigehuaidan" />

         <script type="text/javascript">

             (function() {

                 //添加一个静态方法

                 $.extend({

                     add: function(a, b) {

                         return a + b;

                     }

                 });

                 //添加动态方法

                 $.fn.extend({

                     alertWhileClick: function() {

                         $(this).hover(function() {

                             console.log($(this).val());

                         })

                     }

                 });

                 $("#input1").alertWhileClick();

                 console.log($.add(3, 4))

             })(jQuery)

         </script>

     </body>

 </html>

jq_$.extend和$.fn.extend插件开发和方法的封装的更多相关文章

  1. jQuery插件开发中$.extend和$.fn.extend辨析

    jQuery插件开发分为两种:   1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...

  2. $.extend(),与$.fn.extend() 讲解

    $.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...

  3. 插件的理解$.extend()与$.fn.extend()

    插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...

  4. jQuery extend() & jQuery.fn.extend()，插件编写

    资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...

  5. $.extend()和$.fn.extend()用法和区别

    $.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...

  6. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  7. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  8. jQuery开发自定义插件 $.extend()与$.fn.extend()

    jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...

  9. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  10. $.fn与$.fx什么意思； $.extend与$.fn.extend用法区别； $(function(){})和(function(){})(jQuery)

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

随机推荐

  1. codeforces 987 D. Fair

    D. Fair time limit per test 2 seconds memory limit per test 512 megabytes input standard input outpu ...

  2. Java notify的使用

    半路出家学习java, 花了几分钟简单看了.在早上那个例子上稍微改了下, notify 对象上必须使用 synchronized 我的理解是在java synchronized只是个线程同步标志,但是 ...

  3. Python 基本数据结构

    Python基本数据结构 数据结构:通俗点儿说,就是存储数据的容器.这里主要介绍Python的4种基本数据结构:列表.元组.字典.集合: 格式如下: 列表:list = [val1, val2, va ...

  4. P1349 广义斐波那契数列

    题目描述 广义的斐波那契数列是指形如an=p*an-1+q*an-2的数列.今给定数列的两系数p和q,以及数列的最前两项a1和a2,另给出两个整数n和m,试求数列的第n项an除以m的余数. 输入输出格 ...

  5. 用css制作空心箭头(上下左右各个方向均有)

    平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...

  6. [转载]看看大牛们是怎样获得英文综述（reviews）的?

    对于做实验的童鞋来说,平时看综述必不可少,可是如何获得自己想要的却并不是一件容易的事情,这里整理并推荐几种行之有效的方法: 1. http://www.annualreviews.org/,这是一个顶 ...

  7. 个人vim配置

    YouCompletMe支持golang cd .vim/bundle/YouCompleteMe ./install.sh --clang-completer --go-completer clan ...

  8. [Violet]天使玩偶

    description Ayu 在七年前曾经收到过一个天使玩偶,当时她把它当作时间囊埋在了地下.而七年后 的今天,Ayu 却忘了她把天使玩偶埋在了哪里,所以她决定仅凭一点模糊的记忆来寻找它. 我们把 ...

  9. [洛谷P4092][HEOI2016/TJOI2016]树

    题目大意:给你一棵树,有两个操作: $C\;x:$给第$x$个节点打上标记 $Q\;x:$询问第$x$个节点的祖先中最近的打过标记的点(自己也是自己的祖先) 题解:树剖,可以维护区间或,然后若一段区间 ...

  10. BZOJ1934：[SHOI2007]善意的投票 & BZOJ2768：[JLOI2010]冠军调查——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1934 https://www.lydsy.com/JudgeOnline/problem.php? ...