对jQuery相信很多同学和我一样平时都是拿来主义，没办法，要怪只能怪jQuery太火了，各种插件基本能满足平时的要求。但是这毕竟不是长久之道，古人云：“授之以鱼，不如授之以渔”。
为了方便之前没有接触的同学，先来回顾一下jQuery的插件机制吧。
复制代码 代码如下:
//添加check和uncheck插件
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
//插件的使用
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
其实jQuery的插件非常简单，怪不得jQuery插件满天飞，之前是我想复杂了，总觉得写插件是很高深的事情，不知道有没有同感的同学。
动手之前先来做一下需求分析吧（ps：哥是学软件工程出生的学费很坑爹啊，不搞搞需求分析对不起学费啊，呵呵）。
其实也没啥好分析的就是做出如下效果：
鼠标放上去的时候弹出微信扫一扫，微信太火了，老板让网站上放一个，所以哥写了个插件满足一下他，发工资就是上帝，给钱干活，不要给我谈节操，it宅男都是三观尽毁，节操全无的。扯远了。看效果图吧。
使用方法其他jQuery没什么不同：
复制代码 代码如下:
$(function(){
var t = $(".weixin").Tip({
title:'微信扫一扫',
content:'<img src="img/weixin.jpg" width="160px" height="160px;">',
html:true,
direction:'bottom'
});
t.bind({
mouseover:function(){
t.Tip("show");
},
mouseout:function() {
t.Tip("hide");
}
});
});
看一下可配置的选项吧
复制代码 代码如下:
defaultOptions :{
title : '',//标题
content : '',//内容
direction : 'bottom',//弹出反向，相对于选中元素
html : false,//是否允许内容为html元素
template : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'//弹出框模版
}
最后上高清无码源码有兴趣的看看，没兴趣的ctrl+c，ctrl+v吧
复制代码 代码如下:
!function($){
var Tip = function(element, options){
this.init(element, options);
}
Tip.prototype = {
constructor : Tip,
init : function(element, options){
this.element = $(element);
this.options = $.extend({},this.defaultOptions,options);
},
show : function() {
if (!this.tip) {
this.tip = this.getTip();
var id="code92464">
.tip {
position: absolute;
padding: 3px;
background: #efefef;
border-radius: 2px;
top: 0px;
left: 0px;
}
.tip .tip-inner {
background: #fafafb;
border: 1px solid #d8d8d8;
}
.tip .tip-inner h3 {
font-size: 14px;
padding: 5px;
border-bottom: 1px solid #eee;
}
.tip .tip-inner .tip-container {
padding: 5px;
}
以上就是本文的所有内容了，小伙伴们对如何编写jQuery插件是否有了新的 认识了呢，希望大家能够喜欢本文。