jquery 插件写法三

最新推荐文章于 2021-03-19 11:37:38 发布
最新推荐文章于 2021-03-19 11:37:38 发布
阅读量338 收藏
点赞数
分类专栏： H5前端 文章标签： jquery html5 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20389175/article/details/49736591
版权
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
height: 200%;
}
div {
width: 400px;
height: 200px;
position: fixed;
right: 0px;
border: 1px solid cadetblue;
background-color: gainsboro;
}
.msg-message,
.msg-info,
.msg-warning,
.msg-error,
.msg-succeed,
.msg-debug,
.msg-datetime,
.msg-view-link {
padding: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-right: 2px;
margin-left: 2px;
line-height: 2em;
font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
cursor: default;
}
.msg-info,
.msg-warning,
.msg-error,
.msg-succeed,
.msg-debug,
.msg-datetime {
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px;
}
.msg-warning {
border: 1px solid yellow;
}
.msg-error {
border: 1px solid red;
}
.msg-succeed {
border: 1px solid green;
}
.msg-debug {
border: 1px solid darkgray;
}
.msg-info {
border: 1px solid blue;
}
.msg-datetime {
border: 1px dotted darkgray;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

<body>
<div id="div1"></div>
<script type="text/javascript">
(function($) {
/* 时间格式化函数 */
$.utility = {
leading: function(char, width, value) {
var ret = value.toString();
while (width > 1) {
if (value >= (Math.pow(10, width - 1))) {
break;
} else {
ret = char + ret;
}
width--;
}
return ret;
},
now: function() {
var date = new Date();
var ret = {};
ret.hours = $.utility.leading('0', 2, date.getHours());
ret.minutes = $.utility.leading('0', 2, date.getMinutes());
ret.seconds = $.utility.leading('0', 2, date.getSeconds());
return ret;
}
}
$.fn.message = function() {
this.show = function(msg) {
this.html(msg);
};
this.clear = function() {
this.html('');
};
this.append = function(tag, msg) {
var date = $.utility.now();
var tagContent = "<span class='msg-" + tag + "'>" + tag + "</span><span class='msg-datetime'>" + date.hours + ":" + date.minutes + ":" + date.seconds + "</span>";
this.html(this.html() + "<br/>" + tagContent + "<span class='msg-message'>" + msg + "</span>");
};
this.warning = function(msg) {
this.append("warning", msg);
};
this.error = function(msg) {
this.append("error", msg);
};
this.succeed = function(msg) {
this.append("succeed", msg);
};
this.debug = function(msg) {
this.append("debug", msg);
};
this.info = function(msg) {
this.append("info", msg);
};
return this;
}
})(jQuery);
//test
var msg = $('#div1').message();
msg.warning("今天天气真好！！！");
msg.succeed("怎么回事？");
msg.error("出错了。。。");
</script>
</body>

</html>
聪明的一休丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 插件的基本写法
liuhao9999的博客
11-17 408
(function($){ var a={name:'大师',age:5555} var b={sex:'男',grade:5555} var c=$.extend({},a,b);//合并到新的对象 console.log(c) $.extend({//扩展静态方法 wushu:function(){alert('你不讲武德');} }); $.fn.extend({..
Jquery插件的写法
DaftJayee的博客
07-09 180
JQuery.fn.extend(object) ===》扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。 JQuery.extend(object) ===》扩展jQuery对象本身。 $.fn.extend() ===》 $("#box").xxx():局部 $.extend() ===》$.xxx() : 全局 插件的写法（规则） 1》引入方式 <script src='jquery1.7.js'></script> <script
jquery 插件写法
hbtx123456的博客
02-17 1114
如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一
JQuery插件写法
xiaoshengjinbu的博客
05-03 77
JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验，同时也提高了开发人员构造丰富客户 端UI的效率。JQuery本身提供了丰富的操作，但是，有时候我们需要根据我们自己的业务和系统特色(风格)构造一些我们常用的前端UI组件，而 JQuery的插件给了我们一个较好的方式来构造这些UI组件，方便我们日后反复重用这些组件。...
jquery插件写法
xiao1215fei的专栏
07-28 123
https://blog.csdn.net/lmhlmh_/article/details/80638261
jquery php写法,jQuery插件开发标准写法
weixin_31983133的博客
03-19 127
前言如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就...
jQuery插件写法
weixin_30352191的博客
09-29 71
一、基本JQ扩展插件的格式 一个扩展插件的格式一般是： (function($){.........})(jQuery); 当然，为了防止压缩合并等操作时，它前面的js代码没有结束分号而引起错误，这里可以在前面加个;就是： ;(function($){.........})(jQuery); 传入参数可以有多个，比如： ;(function($, window,do...
jQuery 插件写法2
12-23 100
转载：http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-manner.html 一、jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuer...
jQuery插件的几种写法，活学活用
qq1026432050的博客
11-18 860
今天小编突然对jQuery插件有了想法，平时都用现成的jQuery插件今天想自己做一个jQuery插件,于是找了大量的关于jQuery插件的博客并总结如下几点 jQuery插件的几种写法 一、jQuery插件开发方式 1、通过$.extend()来扩展jQuery 2、通过$.fn 向jQuery添加新的方法 3、通过$.widget()应用jQuery UI的部件工厂方式创建 二、三种jQuer...
JQuery插件常用写法
Bran's Blog not try just do best
12-15 402
jquery插件常用写法，也可用于日常js文件编写我们经常见到如下jquery插件或者js文件的：;(function($,window,document,undefine){ tms={}; ... window.tms = tms; })(jQuery,window,document);1.代码最前面的分号, 可以防止多个文件压缩合并时以为其他文件最后一行语句没有加分号，
Jquery插件写法笔记整理
10-27
大部分jQuery插件都是这种类型的插件，由于这种插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势
jQuery插件的写法分享
10-27
几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法
JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip
01-11
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
CodeMirror sql智能提示功能修改
热门推荐
楠丶俊枫的专栏
03-22 2万+
CodeMirror sql部分智能提示关键字,老板希望可以自己加提示,还能支持 库.表.字段  下面我就说下我具体的做法： 第一步了解 codemirror的实现原理，        看这个很容易看出点啥，codemirror.js 主要是框架和配置类，show-hint.js 主要是显示提示框的类；    剩下的sql.js是规定了一些常用关键字，好吧其实我们可以在这里改，做下扩展嘛。
热力图原理
楠丶俊枫的专栏
11-16 1万+
最近公司让做一款统计移动APP的热力图插件，好吧百度了下也只是找到了百度统计的一些线索。思考了几天终于开始做了。 首先我说下思路和开发遇到的问题： 一. 数据采集部分：            1.因为是移动端第一个考虑的便是分辨率的问题。毕竟市场上手机屏幕大小区别还是很大的。            2. 第二个要考虑的是坐标点的问题一个1980*1080的屏有200万个象素点，好吧我开始蛋
codeMirror配置
楠丶俊枫的专栏
03-22 1万+
CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/ 下载后，解压开得到的文件夹中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。一般在开发中，添加lib下的引用和mode下的引用就够了。 使用示例 首先，要引用是 lib 目录下的 codemirro
原生js跟jquery 的对比
楠丶俊枫的专栏
11-16 1777
选择器 便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。 然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。 1.获取页面所有的div /* jQuery */   $("div")      /* native equivalent */   d
HTML5塔防（一）
楠丶俊枫的专栏
11-18 1199
现在我们就开始做一个HTML5塔防游戏，首先我们需要建工程好吧！接下来我们直接开始html文件和js了。 首先index.html 我的TD html,body{ margin: 0px; padding: 0px; } #game { margin: 10px; width: 600p
Chrome开发者工具的使用
楠丶俊枫的专栏
02-25 996
Chrome开发工具是一个Web开发者的利器，使用她你可以实现： 管理界面元素 断点调试JavaScript代码 优化你的代码 这里将列出一些非常实用的使用技巧，帮助你更加高效的工作 1. 快速编辑HTML元素 选择开发工具面板的Elements 在Elements下的元素编辑器中选择一个DOM元素 双
jquery onclick写法
最新发布
04-08
对于jquery onclick写法，可以这样实现： $(document).ready(function(){ $("button").click(function(){ alert("Hello World!"); }); }); 这样，当页面加载完成后，点击按钮就会弹出"Hello World!"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值