锋利的jQuery-1--end()
1.导航菜单：选中后显示当前标签下的子标签并且高亮，并且隐藏其他同级标签，（一行级联操作即完成），主要看end()函数用法。
end():
回到最近的一个"破坏性"操作之前。就是指任何改变所匹配的jQuery元素的操作。
这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
我的理解：上边的函数会使当前操作的jqeury对象改变，加上end()回到原来的jquery对象，方便级联操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>--</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:;
}
div a{
background : #;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>
锋利的jQuery-1--end()的更多相关文章
- 锋利的jQuery学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
- [jQuery]《锋利的jQuery》插件部分总结
/** * <锋利的jQuery>插件部分总结 * * jQuery插件推荐命名:jquery.name.js * * $.fn.extend用于封装对象方法的插件 * $.extend用 ...
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 锋利的jQuery（第二版）学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
- Jquery全选系列操作（锋利的jQuery）
Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- 读《锋利的jQuery》中first-child时的一个细节
今天在看<锋利的jQuery>这书时,看到过滤选择器那一节.有个知识点引起了我的注意. (我不用书里一模一样的代码做例子)举个简单的例子-代码: <ul> <li> ...
随机推荐
- PHP基础01：环境搭建
1.只会前端的只是有时候让我感到很苦恼,所以决定从今天开始学习后端,看了一些关于后端语言的比较帖子,决定选择php作为我的第一门后端语言.这个是我自己的学习笔记.方便自己复习,不写下来会太无聊了. 第 ...
- Java的动态代理(dynamic proxy)
什么是动态代理(dynamic proxy) 动态代理(以下称代理),利用Java的反射技术(Java Reflection),在运行时创建一个实现某些给定接口的新类(也称“动态代理类”)及其实例(对 ...
- GEOS库学习之三：空间关系、DE-9IM和谓词
要判断两个多边形的关系,实际上属于几何图形空间关系判断.几何图形并不只有多边形一种,它包括点.线.面构成的任何图形,两两之间相互关系也有很多种,因此空间关系非常复杂.根据前人的研究,总结出了DE-9I ...
- 修改 dispatchTouchEvent方法 来处理事件冲突
PagerIndicator把事件给拦截了 我修改了他的 dispatchTouchEvent方法 请求他爹和他祖宗不要拦截我的事件 根据事件分发机制 dispatchTouchEvent-> ...
- [CareerCup] 5.2 Binary Representation of Real Number 实数的二进制表示
5.2 Given a real number between 0 and 1 (e.g., 0.72) that is passed in as a double, print the binary ...
- [MetaHook] Load DTX texture to OpenGL
This function load a LithTech *.dtx texture file and convert to OpenGL pixel format, compressed supp ...
- tabbar的自定义
[self createCustomTabBar]; -(void)createCustomTabBar{ //创建一个UIImageView,作为底图 UIImageView *bgVi ...
- 20145222黄亚奇《Java程序设计》第6周学习总结
教材学习内容总结 第十章 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 从应用程序角度来看,如果要将数据从来源取出,可以使用输入串流,如果要将数据写入目的地,可以使用输 ...
- 20145302张薇 GDB调试汇编堆栈过程分析
GDB堆栈跟踪与汇编调试 堆栈跟踪 源代码 使用gcc - g example.c -o example -m32指令在64位的机器上产生32位汇编,然后使用gdb example指令进入gdb调试器 ...
- Linux下线程池的理解与简单实现
首先,线程池是什么?顾名思义,就是把一堆开辟好的线程放在一个池子里统一管理,就是一个线程池. 其次,为什么要用线程池,难道来一个请求给它申请一个线程,请求处理完了释放线程不行么?也行,但是如果创建线程 ...