jquery插件开发的demo

 1 (function ($) {
 2     $.fn.extend({
 3         "highLight": function (options) {
 4             //检测用户传进来的参数是否合法
 5             if (!isValid(options))
 6                 return this;
 7             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
 8             return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
 9                 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
10                 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
11                 //根据参数来设置 dom的样式
12                 $this.css({
13                     backgroundColor: opts.background,
14                     color: opts.foreground
15                 });
16                 //格式化高亮文本
17                 var markup = $this.html();
18                 markup = $.fn.highLight.format(markup);
19                 $this.html(markup);
20             });
21 
22         }
23     });
24     
25     
26     //默认参数
27     var defaluts = {
28         foreground: 'red',
29         background: 'yellow'
30     };
31     //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
32     $.fn.highLight.format = function (str) {
33         return "<strong>" + str + "</strong>";
34     }
35     //私有方法，检测参数是否合法
36     function isValid(options) {
37         return !options || (options && typeof options === "object") ? true : false;
38     }
39 })(window.jQuery);