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的分页 ...
随机推荐
- adb常用命令及详解
ADB 即 Android Debug Bridge,Android调试桥.ADB工作方式比较特殊,采用监听Socket TCP 端口的方式让IDE和Qemu通讯,默认情况下adb会daemon相关的 ...
- Statemnet和PerparedStstemnent有哪些区别
Statement 和 PreparedStatement之间的关系和区别. 关系:PreparedStatement继承自Statement,都是接口 区别:PreparedStat ...
- Spark安装过程纪录
1 Scala安装 1.1 master 机器 修改 scala 目录所属用户和用户组. sudo chown -R hadoop:hadoop scala 修改环境变量文件 .bashrc , 添加 ...
- LINUX系统一一常用命令
前言 LINUX UNIX Centos RedHat Ubuntu SHELL shell脚本 shell shell命令 类似windows系统的bat 批处理文件 里面都是脚本 CentOS6. ...
- func 的参数修饰
1.0 在声明一个 Swift的方法的时候,我们一般不去指定参数前面的修饰符,而是直接声明参数: func incrementor(variable : Int) ->Int { } 这个方法接 ...
- tf.pad(one_hot_encoding, [[0, 0], [1, 0]], mode='CONSTANT')
tf.pad(one_hot_encoding, [[0, 0], [1, 0]], mode='CONSTANT') tf.pad 是扩展的意思,其中[0, 0], [1, 0] 分别代表的是[上, ...
- css flex 属性教程
https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/#align-self display: flex; flex-w ...
- 2018面向对象程序设计（Java）第15周学习指导及要求
2018面向对象程序设计(Java)第15周学习指导及要求 (2018.12.6-2018.12.9) 学习目标 (1) 掌握Java应用程序打包操作: (2) 了解应用程序存储配置信息的两种方法 ...
- 大数据入门到精通2--spark rdd 获得数据的三种方法
通过hdfs或者spark用户登录操作系统,执行spark-shell spark-shell 也可以带参数,这样就覆盖了默认得参数 spark-shell --master yarn --num-e ...
- J_link重刷固件
第一步:上电短接ERS 第二步:上电短接TST (擦除原来的固件) 完成上面两步后,再连接电脑,电脑将出现正常的串口连接 第三步:(烧固件) 在SAM-BA xxx固件烧写选好芯片类型,连接 ...