<!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>
效果图:
参考来源:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 打开链接