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的分页 ...
随机推荐
- 如何使用JBDC修改数据
1.JDBC取得数据库Connection连接对象conn, Connection conn=null; //数据库连接对象 String strSql=null; //sql语句对象 // ...
- 全面对比T-SQL与PL/SQL
1)数据类型 TSQL PL/SQL numeric(p,s) numeric(p,s) or NUMBER(p,s) decimal(p,s) decimal(p,s) or NUMBER(p,s) ...
- 移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止: .xxx{ -we ...
- python os模块的使用（转）
os模块包含普遍的操作系统功能. 注意:函数参数path是文件或目录的路径,filename是文件的路径,dirname是目录的路径,路径可以是相对路径,也可绝对路径 常见或重要的函数为加粗字体 os ...
- JS拖拽元素原理及实现代码
一.拖拽的流程动作 ①鼠标按下②鼠标移动③鼠标松开 二.拖拽流程中对应的JS事件 ①鼠标按下会触发onmousedown事件 ②鼠标移动会触发onmousemove事件 ③鼠标松开会触发onmouse ...
- linux 系统 网卡 ethX没有显示IP的处理方式
1 临时方式 ifconfig 设备名 IP 地址 (ifconfig eth0 192.168.1.117) 设置好之后马上生效,不需要重启网卡服务(千万别重启网卡服务,不然刚刚设置的又没有了) ...
- php mysql 查询判断周几
$where .= " and (DAYOFWEEK( from_unixtime(`px_time`, '%Y-%m-%d')) = 1)"; //周日从1开始
- jq select 一些操作
添加option $("#ID option").each(function(){if($(this).val()==111){$(this).remove();}}); 移除op ...
- php json中文被转义
php 5.4 json_encode($str, JSON_UNESCAPED_UNICODE); 5.4版本以下 方法一function encode_json($str){ $code = js ...
- 游戏AI技术
[Unity3D人工智能编程精粹] 1.运动层.决策层.战略层. 运动层.决策层包含的算法是针对单个角色的,战略层是针对小队乃至更大规模群体的. 导航和寻路是运行层的主要任务. 决策层决定角色下一时间 ...