实例代码

<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链式操作风格的更多相关文章

  1. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  2. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  3. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  4. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  5. jQuery的链式编程风格

    jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...

  6. 如何一行jquery代码写出tab标签页(链式操作)

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  7. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

  8. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  9. js实现链式操作

    前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...

随机推荐

  1. cxgrid的过滤%x%问题【备查】

    把这个文件复制到你的程序目录\DevExpress VCL\ExpressDataController\Sources\cxLike.pas function LikeStr(const AStr,  ...

  2. lucene_07_solr使用IK分词器

    使用IKAnalyzer 中文分析器.. 第一步: 把,IKAnalyzer2012FF_u1j 添加到sol/WEB-INF/lib 目录下. 第二步: 复制IKAnalyzer 的配置文件和自定义 ...

  3. [bzoj3307]雨天的尾巴_线段树合并

    雨天的尾巴 bzoj-3307 题目大意:N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. ...

  4. 关于Hanoi算法

    java经典算法——河内算法(Hanoi) 有三根相邻的柱子,标号为A,B,C,A柱子上从下到上按金字塔状叠放着n个不同大小的圆盘,要把所有盘子一个一个移动到柱子B上,并且每次移动同一根柱子上都不能出 ...

  5. Go语言net/http 解读.

    Http包提供实现HTTP客户端和服务端的方法与函数. Get.Head.Post.PostForm配合使用实现HTTP请求: resp, err := http.Get("http://e ...

  6. Linux下把目录拷贝到全部同名目录的脚本

    需求:拷贝文件夹到Linux文件夹下.覆盖该Linux文件夹下全部同名文件夹 目标:Linux下,运行本脚本.输入目录名.就可以批量复制覆盖. 使用说明:         先把本脚本文件和要复制的文件 ...

  7. Android之UtilsRequesServicetHelp工具类

    package com.example.getnetutil; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; ...

  8. vue组件的3种书写形式

    第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my- ...

  9. vs2015+ffmpeg开发环境配置【转】

    本文转载自:http://blog.csdn.net/hustlx/article/details/51014307 1.在http://ffmpeg.zeranoe.com/builds/ 下载最新 ...

  10. [BZOJ 2100] Apple Delivery

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2100 [算法] Answer = min{ dist(PB,PA1) + dist( ...