微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

核心面试题

怎么给jQuery扩展插件

1.通过$.extend()来扩展jquery

语法:
$.exend({})
缺点:这种方式无法利用jquery强大的选择器带来的便利

2. 通过$.fn向jQuery添加新的方法

语法
$.fn.pluginName=function(){ your code goes here }

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- jquery线上引入地址 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" src=""></script>
  </head>
  <body>
    <ul>
      <li href="#">
        第一
        <a href="#">A</a>
      </li>
      <li href="#">第二</li>
      <li href="#">第三</li>
    </ul>
    <script>
      // 1.通过$.extend()来扩展jquery
      // 语法:$.exend({})
      // 缺点:这种方式无法利用jquery强大的选择器带来的便利
      $.extend({
        log: function (msg) {
          var Now = new Date();
          y = Now.getFullYear();
          m = Now.getMonth() + 1;
          d = Now.getDate();
          h = Now.getHours();
          min = Now.getMinutes();
          s = Now.getSeconds();
          time = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;
          console.log(time + "---" + msg);
        },
      });
      $.log("1111");
      // 2.通过$.fn向jQuery添加新的方法
      // 语法 $.fn.pluginName=function(){
      //   your code goes here
      // }
      // 常用的方法
      $.fn.ChangeColor = function () {
        // 在这里面 this指的是用jQuery选中的元素
        this.css("color", "red");
      };
      $(function () {
        $("a").ChangeColor();
      });
    </script>
  </body>
</html>

3.应用场景

通过$.fn向jQuery添加新的方法 是开发中常用的写法,因为这种写法可以利用强大的选择器

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐