<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用
</script>
</body>
</html>效果图：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
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);
}
})
$.log('initializing...'); //调用
</script>
</body>
</html>效果图：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<ul>
<li><a href="###">阅谁问君诵，水落清香浮</a></li>
<li><a href="###">阅谁问君诵，水落清香浮</a></li>
<li><a href="###">阅谁问君诵，水落清香浮</a></li>
</ul>
<script>
$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}
$(function(){
$('a').myPlugin();
})
</script>
</body>
</html>效果图：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<ul>
<li>
<a href="###">阅谁问君诵，水落清香浮</a>
</li>
<li>
<a href="###">阅谁问君诵，水落清香浮</a>
</li>
<li>
<a href="###">阅谁问君诵，水落清香浮</a>
</li>
</ul>
<script>
;(function($, window, document, undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
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
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);
$(function(){
//$('a').myPlugin();
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px',
'textDecoration': 'underline'
});
})
</script>
</body>
</html>效果图：
标签：jQuery,function,插件,color,JQ,问君,Beautifier,now,options From： https://blog.51cto.com/u_16171388/6558662