jQuery扩展方法
jQuery的扩展方法分为两种情况扩展
- 直接在jQuery的对象上面进行扩展
- 在jQuery选择器结果上面去扩展
在jQuery的对象上面扩展方法
jQuery在内部提供一种机制，可以直接在原有的框架上面去扩展方法，这个方法是$.extend()，它接收一个对象做为参数
$.extend({
方法1:function(){
},
方法2:function(){
}
})
在一般情况之下，如果我们真的要扩展jQuery的方法，我们一般都是这么做的
- 第一步：先新建一个js文件叫
jQuery.extend.js - 第二步：在这个js文件里面去进行方法的扩展，代码如下
/**
* @description jQuery的扩展方法
*/
(function($){
$.extend({
/**
* @name myForEach 自己的forEach方法
* @param {Array} arr 要遍历的数组
* @param {function} callBack 遍历的回调函数
*/
myForEach:function(arr,callBack){
if(arguments.length<2){
//参数不是2个
throw new Error("参数不对");
}
else{
for(var i=0;i<arr.length;i++){
//i代表当前索引
//arr[i] 代表当前遍历的元素
callBack(i,arr[i]);
}
}
}
})
})(jQuery);
方法是一个封闭的环境 ，所以我们使用了立即执行函数的闭包（本质就是立即执行的匿名函数），如果这个闭包使用到了外部的变量，我们就把这个变量当成参数给传递进去
在jQuery的选择器上面扩展方法
jQuery通过选择器选中元素以后可以返回结果，如果要在选中的结果上面去扩展方法，这个时候就要找$.fn.extend()
/**
* @description jQuery的扩展方法
*/
(function($){
//在jQuery对象上面扩展
$.extend({
/**
* @name myForEach 自己的forEach方法
* @param {Array} arr 要遍历的数组
* @param {function} callBack 遍历的回调函数
*/
myForEach:function(arr,callBack){
if(arguments.length<2){
//参数不是2个
throw new Error("参数不对");
}
else{
for(var i=0;i<arr.length;i++){
//i代表当前索引
//arr[i] 代表当前遍历的元素
callBack(i,arr[i]);
}
}
}
});
//在选择器上面扩展
$.fn.extend({
htmlAll:function(){
// console.log(this);
//这个时候this指向的是你选中的元素的结果 $(".ul1>li")这个结果
var resultArr=[];
this.each(function(index,item){
resultArr.push($(item).html());
});
return resultArr;
}
})
})(jQuery);
通过jQuery扩展方法实现jQuery的第一个插件
现在我们通过jQuery去写了一个自定义的右键菜单，但是这个菜单并不能实现通用化的效果
该效果代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery扩展方法</title>
<style>
.div1,.div2{
width:200px;
height:200px;
border: 1px solid black;
}
.my-contextmenu{
margin: 0px;
padding: 0px;
list-style-type: none;
width: 130px;
border: 1px solid lightgray;
position:fixed;
left:0px;
top:0px;
background-color:white;
box-shadow:0px 0px 5px 3px lightgray;
}
.my-contextmenu li{
height:30px;
border-top:1px solid lightgray;
text-align:center;
line-height:30px;
font-size:14px;
cursor:pointer;
}
.my-contextmenu li:nth-child(even){
background-color:#ececec;
}
.my-contextmenu li:hover{
background-color:lightskyblue;
font-weight:bold;
}
</style>
</head>
<body>
<div class="div1">
</div>
<ul class="my-contextmenu">
<li>去百度</li>
<li>弹窗</li>
<li>打印你好</li>
<li>询问框</li>
</ul>
<hr />
<div class="div2"></div>
</body>
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
$(function(){
$(".div1").on("contextmenu",function(event){
event.preventDefault(); //阻止事件的默认行为
console.log(event);
//现在先模拟一个右键菜单
var x=event.clientX;
var y=event.clientY;
$(".my-contextmenu").css({
left:x+"px",
top:y+"px"
}).show(200);
});
$(document).click(function(){
$(".my-contextmenu").hide();
})
//-------假设我们写固定死，应该怎么写-------
$(".my-contextmenu>li").click(function(){
var index=$(this).index();
if(index==0){
location.href="http://www.baidu.com";
}
else if(index==1){
alert("你好");
}
else if(index==2){
console.log("你好");
}else if(index==3){
confirm("我在问你");
}
})
});
</script>
</html>
它没有实现做对的可移植性与通用化，这个时候，如果我们想在其它的地方也去实现一个这样的右键菜单，这个时候，我们发现上面的代码我们又要重新的写一次
这个时候，我们就要考虑能不能把上面的右键菜单进行封装，实现导入即用
$(".div1").addContextMenu()
核心JS代码
/**
* @name addContextMenu 添加右键菜单方法
*/
(function ($) {
$.fn.extend({
/**
* @author 杨标
* @param {Array} config 右键菜单配置,以对象为单位,text属性代表右键菜单文本,fn属性代表单击以后的回调方法 {text:string,fn:callBack}
*/
addContextMenu: function (config) {
//选创建右键菜单
if (config instanceof Array) {
var ul = document.createElement("ul");
ul.className = "my-contextmenu";
$.each(config,function(index,ele){
var li=document.createElement("li");
li.innerHTML=ele.text;
$(li).click(ele.fn);
ul.appendChild(li);
});
document.body.appendChild(ul);
}
//右键菜单创建完毕
this.on("contextmenu",function(event){
//阻止事件的默认行为
event.preventDefault();
var x=event.clientX;
var y=event.clientY;
$(ul).css({
left:x+"px",
top:y+"px"
}).show(200).siblings(".my-contextmenu").hide();
});
$(document).click(function(){
$(".my-contextmenu").hide();
});
}
})
})(jQuery);
与之对应的CSS代码
@charset "utf-8";
/*配置jQuery.contextmenu.js一起使用，实现自定义的右键菜单效果*/
.my-contextmenu{
margin: 0px;
padding: 0px;
list-style-type: none;
width: 130px;
border: 1px solid lightgray;
position:fixed;
left:0px;
top:0px;
background-color:white;
box-shadow:0px 0px 5px 3px lightgray;
display:none;
}
.my-contextmenu li{
height:30px;
border-top:1px solid lightgray;
text-align:center;
line-height:30px;
font-size:14px;
cursor:pointer;
}
.my-contextmenu li:nth-child(even){
background-color:#ececec;
}
.my-contextmenu li:hover{
background-color:lightskyblue;
font-weight:bold;
}
我们将上面的js方便命名为jQuery.contextmenu.js，将CSS文件命名为jQuery.contextmenu.css，它们一套，同时使用的，如果要使用这个右键菜单，我们必须同时导入上面的JS与CSS文件
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery扩展方法右键菜单</title>
<link rel="stylesheet" href="./js/jquery_contextmenu/jQuery.contextmenu.css">
<style>
.div1,.div2{
width:200px;
height:200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="div1">
</div>
<hr />
<div class="div2"></div>
</body>
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery_contextmenu/jQuery.contextmenu.js"></script>
<script>
$(function(){
//在div1上面添加右键菜单
$(".div1").addContextMenu([{
text:"提交",
fn:function(){
alert("你提交了，所以要去百度");
location.href="http://www.baidu.com";
}
},{
text:"退回",
fn:function(){
console.log("你要退回");
}
}]);
//在div2上面添加右键菜单
$(".div2").addContextMenu([{
text:"测试",
fn:function(){
console.log("测试")
}
}]);
})
</script>
</html>
注意：在导入我们刚刚编写的插件的时候，要注意一个问题，应该先导入jQuery再去导入我们自己编写的插件jQuery.contextmenu.js。同时以后导入所以的jQuery插件都是先导jQuery再导插件
评论区