zoukankan      html  css  js  c++  java
  • 锋利的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>1-5-1</title>
    <style type="text/css">
    #menu { 
        300px; 
    }
    .has_children{
        background : #555;
        color :#fff;
        cursor:pointer;
    }
    .highlight{
        color : #fff;
        background : green;
    }
    div{
        padding:0;
    }
    div a{
        background : #888;
        display : none;
        float:left;
        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>
  • 相关阅读:
    hdu 1823 Luck and Love 二维线段树
    UVA 12299 RMQ with Shifts 线段树
    HDU 4578 Transformation 线段树
    FZU 2105 Digits Count 线段树
    UVA 1513 Movie collection 树状数组
    UVA 1292 Strategic game 树形DP
    【ACM】hdu_zs2_1003_Problem C_201308031012
    qsort快速排序
    【ACM】nyoj_7_街区最短路径问题_201308051737
    【ACM】nyoj_540_奇怪的排序_201308050951
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4040894.html
Copyright © 2011-2022 走看看