jQuery进行组件开发完整实例

本文实例讲述了jQuery进行组件开发的方法，分享给大家供大家参考，具体如下：

前面的《Javascript组件开发》分析了Javascript进行组件开发的技巧，这里分析使用jQuery进行组件开发的方法。

使用jQuery进行组件开发和使用纯Javascript脚本（不使用框架）原理基本类似，特别是公共方法的组织是一样的。

不同点是，jQuery使用了插件机制，通过$()直接进行操作对象（DOM元素）绑定，然后对DOM元素或HTML代码进行绑定事件等的操作。

另一个不同点则是把jQuery当做工具来使用，用来创建DOM对象，快速查找指定DOM对象等。

例子测试通过。

初级简单示例，只实现了增加页和选择页功能。

 
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}
.tabsDiv ul{
  width: 500px;height: 20px;
  list-style: none;
  margin-bottom: 0px;margin: 0px;
  padding: 0px;
  border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0;
}
.tabsDiv div{
  width: 500px;height: 330px;
  background-color: #ffffff; 
  border:solid 1px #e0e0e0;
}
.tabsSeletedLi{
  width: 100px;height: 20px;
  background-color: white;
  float: left;
  text-align: center;
  border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff;
}
.tabsSeletedLi a{
  width: 100px;
  height: 20px;
  color:#000000;
  text-decoration:none;
}
.tabsUnSeletedLi{
  width: 100px;height: 20px;
  background-color: #e0e0e0; 
  float: left;
  text-align: center;
  border:solid 1px #e0e0e0;
}
.tabsUnSeletedLi a{
  width: 100px;height: 20px;
  color: #ffffff;
  text-decoration:none;
}
  



 
 
  
  

   
选项1
   
选项2
   
选项3
  
  
  11111
  22222
  33333
 
 
 

最终效果如图所示：

希望本文所述对大家jQuery程序设计有所帮助。