jq_$.extend和$.fn.extend插件开发和方法的封装
--------杂谈--------
随着使用的使用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插件开发和方法的封装的更多相关文章
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- $.extend(),与$.fn.extend() 讲解
$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...
- 插件的理解$.extend()与$.fn.extend()
插件的理解.$.extend()与$.fn.extend() 插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...
- jQuery extend() & jQuery.fn.extend()，插件编写
资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...
- $.extend()和$.fn.extend()用法和区别
$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...
- jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍
这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...
- jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- $.fn与$.fx什么意思； $.extend与$.fn.extend用法区别； $(function(){})和(function(){})(jQuery)
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
随机推荐
- ZOJ 1666 G-Square Coins
https://vjudge.net/contest/67836#problem/G People in Silverland use square coins. Not only they have ...
- Mysql查询优化从入门到跑路（三）查询的基本操作
查询的基本操作 1.选择操作 对应的是限制条件,操作对象是二维表的行. 优化方式:选择操作下推 目的:尽量减少连接操作前的元租数,使得中间临时关系尽量少(元祖数少,连接得到的元组数就少 ...
- 好记性不如烂笔头之Maven使用小记
一.前言 说起Maven,是在我上上东家接触的,掌握的还不错,因为种种原因,上家公司没有使用太多大众技术,我也没有太多施展的机会,对于以前掌握的技术,很多都荒废了,最近使用起来发现有点儿吃力了,为了加 ...
- C# 中常用的索引器
使用 C# 中的索引器和 JavaScript 中访问对象的属性是很相似. 之前了解过索引器,当时还把索引器和属性给记混了, 以为索引器就是属性,下面写下索引器和属性的区别,以及怎么使用索引器 先说明 ...
- 第45天：2017webstrom下载破解汉化
1.webstrom 11.0.3下载地址1:http://pan.baidu.com/s/1kVQjcwf 密码:uggr 下载地址2:http://pan.baidu.com/s/1kVQjcwf ...
- zoj3209-Treasure Map
给出一个左下角为\((0,0)\),右上角为\((n,m)\)的矩形,再给出\(k\)个在大矩形内的小矩形(可以重合),问是否能用这些小矩形完全覆盖这个大矩形,并且没有重合,如果可以至少需要多少个. ...
- 【bzoj1782】[Usaco2010 Feb]slowdown 慢慢游 树链剖分+线段树
题目描述 每天Farmer John的N头奶牛(1 <= N <= 100000,编号1…N)从粮仓走向他的自己的牧场.牧场构成了一棵树,粮仓在1号牧场.恰好有N-1条道路直接连接着牧场, ...
- Oracle 转义字符
id sfds_V_SF ASD_V_DSAF SD_V_DSAD 下划线是Oracle特殊字符,需要转移,如下 select * from systab t where t.id like ...
- 【题解】CF#855 G-Harry Vs Voldemort
个人感觉挺有意思的,然而被颜神D无聊惹(-￣▽￣)- 这题我们可以首先试图去统计以每一个点作为 w 点所能对答案造成的贡献是多少.不难发现,当且仅当 u 和 v 都在 w 所在边双的一侧的时候不能构成 ...
- [CF1083B]The Fair Nut and Strings
题目大意:在给定的长度为$n(n\leqslant5\times10^5)$的字符串$A$和字符串$B$中找到最多$k$个字符串,使得这$k$个字符串不同的前缀字符串的数量最多(只包含字符$a$和$b ...