jQuery插件开发主要包括两种：类级别插件和对象级别插件开发，类级别插件开发我们可以理解为就是给jQuery提供静态方法，对象级别插件开发我们可以理解为jQuery对象添加方法，关于类级别和对象级别插件开发这里不再做详细介绍，大家可以参考这个链接：http://www.iteye.com/topic/545971。

下面我主要拿一个实例来讲一下对象级别的插件开发，此实例主要包括：DivTest01.aspx、divTest1.js、DivTest01.css、jquery-1.3.2-vsdoc2.js、jquery-1.4.2.js，其中DivTest01.css是DivTest01.aspx使用的样式，divTest1.js是通过jquery封装的对象级别的插件主要是控制公告中的标签显示样式的，jquery-1.3.2-vsdoc2.js主要是jquery智能感知的，有了它可以很方便，这里先把DivTest01.aspx这个页面的代码贴出来，如下图显示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><link href="http://www.cnblogs.com/css/Global.css" rel="stylesheet" type="text/css" /><link href="DivTest01.css" rel="stylesheet" type="text/css" /><script src="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script><script type="text/javascript" src="http://www.cnblogs.com/FieldVarify/jquery-1.4.2.js"></script><script type="text/javascript" src="divTest1.js"></script><script type="text/javascript" language="javascript">$(document).ready(function () {$.fn.InitTab("div_notice", "table_hd", "table_pal", true);})</script>
</head>
<body><form id="form1" runat="server"><div id="homeLimq"><div class="divtop"><div class="divtoptitle">你好,欢迎光临李蒙强测试站点！！</div></div><div class="layout margintop"><!--最左侧300布局--><div class="left_first_300"><div id="div_notice" class="notice"><div class="table_hd"><ul><li class="tab-cur">通知</li><li>公告</li></ul></div><div class="table_bd"><div class="table_pal"><ul><li><a>测试公告1</a></li><li><a>测试公告2</a></li><li><a>测试公告3</a></li><li><a>测试公告4</a></li></ul></div><div style="display: none;" class="table_pal"><ul><li><a>测试公告5</a></li><li><a>测试公告6</a></li><li><a>测试公告7</a></li><li><a>测试公告8</a></li></ul></div></div></div><div id="div_test02" class="notice margintop"><div class="table_hd"><ul><li class="tab-cur">新闻</li><li>图表</li></ul></div><div class="table_bd"><div class="table_pal"><ul><li><a>测试公告1</a></li><li><a>测试公告2</a></li><li><a>测试公告3</a></li><li><a>测试公告4</a></li></ul></div><div style="display: none;" class="table_pal"><ul><li><a>测试公告5</a></li><li><a>测试公告6</a></li><li><a>测试公告7</a></li><li><a>测试公告8</a></li></ul></div></div></div><div id="div_test03" class="notice margintop"><div class="table_hd"><ul><li class="tab-cur">你好1</li><li>你好2</li></ul></div><div class="table_bd"><div class="table_pal"><ul><li><a>测试公告1</a></li><li><a>测试公告2</a></li><li><a>测试公告3</a></li><li><a>测试公告4</a></li></ul></div><div style="display: none;" class="table_pal"><ul><li><a>测试公告5</a></li><li><a>测试公告6</a></li><li><a>测试公告7</a></li><li><a>测试公告8</a></li></ul></div></div></div></div><!--最右侧700布局--><div class="left_second_700 marginleft"><div id="div_test04" class="test04"><div style="background-color: #eee; height: 28px"><h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块4</h4></div><div>模块4</div></div><div id="div1" class="test05 margintop"><div style="background-color: #eee; height: 28px"><h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块5</h4></div><div>模块5</div></div><div id="div2" class="test06 margintop marginleft"><div style="background-color: #eee; height: 28px"><h4 style="margin: 0px; padding-left: 12px; padding-right: 0px; padding-top: 2px; padding-bottom: 0px; font-size: 14px;">模块5</h4></div><div>模块5</div></div></div></div><div style="width: 1001px; margin: 0 auto;"></div></div></form>
</body>
</html>

DivTest01.aspx页面使用的样式，如下：

BODY
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H1
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H2
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H3
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H4
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H5
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
H6
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
a
{color:#3e3e3e;
}a:hover{color:#0092d2;}
HR
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
P
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
BLOCKQUOTE
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
DL
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
DT
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
DD
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
UL
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
OL
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
LI
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
PRE
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
FORM
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
FIELDSET
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
LEGEND
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
BUTTON
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
INPUT
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
TEXTAREA
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
TH
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
TD
{padding-bottom: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;
}
BODY
{font: 12px/1.5 tahoma,arial,宋体;
}
BUTTON
{font: 12px/1.5 tahoma,arial,宋体;
}
INPUT
{font: 12px/1.5 tahoma,arial,宋体;
}
SELECT
{font: 12px/1.5 tahoma,arial,宋体;
}
TEXTAREA
{font: 12px/1.5 tahoma,arial,宋体;
}
H1
{font-size: 100%;
}
H2
{font-size: 100%;
}
H3
{font-size: 100%;
}
H4
{font-size: 100%;
}
H5
{font-size: 100%;
}
H6
{font-size: 100%;
}
ADDRESS
{font-style: normal;
}
CITE
{font-style: normal;
}
DFN
{font-style: normal;
}
EM
{font-style: normal;
}
VAR
{font-style: normal;
}
CODE
{font-family: courier new,courier,monospace;
}
KBD
{font-family: courier new,courier,monospace;
}
PRE
{font-family: courier new,courier,monospace;
}
SAMP
{font-family: courier new,courier,monospace;
}
SMALL
{font-size: 12px;
}
UL
{list-style-type: none;
}
OL
{list-style-type: none;
}
A
{text-decoration: none;
}
A:hover
{text-decoration: underline;
}
SUP
{vertical-align: text-top;
}
SUB
{vertical-align: text-bottom;
}
LEGEND
{color: #000;
}
FIELDSET
{border-right-width: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;
}
IMG
{border-right-width: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;
}
BUTTON
{font-size: 100%;
}
INPUT
{font-size: 100%;
}
SELECT
{font-size: 100%;
}
TEXTAREA
{font-size: 100%;
}
TABLE
{border-spacing: 0;border-collapse: collapse;
}
#page
{margin-left: auto;margin-right: auto;
}
#header
{margin-left: auto;margin-right: auto;
}
#content
{margin-left: auto;margin-right: auto;
}
#footer
{margin-left: auto;margin-right: auto;
}
.w950
{width: 950px;
}
.col-main
{min-height: 1px;width: 100%;float: left;
}
.col-sub
{float: left;
}
.col-extra
{float: left;
}
.layout:after
{display: block;height: 0px;clear: both;content: ' ';
}
.main-wrap:after
{display: block;height: 0px;clear: both;content: ' ';
}
.col-sub:after
{display: block;height: 0px;clear: both;content: ' ';
}
.col-extra:after
{display: block;height: 0px;clear: both;content: ' ';
}
.layout
{zoom: 1;
}
.main-wrap
{zoom: 1;
}
.col-sub
{zoom: 1;
}
.col-extra
{zoom: 1;
}
HTML
{zoom: expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true);}(this));
}
#site-nav {BORDER-BOTTOM: #dcdcdc 1px solid; MIN-WIDTH: 950px; WIDTH: auto
}
#site-nav-bd {Z-INDEX: 10000; POSITION: relative; PADDING-BOTTOM: 3px; LINE-HEIGHT: 22px; MARGIN: 0px auto; PADDING-LEFT: 0px; WIDTH: 950px; PADDING-RIGHT: 0px; HEIGHT: 21px; COLOR: #000; PADDING-TOP: 3px
}
#site-nav A {COLOR: #666
}
#site-nav A:hover {COLOR: #f50
}
#site-nav .login-info {FLOAT: left
}
#site-nav .login-info A {MARGIN-RIGHT: 8px
}
#site-nav .login-info A.user-nick {COLOR: #0092d2; MARGIN-RIGHT: 0px
}#site-nav .services .menu-bd DT {TEXT-ALIGN: left; LINE-HEIGHT: 1.5; COLOR: #8c8c8c; FONT-WEIGHT: bold
}
#site-nav .services .menu-bd DT A {COLOR: #057bd2
}
#site-nav .services .menu-bd DT A {WHITE-SPACE: nowrap
}
#site-nav .services .menu-bd DD A {WHITE-SPACE: nowrap
}
#site-nav .services .menu-bd DD {TEXT-ALIGN: left; LINE-HEIGHT: 1.6
}
#site-nav .services .menu-bd DD SPAN {COLOR: #8c8c8c
}
#site-nav .login-info .vip-areas {POSITION: relative
}
#site-nav .login-info .vip-areas .vip-content-show {DISPLAY: block !important
}
#site-nav .login-info .vip-areas:hover .vip-content {DISPLAY: block
}
#site-nav .login-info .vip-areas-hover .vip-content {DISPLAY: block
}
#site-nav .login-info .vip-icon0 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon1 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon2 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon3 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon4 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon5 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon6 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon7 {Z-INDEX: 10002; POSITION: relative; MARGIN: 0px 6px 0px -1px; WIDTH: 14px; DISPLAY: inline-block; HEIGHT: 14px; TOP: 0px; _margin-top: 3px
}
#site-nav .login-info .vip-icon0 {BACKGROUND-POSITION: 0px -448px
}
#site-nav .login-info .vip-icon1 {BACKGROUND-POSITION: 0px -468px
}
#site-nav .login-info .vip-icon2 {BACKGROUND-POSITION: 0px -488px
}
#site-nav .login-info .vip-icon3 {BACKGROUND-POSITION: 0px -508px
}
#site-nav .login-info .vip-icon4 {BACKGROUND-POSITION: 0px -528px
}
#site-nav .login-info .vip-icon5 {BACKGROUND-POSITION: 0px -548px
}
#site-nav .login-info .vip-icon6 {BACKGROUND-POSITION: 0px -568px
}
#site-nav .login-info .vip-content {BORDER-BOTTOM: #ded9bf 1px solid; POSITION: absolute; BORDER-LEFT: #ded9bf 1px solid; BACKGROUND-COLOR: #fcfbe5; WIDTH: 178px; DISPLAY: none; HEIGHT: 82px; BORDER-TOP: #ded9bf 1px solid; TOP: 19px; BORDER-RIGHT: #ded9bf 1px solid; LEFT: -8px; _top: 23px
}
#site-nav .login-info .vip-content B {POSITION: absolute; WIDTH: 70px; DISPLAY: block; BACKGROUND-POSITION: -41px 0px; HEIGHT: 7px; TOP: -7px; LEFT: 6px; _overflow: hidden
}
#site-nav .login-info .vip-content .vip-toy-icon1 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon2 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon3 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon4 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon5 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon6 {MARGIN: 12px 10px 5px; WIDTH: 37px; DISPLAY: block; FLOAT: left; HEIGHT: 56px; _display: inline
}
#site-nav .login-info .vip-content .vip-toy-icon6 {BACKGROUND-POSITION: 0px 0px
}
#site-nav .login-info .vip-content .vip-toy-icon5 {BACKGROUND-POSITION: 0px -60px
}
#site-nav .login-info .vip-content .vip-toy-icon4 {BACKGROUND-POSITION: 0px -120px
}
#site-nav .login-info .vip-content .vip-toy-icon3 {BACKGROUND-POSITION: 0px -180px
}
#site-nav .login-info .vip-content .vip-toy-icon2 {BACKGROUND-POSITION: 0px -240px
}
#site-nav .login-info .vip-content .vip-toy-icon1 {BACKGROUND-POSITION: 0px -300px
}
#site-nav .login-info .vip-content .vip-my-level {MARGIN-TOP: 10px; WIDTH: 100px; DISPLAY: block; FLOAT: left; HEIGHT: 20px; OVERFLOW: hidden
}
#site-nav .login-info .vip-content .vip-my-level A {MARGIN: -19px 10px 5px 60px; WIDTH: 38px; DISPLAY: block; HEIGHT: 14px
}
#site-nav .login-info .vip-content .vip-my-power {WIDTH: 96px; DISPLAY: block; FLOAT: left; HEIGHT: 22px; COLOR: #0092d2; TEXT-DECORATION: none
}
#site-nav .login-info .vip-content .vip-my-service {MARGIN-TOP: 4px; WIDTH: 51px; DISPLAY: block; BACKGROUND-POSITION: 0px -608px; FLOAT: left; HEIGHT: 16px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level0 {BACKGROUND-POSITION: -18px -448px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level1 {BACKGROUND-POSITION: -18px -468px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level2 {BACKGROUND-POSITION: -18px -488px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level3 {BACKGROUND-POSITION: -18px -508px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level4 {BACKGROUND-POSITION: -18px -528px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level5 {BACKGROUND-POSITION: -18px -548px
}
#site-nav .login-info .vip-content .vip-my-level .vip-my-level6 {BACKGROUND-POSITION: -18px -568px
}
#site-nav .quick-menu .mini-cart #mc-menu-hd {POSITION: relative; LINE-HEIGHT: 18px; MARGIN: 2px 0px 0px; WIDTH: 66px; PADDING-RIGHT: 16px; HEIGHT: 18px; COLOR: #666; OVERFLOW: hidden; _line-height: 19px
}
#site-nav .quick-menu .mini-cart B.leftline {Z-INDEX: 10002; POSITION: absolute; BORDER-LEFT: #bfbfbf 1px solid; WIDTH: 1px; DISPLAY: block; HEIGHT: 12px; OVERFLOW: hidden; TOP: 6px; LEFT: 0px
}
#site-nav .quick-menu .mini-cart B.rightline {Z-INDEX: 10002; POSITION: absolute; BORDER-LEFT: #bfbfbf 1px solid; WIDTH: 1px; DISPLAY: block; HEIGHT: 12px; OVERFLOW: hidden; TOP: 6px; LEFT: 0px
}
#site-nav .quick-menu .mini-cart B.rightline {LEFT: 108px
}
#site-nav .quick-menu .mini-cart-no-layer B.rightline {LEFT: 98px
}
#site-nav .quick-menu #mc-menu-hd:hover {BORDER-BOTTOM: #bfbfbf 1px solid; BORDER-LEFT: #bfbfbf 1px solid; BACKGROUND: white; COLOR: #f50; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #bfbfbf 1px solid; TEXT-DECORATION: none
}
#site-nav .quick-menu .hover #mc-menu-hd {BORDER-BOTTOM: #bfbfbf 1px; BORDER-LEFT: #bfbfbf 1px solid; BACKGROUND: white; HEIGHT: 21px; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #bfbfbf 1px solid; TEXT-DECORATION: none
}
#site-nav .quick-menu .hover #mc-menu-hd:hover {_border-bottom: none
}
#site-nav .quick-menu .mini-cart-no-layer #mc-menu-hd {PADDING-RIGHT: 6px
}
#site-nav .quick-menu .mini-cart #mc-menu-hd .mc-count {PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FONT-FAMILY: 'simsun'; COLOR: #f50; FONT-WEIGHT: bold; PADDING-TOP: 0px
}
#site-nav .quick-menu .mini-cart #mc-menu-hd .mc-pt3 {PADDING-BOTTOM: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 0px
}
#site-nav .quick-menu .mini-cart #mc-menu-hd B {RIGHT: 6px
}
#site-nav .quick-menu .mini-cart A .mini-cart-line {BORDER-BOTTOM: #f5f5f5 1px solid; POSITION: absolute; LINE-HEIGHT: 0; WIDTH: 65px; DISPLAY: block; HEIGHT: 0px; FONT-SIZE: 0px; TOP: 15px; LEFT: 22px
}
#site-nav .quick-menu .hover A .mini-cart-line {BORDER-BOTTOM-COLOR: white
}
#site-nav .quick-menu .mini-cart A:hover .mini-cart-line {BORDER-BOTTOM-COLOR: #f50
}
#site-nav .quick-menu .mini-cart .mini-cart-content A {POSITION: static; BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5; BORDER-RIGHT-STYLE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; DISPLAY: inline; BORDER-TOP-STYLE: none; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: auto; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px
}
#site-nav .quick-menu .mini-cart .menu-bd {}
#site-nav .quick-menu .mini-cart .mini-cart-ready {BACKGROUND: #fff; HEIGHT: auto
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-hd {PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-WEIGHT: bold; PADDING-TOP: 10px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd {BORDER-BOTTOM: #f2f2f2 1px solid
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd LI {PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; HEIGHT: 40px; CLEAR: both; OVERFLOW: hidden; PADDING-TOP: 0px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A {COLOR: #3e3e3e
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:link {COLOR: #3e3e3e
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:visited {COLOR: #3e3e3e
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft {COLOR: #3e3e3e
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-hd {COLOR: #3e3e3e
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:hover {COLOR: #f50
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd A:active {COLOR: #f50
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:hover {COLOR: #f50
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:active {COLOR: #f50
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-img {TEXT-ALIGN: center; WIDTH: 40px; ZOOM: 1; DISPLAY: inline; FLOAT: left; HEIGHT: 40px; OVERFLOW: hidden; MARGIN-RIGHT: 10px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-img IMG {VERTICAL-ALIGN: middle
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info {COLOR: #999
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-count {FLOAT: right; MARGIN-LEFT: 8px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del {FLOAT: right; MARGIN-LEFT: 8px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-count {FONT-FAMILY: arial,verdana; COLOR: #999
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del {MARGIN-TOP: -20px; CLEAR: both
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info SPAN {MARGIN-RIGHT: 6px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A {COLOR: #0092d2
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:link {COLOR: #0092d2
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-del A:visited {COLOR: #0092d2
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-info {LINE-HEIGHT: 20px; HEIGHT: 20px; OVERFLOW: hidden
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-title {LINE-HEIGHT: 20px; HEIGHT: 20px; OVERFLOW: hidden
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bd .mini-cart-title A {WIDTH: 160px; TEXT-OVERFLOW: ellipsis; ZOOM: 1; DISPLAY: inline; WHITE-SPACE: nowrap; OVERFLOW: hidden; -o-text-overflow: ellipsis
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft {TEXT-ALIGN: right; FONT-WEIGHT: bold
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-ft {PADDING-TOP: 8px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt {PADDING-TOP: 8px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt {HEIGHT: 20px; COLOR: #c33; CLEAR: both; OVERFLOW: hidden
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A {}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A {BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0px 0px 0px 10px; PADDING-LEFT: 0px; WIDTH: 113px; PADDING-RIGHT: 0px; ZOOM: 1; DISPLAY: inline-block; BACKGROUND-POSITION: 0px 0px; BORDER-TOP-STYLE: none; FLOAT: right; HEIGHT: 22px; COLOR: white; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px; _line-height: 21px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:link {COLOR: white
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:visited {COLOR: white
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:hover {COLOR: white
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:active {COLOR: white
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-price {COLOR: #f60; MARGIN-LEFT: 4px
}
#site-nav .quick-menu .mini-cart .mini-cart-content .mini-cart-bt A:hover {COLOR: white !important; TEXT-DECORATION: none
}
#site-nav .quick-menu .mini-cart .mini-cart-content STRONG {FONT-WEIGHT: bold
}

#homeLimq
{width: 100%;
}.divtop
{width: 100%;height: 120px;margin-top: 2px;background-color: #Eef;
}.divtop .divtoptitle{padding-top: 50px;padding-left: 20px;}.layout
{width: 1006px;margin: 0 auto;
}.margintop
{margin-top: 5px;
}.marginleft
{margin-left: 5px;
}.layout .left_first_300
{float: left;width: 300px;
}.notice
{float: left;width: 298px;height: 200px;border: 1px solid #EEE;
}
.notice .table_pal
{padding-bottom: 0px;padding-left: 5px;padding-right: 0px;padding-top: 8px;
}.table_bd
{border-top: #e8e8e8 1px solid;
}.table_hd
{background-color: #eee;margin-bottom: -1px;height: 29px;color: #404040;
}
.table_hd UL
{margin-left: 12px;padding-top: 8px;width: 180px;
}.table_hd LI
{float: left;height: 20px;width: 40px;padding-left: 24px;padding-right: 14px;cursor: pointer;
}.table_hd LI.tab-cur{font-weight:bold;float: left;height: 20px;width: 40px;padding-left: 24px;padding-right: 14px;background-color: #FFF;cursor: pointer;border-top: 1px solid #d5d5d5;border-left: 1px solid #d5d5d5;border-right: 1px solid #d5d5d5;}.table_bd UL
{margin-left: 12px;padding-top: 7px;width: 180px;
}.tab_pal LI
{padding-bottom: 0px;line-height: 22px;padding-left: 5px;width: 225px;padding-right: 10px;float: left;height: 22px;overflow: hidden;padding-top: 0px;text-align: left;cursor: pointer;
}.layout .left_second_700
{float: left;width: 700px;
}.left_second_700 .test04
{width: 688px;height: 200px;border: 1px solid #EEE;
}.left_second_700 .test05
{float: left;width: 340px;height: 200px;border: 1px solid #EEE;
}.left_second_700 .test06
{float: left;width: 341px;height: 200px;border: 1px solid #EEE;
}

这个页面主要是通过div层实现的一个简单的布局，运行效果见下图：

这里主要是通过jquery对象级别插件开发实现页面中通知和公告li标签的切换，我们通过一个单独的js文件divTest1.js去实现，代码如下：

/// <reference path="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc2.js" />
(function( $ ){
$.fn.InitTab = function (parentId, tab_class, content_class, ismouseover) {// 得到样式名称为tab-hd集合并循环var tabs = $("#" + parentId).find("." + content_class);$("#" + parentId).find("." + tab_class + " li").each(function (i, val) {// 给每一个li加入mouseover事件if (ismouseover) {$(val).bind({mouseover: function () {ChangeTab(val, parentId, tab_class);ChangeContent(tabs[i], parentId, content_class);}});} else {$(val).bind({click: function () {ChangeTab(val, parentId, tab_class);ChangeContent(tabs[i], parentId, content_class);}});}});};
function ChangeTab(val, parentId, tab_class) {// 通过最顶层的父id找到子节点中带有样式和li标签的元素$("#" + parentId).find("." + tab_class + " li").each(function (i, vaul) {vaul.className = "";});val.className = "tab-cur";
};
function ChangeContent(val, parentId, content_class) {$("#" + parentId).find("." + content_class).each(function (i, vaul) {vaul.style.display = "none";});val.style.display = "block";
};
//// 插件的defaults
//$.fn.TabChange.defaults = {
//    parentId: 'div_notice',
//    tab_class: 'table_hd',
//    content_class: 'table_pal',
//    ismouseover:'true'
//};
})(jQuery);

这样我们在页面中调用只要在页面中添加如下代码即可实现切换：

 $(document).ready(function () {$.fn.InitTab("div_notice", "table_hd", "table_pal", true);})

用这种方式的好处有几个方面：1、代码的可维护性非常强；2、方法的适应的场景比较多，可通过传入不同的参数来控制其他标签的切换；3、js方法永远不会有冲突；

转载于:https://www.cnblogs.com/limengqiang/archive/2012/08/23/jQueryWidget.html

jQuery插件开发实战相关推荐

  1. [js高手之路]jquery插件开发实战-选项卡详解

    在jquery中,插件开发常见的有: 一种是为$函数本身扩展一个方法,这种是静态扩展(也叫类扩展),这种插件一般是工具方法, 还有一种是扩展在原型对象$.fn上面的,开发出来的插件是用在dom元素上面 ...

  2. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  3. jquery 插件开发的作用域及基础

    2019独角兽企业重金招聘Python工程师标准>>> 之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度 ...

  4. jQuery插件开发学习笔记

    今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析 更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...

  5. jQuery插件开发（一）：jQuery类方法

    一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? j ...

  6. jQuery插件开发的两种方法及$.fn.extend的详解

    2019独角兽企业重金招聘Python工程师标准>>> 作者: 字体:[增加 减小] 类型:转载 时间:2014-01-16 我要评论 jQuery插件开发分为两种:1 类级别.2 ...

  7. 【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶

    jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...

  8. 【Maven】maven 插件开发实战

    [Maven]maven 插件开发实战 附上我历时三个月总结的 Java 面试 + Java 后端技术学习指南,这是本人这几年及春招的总结,目前,已经拿到了大厂offer,拿去不谢! 下载方式 1.  ...

  9. jQuery插件开发中$.extend和$.fn.extend辨析

    jQuery插件开发分为两种:   1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...

  10. JQuery学习使用笔记 -- JQuery插件开发

    内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...

最新文章

  1. 安装H3C的各种问题
  2. LeetCode 215. Kth Largest Element in an Array--数字第K大的元素--最大堆或优先队列--C++,Python解法
  3. 【PAT (Advanced Level) Practice】1086 Tree Traversals Again (25 分)
  4. python多进程断点续传分片下载器
  5. 学习Cassandra资料的一些整理
  6. 深层神经网络中的前向传播
  7. Netty防止内存泄漏措施
  8. 更新卡住解决_windows10系统更新卡住的解决方法
  9. ASP.NET 程序中常用的三十三种代码(9)
  10. 把所有的谎言献给你β
  11. boost::hana::find_if用法的测试程序
  12. [Nginx]负载均衡和动静分离
  13. python定义区间[-5、5_有一个数 x 在区间 [-5,0] 内 , 写出其条件表达式 。 (5.0分)_学小易找答案...
  14. json对象与字符串互转
  15. headerIP php_PHP正确获取客户端IP地址
  16. 解决sockscap64测试代理可以，实际应用无法联网的问题
  17. 人可以N次踏进同一条河流
  18. Raid磁盘阵列重建后如何恢复原来的数据
  19. IEEE T PAMI投稿注意事项
  20. MySQL——页的理解

热门文章

  1. sharp node图片处理
  2. Chrome浏览器打不开网页，连设置都打不开的解决办法
  3. STM32实现薄膜压力传感器数据采集（标准库和HAL库实现）
  4. 百度云网盘一直显示“下载请求中”，一个 解决办法
  5. html手写笔记照片,Myscript Nebo – 好用到哭的手写笔记软件！你只管写画，它帮你识别转换成文字 | 火星博客...
  6. 米家扫地机器人静音模式在哪_米家扫地机器人2代发布日期确定：带拖地功能...
  7. (转)前端文摘：深入解析浏览器的幕后工作原理
  8. 屏幕种类有哪些，特点，怎么挑？TFT、LCD、OLED、IPS、TN的含义与区别？高色域、刷新率、广视角、雾面屏又是什么？
  9. npm ERR! code EINTEGRITY npm! ERR! shal-
  10. 解决U盘复制拷贝文件过大不能超过4G的方法