jquery插件封装思路整理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写插件的栗子</title>
</head>
<body>
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422091710455317.jpg" width="" height="" alt="神探驾到">
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0401/thumb_1_174_98_20150401051450832875.jpg" alt="" width="" height="">
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422092027822146.jpg" alt="" width="" height="">
</body>
</html>
<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>
<script type="text/javascript"> (function($){ $.fn.changeImgSrc = function(options){
var defaults = {
"data":"data-lazysrc",
'border':"1px solid red"
};
//extend 是把options 和 defaults合并 取并集,在这config的结果其实就是defaults定义的对象,所以取值的时候可以直接config打点取到data border等自定义属性
// defaults = {
// "a" : 1,
// "b" : 2
// };
// options = {
// "a" : 1,
// "b" : 3
// };
// 那么config = {
// "a" : 1,
// "b" : 3
// }
// 以options最后自定义的为主优先级最高,defaults默认的其次
var config = $.extend({}, defaults, options);
return this.each(function(){
var lazysrc = $(this).attr(config.data);
$(this).attr('src',lazysrc).css("border",config.border);
})
}
$('img').changeImgSrc({
'data':"data-lazysrc",
'border':'20px solid yellow'
}); })(jQuery); </script>
干前端两年了,第一次自己试着封装小插件,虽然有点迟但是依旧很兴奋!UP
jquery插件封装思路整理的更多相关文章
- jquery插件封装
HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...
- 最简单的原生js和jquery插件封装
最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将 ...
- 【jQuery】jquery插件封装
扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jquery插件封装成seajs模块
jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...
- jQuery插件封装系列(一)—— 金额录入框
基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...
- (jQuery 插件)封装容器的表单为json对象
下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...
- jQuery 插件封装的方法
方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuer ...
- jquery 插件封装模板
//插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...
随机推荐
- Android Spinner(级联 天气预报)
activity_spinner.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- [Unity菜鸟] Unity读XML
1. 在Unity中调试可行,发布成exe可行,发布成web不行 Application.dataPath 在Unity中调试是在“..Assets”文件夹下, 发布成exe文件是在“..yourNa ...
- CF196 D2 D
Book of Evil,有一颗树,n个节点,有m个节点被标记,问n个节点中,有多少个节点,这些节点与这m个节点的最远的距离小于等于d. 用down[i], up[i]分别标记只考虑以i为root的子 ...
- Android 对话框用法
来自:http://www.cnblogs.com/salam/archive/2010/11/15/1877512.html Activities提供了一种方便管理的创建.保存.回复的对话框机制,例 ...
- 《 UNIX网络编程》源码的使用
学习编程这东西,看代码,改代码,运行代码这样才能学到实际东西!本书说在www.unpbook.com可以获取源码,不过打不开!所以google unpv13e.tar.gz 并在网络上找到了:源码:h ...
- 捉虫记2:windows程序句柄泄露的上下文环境
作为程序员,开发程序是基本功,而调试程序也是必不可少的技能之一.软件在主体功能开发完成后会经历各个阶段的测试,才会被发布.在测试过程中,出现较多的可能就是内存泄漏,句柄泄漏,异常崩溃等属于非功能型的软 ...
- 到底怎么样才叫看书?——Tony Zhao's
到底怎么样才叫看书?——上篇 目录: 一.引入 二.经历了就能理解 三.读书要分级 四.只读经典 五.别吝惜你动笔的那点时间 一.引入 看到这个题目的时候你可能会感到有点好笑:“这还用问,看书就是把书 ...
- poj1226,poj3080
看来以后用pascal的函数要小心了: 简简单单pos其实时间复杂度是二次方级的…… 今天学习的是KMP——字符匹配算法: 这两道题也都很简单,都是为这个算法练手的, 最朴素的匹配显然是穷举起始位置然 ...
- ASP.NET的六种验证控件的使用
C# 中的验证控件分为一下六种 :1 CompareValidator:比较验证,两个字段的值是否相等,比如判断用户输入的密码和确认密码是否一致,则可以用改控件: 2 CustomValidator ...
- jquery serialize()方法的扩展
Jquery提供的序列化表单方法serialize方法确实方便,但是我在使用的时候发现了一个弊端:当我使用type:“post”进行ajax请求的时候, 这个时候参数data:$("#myf ...