jquery 插件编写例子5个
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div>
<a href="http://www.cnblog.com">cnbloga>
<a href="http://www.zhihu.com">zhihua>
<a href="http://www.csdn.com">csdna>
div>
<a id='o_a1' href="http://defaultsegment.com">defaultsegmenta>
<section>
<a href="http://www.cnblog.com">cnbloga>
<a href="http://www.zhihu.com">zhihua>
<a href="http://www.csdn.com">csdna>
section>
body>
<script src="../../jquery_1.11.3.min.js">script>
<script src="jquery.myplugin.js">script>
<script>
$.extend({
log:function(message){
var now = new Date(),
y = now.getFullYear(),
m=now.getMonth()+ 1,
d=now.getDate(),
h=now.getHours(),
min = now.getMinutes(),
s=now.getSeconds(),
time=y+'/'+m+'/'+d+' '+h+':'+min+":"+s;
console.log(time+' my app:'+message);
},
get_my_date:function(message){
var now= new Date(),
y=now.getFullYear(),
m=now.getMonth()+ 1,
d=now.getDate(),
h=now.getHours(),
min = now.getMinutes(),
s=now.getSeconds(),
time=y+'/'+m+'d'+'/'+h+':'+min+':'+s;
console.log(time+' app works:'+message);
}
})
script>
<script>
//1.
$.log("hello world");
//2
$.get_my_date('server start');
//3.
$('div>a').css({
'display':'block'
}).cssPlugin2({
'color':'green',
'fontSize':'40px'
});
//4.
$('#o_a1').cssPlugin2();
//5.
$('section>a').myPlugin({
'color':'green',
'fontSize':'40px'
})
script>
html>/**
* Created by Administrator on 2016/7/23 0023.
* jquery.myplugin.js
*/
$.extend({
log:function(message){
var now = new Date(),
y = now.getFullYear(),
m=now.getMonth()+ 1,
d=now.getDate(),
h=now.getHours(),
min = now.getMinutes(),
s=now.getSeconds(),
time=y+'/'+m+'/'+d+' '+h+':'+min+":"+s;
console.log(time+' my app:'+message);
},
get_my_date:function(message){
var now= new Date(),
y=now.getFullYear(),
m=now.getMonth()+ 1,
d=now.getDate(),
h=now.getHours(),
min = now.getMinutes(),
s=now.getSeconds(),
time=y+'/'+m+'d'+'/'+h+':'+min+':'+s;
console.log(time+' app works:'+message);
}
});
$.fn.cssPlugin1=function(){
this.css('color','red');
return this.each(function(){
$(this).append(' '+$(this).attr('href'));
})
}
$.fn.cssPlugin2=function(options){
var defaults = {
'color':'red',
'fontSize':'12px'
};
var settings = $.extend({},defaults,options);
return this.css({
'color':settings.color,
'fontSize':settings.fontSize,
'display':'block'
}).each(function(){
$(this).append(' '+$(this).attr('href'));
});
}
;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none',
'display':'block'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration,
'display':this.options.display
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);
参考：
1.http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
2.http://learn.jquery.com/plugins/