jQuery封装和优化
封装和优化插件
--封装插件
(function($){
//自定义插件代码
})(jQuery)
---------------
(function($){
$.fn.extend({
//函数列表
})
})(jQuery)
<body>
<div>div元素</div>
<p>p元素</p>
<span>span元素</span>
<script src="../jquery-1.11.3.min.js"></script>
<script>
(function($){
$.fn.extend({
color:function(options){
$.extend({
bcolor:"white",
fcolor:"black"
},options);
return this.each(function(){
$(this).css('color',options.fcolor);
$(this).css('background',options.bcolor);
})
}
})
})(jQuery);
$(function(){
$("p").color({
bcolor:"blue",
fcolor:"red"
})
}) </script>
</body>
优化插件
用户要发布自定义的插件，应该保证插件的开放性和封闭性
1.允许定义默认设置
把其中的参数默认值作为$.fn.color对象的属性单独设计，然后借助jQuery.extend()覆盖原来的参数选项即可。
在color()函数中，$.extend()方法能够使用参数options覆盖默认的default属性值，如果没有options值，那就使用
default属性值
<script src="../jquery-1.11.3.min.js"></script>
<script>
(function($){
$.fn.extend({
color:function(options){
var defaults={
bcolor:"white",
fcolor:"black"
};
$.extend(defaults,options);
this.each(function(){
$(this).css('color',options.fcolor);
$(this).css('background',options.bcolor);
});
return this;
}
})
})(jQuery);
$(function(){
$("p").color({
bcolor:"blue",
fcolor:"red"
})
}) </script>
</body>
插件设计基本格式
<script>
(function($){
$.fn.插件名=function(options){
var defaults={ };
var options=$.extend(defaults,options);
return this.each(function(){ })
}
})(jQuery);
</script>
<script>
(function($){
$.fn.extend({
tab:function(options){
var defaults={ }
var options=$.extend(defaults,options);
return this.each(function(){ })
}
})
})(jQuery);
</script>
jQuery封装和优化的更多相关文章
- asp.net mvc 自定义pager封装与优化
asp.net mvc 自定义pager封装与优化 Intro 之前做了一个通用的分页组件,但是有些不足,从翻页事件和分页样式都融合在后台代码中,到翻页事件可以自定义,再到翻页和样式都和代码分离, 自 ...
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- jQuery选择器的优化选择
jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]"); ...
- jquery封装常用方法
var git = { //true表示格式正确 checkEmail: function (str) { -]{,})(\S*)/g) == null) { return false; } else ...
- jquery选择器效率优化问题
jquery选择器效率优化问题 jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...
- 不借助jquery封装好的ajax，你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- jquery封装的选项卡
ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...
- 自己使用Jquery封装各种功能分享
自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
随机推荐
- Python类的进阶.md
属性绑定 在python中可以给类对象动态的绑定属性 但是由于这种特性,随意动态绑定也会带来麻烦,因此可用__slots__来限制可绑定的属性名称 __slots__的绑定对于子类是不生效的,只对当前 ...
- 18.2 不同用户 不同颜色光标 redis
上次,我们完成了 change 这个event 通过 collaborationsrvice 与 server 进行 sockrt io 将 client端的监听的 change 发给 server ...
- servlet(2)response常用方法
详细的response 学习笔记是: 输出到前台的的方法 1:使用OutputStream流向客户端浏览器输出中文数据 2:使用PrintWriter流向客户端浏览器输出中文数据 3:使用Output ...
- Win2012 R2虚拟机自激活（AVMA）技术
只要你的宿主机是Windows Server 2012 R2 Datacenter且宿主机已经激活, 不管宿主机许可证是VL,OEM还是零售版,只要宿主主机处于激活状,在其上运行的任何R2 VM都将被 ...
- java中garadle工程没有src问题
https://www.jb51.net/article/142791.htm 前几天遇到一个问题,就是使用ider创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. ...
- python闭包的代码
- 11.8java课后动手动脑
package 动手动脑; import javax.swing.*; class AboutException { public static void main(String[] a) { int ...
- tomcat端口被占用 实际上却查询不到此端口
参考 http://www.cnblogs.com/jieliujas/p/9413064.html 1.打开PCHunter,在进程选项卡下面可以找到无法结束的进程,右键--强制结束,失败(这儿效果 ...
- contextlib 上下文管理器
在Python中,读写文件这样的资源要特别注意,必须在使用完毕后正确关闭它们.正确关闭文件资源的一个方法是使用try...finally: try: f = open('/path/to/file', ...
- python--第六天总结
执行系统命令 可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen* --废弃 popen2.* --废弃 co ...