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的分页 ...
随机推荐
- Android RxJava 2 的用法 just 、from、map、subscribe、flatmap、Flowable、Function、Consumer ...【转】
先简单说说RxJava的用途与价值 原文出处:Android RxJava 2 的用法 用途: 异步 (也就是开线程跳转) 价值: 面对复杂的逻辑,它依然 简洁 ,代码 易读 RxJava2 与 Rx ...
- 【原】linux学习路径
1. <<The Linux Command Line A Complete Introduction>> 2. <<Advanced Programming ...
- js高级-原型链
JavaScript是基于原型的面向对象的语言(相当于一个基类,父类),而不是像Java通过类模板构造实例,通过原型实现属性函数的复用 函数都有 prototype属性 指向函数的原型对象 只有函数根 ...
- node.js fs、http使用
学习node核心模块http.fs;的使用 首先在server.js文件中require两个模块http.fs; let fs = require('fs')let http = require (' ...
- Java用代码演示String类中的以下方法的用法
用代码演示String类中的以下方法的用法 (1)boolean isEmpty(): 判断字符串是不是空串,如果是空的就返回true (2)char charAt(int index): 返回索引上 ...
- target=_blank攻击
[target=_blank攻击] 在<a>标签中加入 rel="noopener noreferrer" 来避免. 参考:https://mathiasbynens. ...
- metasploit framework（十五）：弱点扫描
openvas扫描生成NBE格式的日志 改个比较好记的文件名 将日志导入到msf进行后续操作,导入之前查看一下hosts和services 导入nbe格式的文件 查看漏洞弱点 msf直接调用nessu ...
- Session和Cookie的理解
原文地址:https://juejin.im/post/5aede266f265da0ba266e0ef
- c++ 面试题（汇总）
1,extern 关键字作用: http://www.cnblogs.com/lzjsky/archive/2010/11/24/1886686.html 2,static 关键字作用: https: ...
- Windows配置Java环境
https://jingyan.baidu.com/article/84b4f56598d88b60f7da3272.html