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的分页 ...
随机推荐
- Linux基本命令(新手入门使用)
Linux常用基本命令主要包括目录操作命令.文件操作命令.文件查看命令.磁盘管理命令.用户管理命令.系统管理命令等. 目录操作命令:cd.ls.mkdir.pwd.rmdir 文件操作命令:cp.mv ...
- android apk 在哪个目录下安装？
system/app系统自带的应用程序,无法删除.data/app用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录.data/data存放应用程序的数据
- C# 如何获取鼠标在屏幕上的位置，不论程序是否为活动状态
一开始我认为应该使用HOOK来写,而且必须使用全局HOOK,结果在一次偶然的机会得到,原来其实根本没有那个必要. 直接上代码吧,一看就明白 Point ms = Control.MousePositi ...
- LDA线性判别分析（转）
线性判别分析LDA详解 1 Linear Discriminant Analysis 相较于FLD(Fisher Linear Decriminant),LDA假设:1.样本数据服从正态分布,2 ...
- SQL server 基本语法
文字摘自https://www.cnblogs.com/chaoa/articles/3894311.html 一.定义变量 --简单赋值 declare @a intset @a=5 print @ ...
- 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...
- CentOS7 安装 GitLab
虽然GitHub已经很好了,但是我们必须联上公网才可以使用并且如果不付费的话,你的代码在网上就是公开的!但是在企业环境中,我们公司的代码不希望被公开并且也不想付费给GitHub,这时怎么办呢?我们可以 ...
- justify-content & align-items & align-content
[justify-content & align-items & align-content] 三个属性均作用于container. justify-content用于控制main-a ...
- CRTD模拟MFG工单进行绑定优化
需求:按单按库生产的CRTD状态半成品工单重复创建问题 绑定成功案例: SELECT DEMANDLINEID,SUPPLYORDERID,DEMANDORDERID,QTYALLOCATED,ITE ...
- Sublime Text使用中的一些心得
Sublime Text3是每个web前端程序员的必备神器,其中有许多便利的功能及插件.下面列出一些在开发中比较实用的快捷操作,可以极大地提高代码的编写速度及效率. l 在文档中输入代码,即使忘记保 ...