强大的JQuery链式操作风格
实例代码
<style type="text/css">
#menu {width: 300px;}
.has_children {background:#555;color:#fff;cursor:pointer;}
.highlight {color:#fff;background:green;}
div {padding:0px;margin:10px 0px;}
div a {background:#888;display:none;float:left;width:300px;}
</style>
<div id="menu">
<div class="has_children">
<span>第1章—认识juery</span>
<a>1.1-javascript和javascript库</a>
<a>1.2-加入juery</a>
<a>1.3-编写简单juery代码</a>
<a>1.4-juery对象和dom对象</a>
<a>1.5-解决juery和其他库的冲突</a>
<a>1.6-juery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章—juery选择器</span>
<a>2.1-juery选择器是什么</a>
<a>2.2-juery选择器的优势</a>
<a>2.3-juery选择器</a>
<a>2.4-应用juery改写实例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案列研究——类似淘宝网品牌列表效果</a>
<a>2.7-还有其他选择器么?</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章—juery中的dom操作</span>
<a>3.1-dom操作的分类</a>
<a>3.2-juery中的dom操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".has_children").click(function () {
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素,并去掉它
.children("a").hide(); //将兄弟元素下的<a>元素隐藏
});
})
</script>
效果展示
加载完毕
点击第一个
点击第二个
点击第三个
强大的JQuery链式操作风格的更多相关文章
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- jQuery的链式编程风格
jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- jquery中链式操作的this指向
jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...
- jQuery对象的链式操作用法分析
可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
- js实现链式操作
前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...
随机推荐
- 学习EXTJS6(5)基本功能-进度条组件
Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项: 配置项 类型 说明 renderTo String 指定页面 ...
- 07springMVC视图解析器
u 概述 u 常见视图解析器 u UrlBasedViewResolver u InternalResourceViewResolver u 视图解析器链 u 说明 1 概述 在 ...
- HDU 2830 Matrix Swapping II (预处理的线性dp)
Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- redis之Hash存储与String存储内存消耗对照
存储对象User String存储方式: SET media:1155315 939 GET media:1155315 > 939 String结构存储该对象 User243 243600 存 ...
- sikuli+eclipse实例
设置sikuli环境变量 如果在执行脚本的时候出现以下错误: Getting the VisionProxy.dll: Can not find dependent libraries... 把Sik ...
- 51-nod -1284 2 3 5 7的倍数
1284 . 2 3 5 7的倍数 基准时间限制:1 秒 空间限制:65536 KB 分值: 5 给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 比如N = 10,仅仅有1不是2 3 ...
- tensorflow利用预训练模型进行目标检测(四):检测中的精度问题以及evaluation
一.tensorflow提供的evaluation Inference and evaluation on the Open Images dataset:https://github.com/ten ...
- Android下添加新的自定义键值和按键处理流程【转】
本文转载自: Android下添加新的自定义键值和按键处理流程 说出来不怕大家笑话,我写这篇博客的原因在于前几天去一个小公司面试Android系统工程师,然后在面试的时候对方的技术总监问了我一 ...
- [ZJOI 2010] 数字计数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1833 [算法] 数位DP [代码] #include <algorithm&g ...
- vs2015编译使用GRPC
1.获取源码:位于github上 电脑装有git的直接克隆,未装git下载压缩包也可以 git clone https://github.com/grpc/grpc.git cd grpc git ...