前端工程化02-复习jQuery当中的插件开发

2、jQuery插件开发

在我们开发的时候、有时候jQuery提供的方法并不能满足我们的需求，如果我们想给jQuery扩展一些其他的方法，那这种情况下，可能会需要写一个插件

jQurey官网：jquery.com

例如一些、图片懒加载插件、滚动的插件、响应式的插件、ui插件，很多很多。

那我们自己怎么编写一个插件，一般面试会问，有没有手写过一些插件？比如javaScript的一些库，有没有造过轮子等

jQuery插件其实就是：编写一些新的方法，并将这些方法，添加到Query的原型上

那我们如何编写插件？

新建一个插件对应的js文件（命名规范：jquery.插件名.js)

在立即执行函数中编写插件，这样可以避免插件中的变量与全局变量冲突。

在JQuery的原型对象上新增一些方法。

最后在html中导入就可以像使用其他jQuery对象方法一样使用了

到此就开发完一个jQuery的插件了。

开发一个jquery.showlinklocation.js的插件

这个插件的效果是，为页面上的每个a标签都拼接上他的网址，并设置a标签的颜色为红色

创建一个文件名为jquery.showlinklocation.js

//立即执行函数
;(function(window,$){
   //在jquery的原型上，我们添加了一个 showlinklocation方法
   //需要遍历a元素
   $.fn.showlinklocation=function(){
      //让他只能是个a
      console.log(this);//jQuery对象
      //this.filter('a').append('(http://www.baidu.com)')
      this.filter('a').each(function(index,element){
         console.log(element);
         console.log(this,"this也是a");
         //a转成jq对象
         var $a=$(this);//这个是函数的this
         //取jq对象其中的一个属性
         var link=$a.attr('href');
         //拼接路径到字的后边
         this.append(`(${link})`)
      })
      //这个this是jq对象
      return this;
   }
})(window,window.jQuery)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
  
<a href="https://www.jd.com">京东商城a>
<a href="https://www.taobao.com">淘宝商城a>
<a href="https://www.biyao.com">必要商城a>

<script src="./js/jquery.js">script>

<script src="./utils/jquery.showlinklocation.js">script>
<script>
    // 监听文档完全解析完毕
    $(function(){
        $('a').showlinklocation().css("color",'red');
    });
script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

相关阅读:
java知识点快速过
2022/07/04学习记录
【NVMe2.0b 14-6】Format NVM、Keep Alive、Lockdown command
算法-打家劫舍
vue3 自定义loading
vue组件间的通讯方式
QCefView入门及环境配置
使用nodejs的wxmnode模块，开发一个微信自动监控提醒功能，做个天气预报。
#循循渐进学51单片机#变量进阶与点阵LED#not.6
06文本搜索工具——grep以及正则表达式

原文地址：https://blog.csdn.net/qq_45052183/article/details/138034138