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

随着使用的使用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. C# 反射与dynamic最佳组合

    在 C# 中反射技术应用广泛,至于什么是反射.........你如果不了解的话,请看下段说明,否则请跳过下段.广告一下:喜欢我文章的朋友请关注一下我的blog,这也有助于提高本人写作的动力. 反射:当 ...

  2. SQL SERVER技术内幕之5 表表达式

    表表达式是一种命名的查询表达式,代表一个有效的关系表.可以像其他表一样,在数据处理语句中使用表表达式.SQL Server支持4种类型的表表达式:派生表(derived table).公用表表达式(C ...

  3. 关于houghlines函数角度问题的说明

    以上是opecv reference里面的说明. Image必须是8位单通道图(可以使灰度图.二值图.边缘图等) Rho:距离分辨率,一般为1 Theta:角度分辨率,一般为CV_PI/180 Thr ...

  4. iOS-开发中的时间处理

    做App避免不了要和时间打交道,关于时间的处理,里面有不少门道,远不是一行API调用,获取当前系统时间这么简单.我们需要了解与时间相关的各种API之间的差别,再因场景而异去设计相应的机制. 时间的形式 ...

  5. NOI 97 (Vijos 1464)积木游戏(DP)

    很普通的DP,设dp[i][j][k]为第i块积木放在第j堆且摆放状态为k的最高高度.方程很容易推出. # include <cstdio> # include <cstring&g ...

  6. 【bzoj1712】[Usaco2007 China]Summing Sums 加密 矩阵乘法

    题目描述 那N只可爱的奶牛刚刚学习了有关密码的许多算法,终于,她们创造出了属于奶牛的加密方法.由于她们并不是经验十足,她们的加密方法非常简单:第i只奶牛掌握着密码的第i个数字,起始的时候是Ci(0≤C ...

  7. [NOI2017]蔬菜 贪心

    题面: [NOI2017]蔬菜 题解: 首先每天蔬菜会变质这点并不好处理,我们考虑让时间倒流,从后向前处理,这样的话就相当于每天都会得到一定量的蔬菜. 这样做有什么好处呢? 我们可以发现一个性质:如果 ...

  8. BZOJ4563:[HAOI2016]放棋子——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4563 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列 ...

  9. 51NOD 1594:Gcd and Phi——题解

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1594 参考及详细推导:http://www.cnblogs.com/ri ...

  10. Linux环境下用Weblogic发布项目【二】 -- 配置Domain域

    配置注意事项: 修改密码时密码长度最少8位:在"<下一步>"后面为空即表示敲回车: 具体配置步骤如下: [root@GPS-App ~]# [root@GPS-App ...