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

前端工程化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(){//让他只能是个aconsole.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)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://www.jd.com">京东商城</a>
<a href="https://www.taobao.com">淘宝商城</a>
<a href="https://www.biyao.com">必要商城</a>
<!-- 导入jquery文件 -->
<script src="./js/jquery.js"></script>
<!-- 引入我们的插件 -->
<script src="./utils/jquery.showlinklocation.js"></script>
<script>// 监听文档完全解析完毕$(function(){$('a').showlinklocation().css("color",'red');});
</script></body>
</html>