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)
<!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>
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
