jquery方法连缀谈一

jquery连缀谈一
这几天都是写JS效果，写得多了难免就会烦燥，都是一些曾经写过的，但每次遇到都要好好整理思维，非得从得来过。
如果你碰到这样的事，也会不会心烦气燥呢？呵呵……也许你们都是高人，而我不是。今天怎么会谈到JQ连缀呢，是这样的
之前有碰到过一些代码段，总是对之不屑，也许刚初有些不理解，也加之，这样的效果，只要自己动动脑，也一样能写
出来的。我是哪种不喜欢复制别人代码的人。也许我压根就没把别人的东西看在眼里，可能这都是技术员的牛气吧！
呵呵……自夸还是自贬呢，都有。刚起初学jq的时候，看到书本里着重谈方法连缀，我很是不解，这有什么作用，我在
实际运用当中，好像自己就未曾用到过。为什么会提到如此重要的位置，还强调是JQ的特色之一。嘿嘿……也许年轻，小
孩不懂事，心高气傲！今天一看才知道确实好用方便，而且写的代码更简短，可重用度更高。
也许讲了这么多，大家肯定还是一头雾水，雾里水里的。当然是你们不懂JQ的，或者是刚刚学的。高手就不笑话了。
所谓连缀就是JQ对像的方法，可以一个接一个接用dot进行连接，有人马上会问了，dot是什么，呵呵……英文中的点，我随
便卖弄一下。不介意吧。讲了这么多，还没有一个示例，显然不好吧！嘿嘿……下面就例举一个：
在web前端开发当中，各位同行是不是经常要用到选项卡这样的效果，如果你们对选项卡是什么效果不了解的话，我可以
轻描一下。如果你是学编程的，我假设你写过windows桌面程序，至少看到过。走远了，近一点，就是用过windows操作系统
。在这里我们是不是经常会看到一些设置的面板，这个面板上面有排像标签一样的东东，把光标移上去，轻轻一点是不是就
切换到相应内容了我就把这样的东东叫做选项卡效果。有认为简单的吗？
这里我用两种方法实现之，用以相互对比，有比较才能进步吗？不是吗？
第一种是我个人自明的，开始我还以为这是最简单的方法，可后来看到了连缀的作用后，才改变过来。呵呵……本来愚笨，反应
慢，等了好多个月才意识到这个方法很笨。开始我可是引以自傲的。废话少说了。实现之：
HTML代码：
<div class="biaoqian"><b name="1" class="b_o">标签1</b>
<b name="2">标签2</b>
<b name="3">标签3</b>
<b name="4">标签4</b></div>
<div class="content current 1"></div>
<div class="content 2"></div>
<div class="content 3"></div>
<div class="content 4"></div>
以上就一个选项卡的所有前端代码，当然还有CSS样式了。
CSS代码：
.biaoqian{};
.b_o{};//当前标签的样式。
.current{};//当前content的样式.我还要讲一下，这里的name有什么作用呢，这也是这种方法的巧妙之处;
下面就给出我的第一种方法。
JS代码：
function tab1(id1,cn1,id2,cn2){//说明一下，id1指的是标签，
//cn1指的是标签的样式,id2指的是标签下的内容，显而易见
//cn2指内容的样式;
var id2_a=$(id2);
$(id1).click(function(){
$(id1).removeClass(cn1);
$(this).addClass(cn1);
var i=$(this).attr("name");
$(id2).removeClass(cn2);
$(id2_a[i]).addClass(cn2);
});
}//看起来也没有什么烦锁的。希望能看懂。呵呵……然后就调用这个方法了。
tab1(".biaoqian b","b_o",".content","current");
应该还不难，很好理解吧。不理解可以QQ我：550703900；
下面介绍第二种方法，这也是这次话题的主旨所在呀！
jquery方法连缀。还是用上面的html and css
JS代码二：
function tab2(id1,cn1,id2,cn2){//当然cn2的样式可有可无，这个样式我主要在第一个里面用。
$(id1).each(function(i){
$(this).bind("click",function(){
$(id2).hide().eq(i).show();//这就是方法连缀，看到了没有？
$(id1).removeClass(cn1);
$(this).addClass(cn1);
})
if(this).hasClass(cn1){
$(id2).hide().eq(i).show();
$(this).addClass(cn1);
}
});
}//好像看起来都差不多哦。呵呵…………
调用方法就不用再说了吧，祝各位顺顺利利，开开心心地学到东西。
交流平台：QQ：550703900;
欢迎加入我的论坛：http://bbs.dfutureworld.com/
我的专业博客地址：http://ideafuture.iteye.com/