jquery的插件是实现某一个功能,jquery并不是一个十全十美的框架,必然有其自身没有涉及到的内容,如果想通过jquery操作没有涉及到的内容,没法直接操作,这时候必须先加载插件,才能使用jq没有涉及到的功能,这个本来没有的功能被插件带来了。
比如:jq没有提供cookie的操作,我们需要搜索或者官网(jquery-cookie)找到它的插件。
插件的用法:基于jquery,所以必须先引入jquery,再引入插件,才能使用。
<script src="../jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script>
console.log($.cookie);
// 看说明书,readme文件
// cookie的使用...
$.cookie("user","admin",{
expires:3,
path:"/"
});
// 如何查看文档:
// 1.拿到文档:jq文档
// 官网,第三方翻译
// 2.1找目录
// 2.2直接查找对应的API
// 3.点开方法详细,根据案例,或方法说明,实际测试
</script>
jquery的插件开发
<script src="../jquery.js"></script>
<script>
// var $ = "hello";
// var jQuery = "world";
</script>
<script src="jquery.myAnimate.1.0.js"></script>
<script>
// jQuery的插件开发:
// 1.确定功能,确定插件的名字(文件名):
// jquery.myAnimate.1.0.js
// 2.创建文件后,开启匿名函数,严格模式
// 3.处理jq的入口变量
// 放置被使用者无意间修改$入口
// 4.准备向jq绑定方法
// 5.在封装的插件函数的内部,实现功能
// 内部的this,指向jq对象
// 如果是绑定给DOM对象,那么this指向方法能被执行时选择器选中的DOM元素
$("#box").myAnimate({
left:500
},1000).then((code)=>{
alert(code)
})
</script>
jquery.myAnimate.1.0.js
;(function($){
"use strict";
$.fn.myAnimate = function(tar, time){
// console.log(this);
time = time || 400;
return new Promise((resolve)=>{
this.animate(tar,time,function(){
resolve("当前元素当前动画执行结束");
})
})
}
})(jQuery);
jquery的扩展
<script src="../jquery.js"></script>
<script>
// Array.prototype.norepeat = function(){}
// var arr = [];
// arr.norepeat();
// jq的自定义扩展
// $.abc();
// 直接扩展给jquery对象,执行时必须通过jq对象执行,也叫jq的全局方法
// $.extend({
// qwe:"hello",
// abc:function(){
// console.log("hello,world");
// }
// })
// console.log($.qwe);
// $.abc();
// 先执行jq,传参,选择器,选择器返回的是DOM元素,这种执行为jq的DOM方法
// 添加给jq对象的方法,否则jq的DOM元素拿不到
// 需要直接添加给jq的DOM对象,才能够通过DOM元素拿到这个方法
// jq的DOM对象是,固定写法:$.fn
// $.fn.extend({
// asd:function(){
// console.log("extend")
// }
// })
// $("#box").asd();
// $.abc();
// 利用jq的extend这个方法,可以自己开发jq插件
</script>
多库共存问题
<script src="../jquery.js"></script>
<script>
// 多库共存:
// jQ是一个库
// 如果项目中不仅引入了一个jq还引入了其他内容,两个第三方都要使用
// jq提供了一个$的入口,如果还有另外一个第三方也提供了$入口,咋办?
// jq提供了另一个jQuery的入口,如果还有另外一个第三方也提供了jQuery入口,咋办?
// 为了防止这种情况的发生,jq让出了自己的入口,可以让开发者自行修改jq的入口
// jq自身做了一个自我删除的操作
// 命名要符合变量的命名规则
var aa = $.noConflict(true);// ;两个都删除
console.log($); // undefined
console.log(jQuery); // undefined
console.log(aa); // jquery函数
aa("#box").css({
width:100,height:100,background:"red"
}).animate({
width:200,
height:300
})
</script>