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 ...
随机推荐
- UR #13 Ernd
考试的时候没有注意到可以将(a,b)放在二维平面上之后旋转坐标系,使得转移变成树状数组二维偏序 这样就算我想出来了第二个转移的斜率优化也没有什么卵用啊(摔西瓜 设g(i)表示当前站在第i个水果下面且第 ...
- QxtFlowView(libqxt)
https://github.com/mnutt/libqxt/tree/master/examples http://libqxt.bitbucket.org/doc/0.5/class_qxt_f ...
- JVM内存管理(二)
JVM内存管理 JVM在执行java程序的过程中,会把内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则依赖 ...
- Android开发之MediaPlayer类
官网关于MediaPlayer类的使用简介:
- java参数传递时到底是值传递还是引用传递
java参数传递时到底是值传递还是引用传递(baidu搜集) 问”,很多人的BLOG里都引用这些面试题,最近因为工作内容比较枯燥,也来看看这些试题以调节一下口味,其中有一道题让我很费解. 原题是:当一 ...
- 「拒絕存取路徑 'C:\Users\xxx\AppData\Local\Temp\Temporary ASP.NET Files\apname\3a1b3704\f7fc6d0c\App_Code.l8ieogii.0.cs」的錯誤!
修改web.config中的system.web->compilation tag中,多加入tempDirectory="可存取的目錄" <system.web&g ...
- 2009国家集训队小Z的袜子
莫队算法? 感觉没什么优越性啊?难道就是因为在排序的时候cmp函数的不同?这样做为什么减少时限啊? 我带着疑惑敲了代码,却一直有bug…… 代码: type node=record l,r,id,x, ...
- 银行爱“IOE”爱得有多深
本文由阿尔法工场欧阳长征推荐 导读:如果银行是一家海鲜酒楼,把IBM换掉相当于大搞一次装修,把Oracle换掉相当于把厨子和菜谱全部换掉,把EMC换掉相当于把放食材工具的储物间换个地方.难度在于,这海 ...
- jwplayer 网页在线播放插件
1.到官网 https://www.jwplayer.com/ 注册,取得key并下载免费版本(免费版只支持mp4格式): 2.编辑如下网页即可在线播放: <!DOCTYPE html> ...
- (3)java棧
java棧和函数调用的关系图 [名词解释]--->java棧是一块线程的私有空间--->java的棧是先进后出的数据结构.函数返回,则该函数的棧帧被弹出.--->一个函数对应一个棧帧 ...