• 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);
  • 相关阅读:
    流 例题

    容器集合整理
    容器集合
    容器 集合知识点
    面向对象回顾
    面向对象例题
    Java常用的8大排序算法
    Java中两个动态代理
    为什么synchronized无法禁止指令重排,却能保证有序性
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/7277358.html
Copyright © 2020-2023  润新知