Jquery插件的写法

DaftJayee

于 2020-07-09 15:54:25 发布

阅读量181

点赞数

分类专栏： javascript 文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_43540219/article/details/107230630

版权

javascript 专栏收录该内容

112 篇文章 0 订阅

订阅专栏

JQuery.fn.extend(object) ===》扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
JQuery.extend(object) ===》扩展jQuery对象本身。

$.fn.extend() ===》 $("#box").xxx():局部
$.extend() ===》$.xxx() : 全局

插件的写法（规则）
		1》引入方式
			<script src='jquery1.7.js'></script>
       <script src='插件'></script>
		2》插件命名
				jquery.插件名称.js
		3》插件内部:匿名函数自我执行
				(function(){
				})()
		4》分号:避免出现问题 
				;(function(){
				})();
		5》为了实现连缀写法,每一个插件最后返回this

EXP1：
1>index.html:

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src='jquery1.7.js'></script>
<script src='jquery.color.js'></script>	
<script>
\$(function(){
$("ul").eq(0).color();
$("ul").eq(1).color({
bg:"blue"
});
$("ul").eq(2).color();})	
</script>
</body>

2>jquery.color.js:

;(function($){
$.fn.color = function( options ){

	var defaults = {


		bg:"red"

	}

	var settings = $.extend({},defaults,options);


	$(this).css({

		color:settings.bg

	})

}

//插件灵活性
//传递参数
	//a)默认参数
	//b)传递==》修改参数
return this;//返回当前元素，这样可以继续在后面.出函数
})(jQuery);

EXP2：

1>index.html:

<style>
*{margin:0;padding:0;}
#tab1{
	width:400px;
	height: auto;
	border:1px solid #ccc;
}
#tab2{
	
	width:200px;
	height: auto;
	border:1px solid red;
	
}
ul,ol{
	list-style: none;
}
ul li{
	float: left;
	width:200px;
	height: 100px;
	text-align: center;
}
.hide{
	display: none;
}
.active{
	background: orange;
	opacity: 0.5;
}
ol li{
	width:50px;
	height: 50px;
	border-radius: 50%;
	background: #000;
	float:left;
	margin:20px;
}
#tab2 p{
	width:200px;
	height: 200px;
	line-height: 200px;
}
.bg{
	background: red;
}
</style>
<body>


<div id="tab1">

<ul>
	<li class="active">信息公告</li>
	<li>服务公告</li>
</ul>

<div>
	<p>AAAAAAAAAAAAAAAAAAAAAAAAAA</p>
	<p class="hide">BBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</div>

</div>

<div id="tab2">

<ol>
	<li class="bg"></li>
	<li></li>
</ol>

<div>
	<p>1111111111</p>
	<p class="hide">2222222222</p>
</div>

2>jquery.tab.js:

;(function($){


$.fn.tab = function(options){


	var defaults = {
		parent:"#tab1",
		mouseEvent:"click",
		active:"active"
	}

	var settings = $.extend({},defaults,options);


	$(this).find("li").bind(settings.mouseEvent,function(){

		$(this).addClass(settings.active).siblings().removeClass(settings.active);

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

		$(settings.parent).find("p").eq(idx).show().siblings().hide();

	})

	return this;

}

})(jQuery);

DaftJayee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery插件的写法

JQuery.fn.extend(object) ===》扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。JQuery.extend(object) ===》扩展jQuery对象本身。$.fn.extend() ===》 $("#box").xxx():局部$.extend() ===》$.xxx() : 全局插件的写法（规则） 1》引入方式 <script src='jquery1.7.js'></script> <script
复制链接

扫一扫