JQuery链式操作风格:简单导航栏
2012-07-17 22:02
471 查看
链式操作风格:简单导航栏
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){ //等待dom元素加载完毕
$(".has_children").click(function(){ //当鼠标点击含有.has_children元素的时候
$(this).addClass("highlight") //选择本元素添加一个类.highlight
.children("a") //其内部全部<a>子元素
.show() //显示元素
.end() //重新定位到上次操作的元素
.siblings() //含有.has_children的class的同辈元素
.removeClass("highlight"); //移除类.highlight
.children("a") //其内部全部<a>子元素
.hide(); //隐藏元素
});
});
</script>
<!--------------- 代码格式调整后,易读性好了很多 ------------------>
通过类似有意义的注释,能够培养良好的编码习惯和风格,提高开发效率;
上传了实例附件!需要的话就下载使用“记得自己换回后缀名.html”.使用时记得加载JQuery库喔!
<script type="text/javascript">
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
});
</script>
附图:
——参考资料《锋利的JQuery》
附件:http://down.51cto.com/data/2361035
相关文章推荐
- 强大的JQuery链式操作风格
- 1.3.2:jQuery代码的链式操作风格
- jQuery链式操作如何实现以及为什么要用链式操作
- 用php实现一个简单的链式操作
- 串的链式结构的简单操作
- jQuery实例6:对DOM的简单操作和对CSS的操作
- jQuery的链式操作
- JavaScript对象链式操作代码(jquery)
- Jquery全选全不选操作的最简单代码
- Jquery操作radio的简单实例
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
- jQuery入门之简单的导航栏
- jQuery对象的链式操作
- jQuery蓝色风格滑动导航栏代码分享
- jquery链式操作
- JQuery的链式操作
- jquery获取radio值的简单操作
- jquery中each循环的简单回滚操作
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏
- jquery 对 cookie存储 json格式的简单操作