基于jq实现插件讲述基本操作，提示信息

六月初六月初 JavaScipt 2019-05-09 11:24:52

网上很多插件基本都是基于jq实现的，那么如果我们要实现一个基于jq的插件要如何编写代码呢？本文以一个简单提示信息为例来讲述基于jq实现插件效果！

实现效果：


完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.messageBox{
				padding: .5rem 1.5rem;
				background: rgba(0,0,0,.5);
				color: #fff;
				border-radius: .3rem;
				position: fixed;
				top: 50%;
				left: 50%;
				transform:translate(-50%,-50%);
				z-index: 99999;
			}
		</style>
		<script src="jquery-1.11.3.min.js"></script>
		<script>
			$(function(){
				jQuery.fn.extend({
					cbmessage:function(content){
						$(".messageBox").fadeOut().remove()
						var i = 3;
						setTimeout(function(){
							$(".messageBox").fadeOut().remove()
						},3000)
						$("body").append('<div class="messageBox">'+content+'</div>').fadeIn();
						return this;
					}
				})
			})
			//调用
			$(function(){
				$("body").cbmessage("六月初博客站")
			})
		</script>
	</head>
	<body>
	</body>
</html>

大致讲解：

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)  

cbmessage：自定义的方法名

在方法中编写对应的操作，如显示隐藏，插入html等等。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！