如何封装自定义插件？
两种方式：
$.fn.method = function(){} //实例方法
$.method = function(){} //静态方法
两种方法的区别就在于，js代码中的自启动函数中，添加方法的对象不同，实例方法是添加到 上面。
方法一：
（1）创建jQuery-bgColor.js代码
(function($){
//需要给jQuery的原型添加方法
$.fn.bgColor = function(color){
// console.log(this); // 获取到的this是当前的调用对象div
this.css('background-color',color);
//返回jQuery对象
return this;
}
}(jQuery));
（2）调用
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jQuery-bgColor.js" ></script>
<script>
$(function(){
$('div').width(100).height(100).bgColor('red');
})
</script>
方法二：
（1）创建jQuery-add.js代码
(function($){
$.add = function(num1,num2){
return num1 + num2;
}
}(jQuery))
（2）调用
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jQuery-bgColor.js" ></script>
<script type="text/javascript" src="js/jQuery-add.js" ></script>
<script>
$(function(){
console.log($.add(10,20));
})
</script>
案例：自定义表格插件
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
display: table;
border-spacing: 2px;
border: 1px solid hotpink;
width: 500px;
border-collapse: collapse;
}
thead{
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
th {
border: 1px solid hotpink;
}
tbody{
text-align: center;
}
td{
border: 1px solid hotpink;
}
</style>
</head>
<body>
<div id="c">
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jQuery-table.js" ></script>
<script>
$('#c').table(['序号','姓名','年龄','工资'],[
{n:'xy',age:20,s:10},
{n:'wy',age:18,s:10},
{n:'zf',age:18,s:9}
]);
</script>
jQuery-table.js文件
(function($){
/**
* 给$原型添加table方法
* @param {Object} arrTableHead 生成表格表头的数据
* @param {Object} arrTableBody 生成表格主体的数据
*/
$.fn.table = function(arrTableHead,arrTableBody){
// console.log(this); //调用table方法的jQuery对象
var list = [];
list.push('<table>');
//生成表头
list.push('<thead>');
list.push('<tr>');
for(var i = 0 ;i<arrTableHead.length;i++){
list.push('<th>');
list.push(arrTableHead[i]);
list.push('</th>');
}
list.push('</tr>');
list.push('</thead>');
//生成表格主体
for(var i = 0;i<arrTableBody.length;i++){
list.push('<tr>');
list.push('<td>');
list.push(i+1);
list.push('</td>');
//遍历arrTableBody数组元素
for(var key in arrTableBody[i]){
list.push('<td>');
list.push(arrTableBody[i][key]);
list.push('</td>');
}
list.push('</tr>');
}
list.push('</table>');
// console.log(list.join(""));
this.html(list.join(""));
return this;
}
}(window.jQuery));
案例：自定义tab栏插件
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrapper{
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top:100px ;
}
.tab{
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li{
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #FFFFFF ;
}
.tab span{
position: absolute;
right: 0;
top:10px;
background: #DDDDDD;
width: 1px;
height: 14px;
overflow: hidden;
}
.products .main{
float: left;
display: none;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<ul class="tab" id="tab-menu">
<li class="tab-item active">国际大牌</li>
<li class="tab-item">国妆名牌</li>
<li class="tab-item">清洁用品</li>
<li class="tab-item">男士精品</li>
</ul>
<div class ="products" id="tab-main">
<div class="main selected">
<a href=""><img src="img/2.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/3.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/4.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/5.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery3.5.1.js" ></script>
<script type="text/javascript" src="js/jQuery-tabs.js" ></script>
<script>
$(function(){
$('#wrapper').tabs({
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
})
})
</script>
jQuery-tabs.js文件：
$(function($){
/**
* 给$原型添加tabs()方法
* @param option.tabHeads 需要注册事件的页签选择器
* @param option.tabHeadsClass 触发事件页签需要给页签添加的类
* @param option.tabBodys 需要显示的页面选择器
* @param option.tabBodysClass 触发事件页签需要给页面添加的类
*
*/
$.fn.tabs = function(option){
var $bigDiv = this;
//通过参数传递过来的页签选择器，获取到页签,给这些页签注册单击事件
$bigDiv.find(option.tabHeads).on('click',function(){
//给当前鼠标点击的页签添加option.tabHeadsClass类，其他的兄弟移除option.tabHeadsClass类
$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
//获取当前点击的页签的索引
var idx = $(this).index();
console.log(idx);
//获取索引一致的页面，给他添加option.tabBodysClass类，其他兄弟页面移除option.tabBodysClass类
$bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
});
return $bigDiv;
};
}(jQuery));
网友评论