s()++php,jquery siblings()函数正确用法

直接看一个例子：

.test{color:#900;font-size: 0;border-radius: 6px;}

.test span{display: inline-block;font-size: 12px;text-align: center;cursor: pointer;padding: 5px;background-color: #E6E6E6;border: 1px solid #b3b3b3;margin-right: -1px;}

.test span:first-child{border-radius: 4px 0 0 4px;}

.test span:last-child{border-radius: 0 4px 4px 0;}

.test .on{background-color: #cecece;border: 1px solid #900;position: relative;}

01

02

03

04

05

// siblings()用于初始化，在后续的点击事件中不应该使用siblings(),

$(".test span").eq(0).addClass("on").siblings().removeClass("on");

var that=$(".test span").eq(0)[0];

$(".test span").click(function(event) {

// $(this).addClass('on').siblings('span').removeClass('on');

if(typeof(that)!="undefined"){

$(that).removeClass("on");

}

$(this).addClass('on');

that=this;

});

提示：你可以先修改部分代码再运行。

上面的实例，如果是有通过jq去实现点击前的效果的初始化，即打开页面就选中第1个span标签，typeof(that)!="undefined"这个判断可直接省略掉了，但这个不是本文的重点！重点在正面↓

为实现上面的点击效果，如果还在使用注释中的： $(this).addClass('on').siblings('span').removeClass('on'); 语句来实现，在某种程度上来讲，你有滥用jq的习惯，而完全不考虑js的性能，有这习惯的，中枪的，得改改了，呵呵。

2种写法，经过运行时间测试，发现时间竟然相差无几，也许这就是jq的强大之处，有兴趣的可以看下jq的siblings()的实现源码，也许会发现本文的观点是错误的，欢迎指正！