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;}

// 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()的实现源码，也许会发现本文的观点是错误的，欢迎指正！

s()++php,jquery siblings()函数正确用法相关推荐

jquery reset的正确用法
转载自:http://blog.csdn.net/a437629292/article/details/38561343 [html] view plain copy <form id=&q ...
详细介绍jQuery.outerWidth() 函数具体用法
outerWidth()函数用于设置或返回当前匹配元素的外宽度.外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为true ...
java聚合函数_count()聚合函数正确用法
count()聚合计算 count()是聚合函数,对于返回的结果集,一行行地判断,累计值加1,最后返回累计值,count(*).count(主键ID)和count(1)表示返回满足条件的结果集的总行数 ...
callback 函数的用法
callback函数会在当前动画100%完成之后才会执行 jQuery Callback函数的用法: $(selector).hide(speed,callback); speed 或 duratio ...
bzoj 3884: 上帝与集合的正确用法（欧拉函数）
3884: 上帝与集合的正确用法 Time Limit: 5 Sec Memory Limit: 128 MB Submit: 2574 Solved: 1151 [Submit][Status] ...
java中trim函数用法_深入理解jQuery.trim() 函数及trim()用法
jQuery.trim() 函数及trim()用法详解 jQuery.trim()函数用于去除字符串两端的空白字符.该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止).它会 ...
分割字符串split函数的正确用法（切片）
分割字符串split函数的正确用法(切片) split函数是将字符串分割为列表函数原型: str.split(sep,maxsplit) 参数说明: str:表示要进行分割的字符串 sep:用于指定 ...
jQuery.trim() 函数及trim()用法详解
先要明确,原生js里不含有trim()方法.如果你觉得有,那一定是记成Java里了. 解决方法如下所示: 1.使用JQuery提供的$.trim([要操作的对象]); 2.自己封装一个方法进行空白字符 ...
从零开始学习jQuery (九) jQuery工具函数
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

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

s()++php,jquery siblings()函数正确用法相关推荐

最新文章

热门文章