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()的更多相关文章

  1. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  2. [jQuery]《锋利的jQuery》插件部分总结

    /** * <锋利的jQuery>插件部分总结 * * jQuery插件推荐命名:jquery.name.js * * $.fn.extend用于封装对象方法的插件 * $.extend用 ...

  3. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  4. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  5. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  6. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. 锋利的jQuery（第二版）学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  8. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  9. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  10. 读《锋利的jQuery》中first-child时的一个细节

    今天在看<锋利的jQuery>这书时,看到过滤选择器那一节.有个知识点引起了我的注意. (我不用书里一模一样的代码做例子)举个简单的例子-代码: <ul> <li> ...

随机推荐

  1. U3D assetbundle加载与卸载的深入理解

    using UnityEngine; using System.Collections; using System; public class testLoadFromAB : MonoBehavio ...

  2. php基础03：数据类型

    <?php // day01:数据类型 //01.字符串 $x = "hello world"; echo $x; echo "<br>"; ...

  3. scrapy 的三个入门应用场景

    说明: 本文参照了官网的 dmoz 爬虫例子. 不过这个例子有些年头了,而 dmoz.org 的网页结构已经不同以前.所以我对xpath也相应地进行了修改. 概要: 本文提出了scrapy 的三个入门 ...

  4. 传智播客C++第五期培训视频教程免费下载

    C/C++的应用领域几乎无处不在,服务器,嵌入式,物联网,移动互联网,信息安全,游戏,基本上大小通吃.C/C++市场份额高达26%,也就是每四个程序员就有一个C/C++程序员.市场需求量非常大,而且工 ...

  5. [CareerCup] 13.10 Allocate a 2D Array 分配一个二维数组

    13.10 Write a function in C called my2DAlloc which allocates a two-dimensional array. Minimize the n ...

  6. IOS开发之——意见反馈UITextView的使用+不能输入字符输入

    @interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...

  7. RF源码阅读（碎片纪录）-Python积木之contextlib

    参考页面: http://docs.python.org/2/library/contextlib.html contextlib是为了配合with语句来使用的.使用起来更加简洁.本来想写一下,这位同 ...

  8. Jenkins进阶之自动发送邮件的Default Content设置模板

    分享一个简洁实用的Jenkins项目邮件管理系统的"Default Content"设置模板 配置如下: <h1><center><font colo ...

  9. Mediator Pattern --中介者模式原理及实现（C++）

    主要参考<大话设计模式>和<设计模式:可复用面向对象软件的基础>两本书.本文介绍中介者模式的实现. 中介者模式:What it is:Define an object that ...

  10. 用html5+js实现掌机游戏赛车demo

    最近无聊,用html5+js做了一个以前玩过的掌机赛车游戏,顺便学习一下画布的api以及巩固一下js基础. 游戏界面,没做什么美化. 游戏规则:游戏界面分为三列,黑色方块随机落下,红色方块可以在三列自 ...