DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[jQuery] 如何开发jQuery插件

[复制链接]
admin 发表于 2019-12-22 17:31:36 | 显示全部楼层 |阅读模式
第一种
  1. // jQuery扩展方法
  2. $.fn.test = function() {}
  3. $(selector).test();
复制代码


推荐 第二种
  1. (function ($) {
  2.     $.fn.extend({
  3.         "bold": function () {
  4.             return this.css({ fontWeight: "bold" });
  5.         }
  6.     });
  7. })(jQuery);
复制代码


完整事例
  1. //闭包限定命名空间
  2. (function ($) {
  3.     $.fn.extend({
  4.         "highLight": function (options) {
  5.             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  6.             return this.each(function () {  //这里的this 就是 jQuery对象
  7.                 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
  8.                 var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
  9.                 //根据参数来设置 dom的样式
  10.                 $this.css({
  11.                     backgroundColor: opts.background,
  12.                     color: opts.foreground
  13.                 });
  14.             });

  15.         }
  16.     });
  17.     //默认参数
  18.     var defaluts = {
  19.         foreground: 'red',
  20.         background: 'yellow'
  21.     };
  22. })(window.jQuery);
复制代码
调用方法
  1. $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
复制代码
https://blog.csdn.net/lmhlmh_/article/details/80638261

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|大错站长论坛

GMT+8, 2020-6-6 15:30 , Processed in 0.054464 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表