jquery的插件_jquery.color.js插件在什么位置-CSDN博客

本文链接：https://blog.csdn.net/m0_59745705/article/details/127845491

什么是插件?

其实就是用来做扩展功能的.

jQuery插件库: jq22.com

jquery的颜色插件

//引入jquery颜色插件（是用js写的代码）

$(function () {

//需求: 点击按钮,让div做动画, left改变到800 , 改变背景色

//animate动画不会改变背景色, 如果非要改,就要使用插件.

$('#btn').on('click', function () {

//让div做动画

$('div').animate({

left:800,

width:100,

height:100,

backgroundColor:'green'

},2000);

}); });

插件的使用（省市联动）

//一般来说插件是什么功能，方法就是什么名字

插件的封装

自定义bgColor插件

$(function () {

//1.我们自己能不能封装插件呢?

// //$('div').width(100).height(100).css('backgroundColor','red'); //设置背景色有些麻烦.

// $('div').width(100).height(100).bgColor('red'); //现在jQuery中没有这个bgColor方法,所以报错了.

// //我们可以自己封装一个bgColor方法.

//2.如何自己封装插件.

//引入插件时要先引入jq文件，因为jquery文件中有jquery方法

//2.1 给jQuery的原型添加方法.

//$('div').width(100).height(100).bgColor('red');

//$('div').bgColor('green').width(100).height(100);

//2.2 给jQuery直接添加方法.

console.log($.add(10, 20)); //直接$点出来的是静态方法，jquery点出来的是实例方法

});

add插件

(function ($) {

//直接给$添加方法.

$.add = function (num1,num2) {

return num1+num2;
}
}(jQuery));

bgColor插件

(function ($) {

//需要给jQuery的原型添加方法.

$.fn.bgColor = function (yanse) { //动态方法

//console.log(this); //this是调用这个bgColor方法的jQuery对象.

this.css('backgroundColor',yanse);

//返回调用这个方法的jQuery本身

return this; //不写的话，用完bgColor后不能再.width(),因为bgColor没有返回值默认undefined再.width（）会报错
}

}(jQuery));

jquery表格插件

<title>Document</title>

$('#c').table(['序号', '姓名', '年龄', '工资'],[

{n: 'xy', age: 20, s: 10},

{n: 'wy', age: 10, s: 8},

{n: 'pl', age: 11, s: 9}
]);
</script>

表格插件 jQuery-table.js

(function ($) {
/**

* 给$的原型添加table方法.

* @param arrTableHead 生成表格表头的数组

* @param arrTableBody 生成表格主体部分的数组

$.fn.table = function (arrTableHead,arrTableBody) {

//console.log(this);//这里的this是一个jQuery对象,是调用这个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>')

//生成一个序号td.

list.push('<td>'+(i+1)+'</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(""));

}
}(window.jQuery));

tab切换插件

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/tab.css">
</head>
<body>
<div class="wrapper" id="wrapper">
<ul class="tab" id="tab-menu">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products" id="tab-main">
<div class="main selected">
<a href=" ">< img src="images/guojidapai.jpg" alt=""/></a >
</div>
<div class="main">
<a href="###">< img src="images/guozhuangmingpin.jpg" alt=""/></a >
</div>
<div class="main">
<a href="###">< img src="images/qingjieyongpin.jpg" alt=""/></a >
</div>
<div class="main">
<a href="###">< img src="images/nanshijingpin.jpg" alt=""/></a >
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jQuery-tabs.js"></script>
<script>
$(function () {
$('#wrapper').tabs({
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
});
});

tab插件 jQuery-tab.js

(function ($) {

* 给$的原型添加tabs方法

* @param option.tabHeads 需要注册事件的页签们选择器

* @param option.tabHeadsClass 触发事件的页面要添加的类

* @param option.tabBodys 要显示的页面们选择器

* @param option.tabBodysClass 索引一致要显示的页面要添加的类.

$.fn.tabs = function (option) {

var $bigDiv = this; //把this先存进$bigDiv变量中.

//通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.

$bigDiv.find(option.tabHeads).on('click', function () {

//给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.

$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);

//获取当前点击的页面的索引

var idx = $(this).index();

//获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.

$bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);

});

//返回值.

return $bigDiv;

}
}(window.jQuery));

用插件好处

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.tab-head {
width: 400px;
height: 50px;
background: #ccc;
}
.tab-head li {
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.tab-head li.active {
background: hotpink;
}
.tab-body {
width: 398px;
height: 398px;
border: 1px solid #ccc;
}
.tab-body .item {
display: none;
padding: 20px;
}
.tab-body .item.selected {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-head">
<li class="active">页签1</li>
<li>页签2</li>
<li>页签3</li>
<li>页签4</li>
</ul>
<div class="tab-body">
<div class="item selected">
<p>内容1</p >
<p>内容1</p >
<p>内容1</p >
<p>内容1</p >
<p>内容1</p >
</div>
<div class="item">
<p>内容2</p >
<p>内容2</p >
<p>内容2</p >
<p>内容2</p >
<p>内容2</p >
</div>
<div class="item">
<p>内容3</p >
<p>内容3</p >
<p>内容3</p >
<p>内容3</p >
<p>内容3</p >
</div>
<div class="item">
<p>内容4</p >
<p>内容4</p >
<p>内容4</p >
<p>内容4</p >
<p>内容4</p >
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jQuery-tabs.js"></script>
<script>
$(function () {
//使用插件. 只需要按照需求传参就可以完成功能
$('.tab').tabs({
tabHeads:'.tab-head>li',
tabHeadsClass:'active',
tabBodys:'.item',
tabBodysClass:'selected'
});
});