<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title> Hello JQuery</title>
    <script  lang ="javascript" type ="text/javascript" src ="JQuery/jquery-2.1.0.min.js"> 
    </script>
    <style type ="text/css">
        .divFrm {
            width:300px;border: 2px solid #625d5d; font-size:12px;
        }
        .divTitle {
            background-color:#08fcfc;padding :5px;
        }
        .divContent {
            padding:5px;display:none;
        }
        .divCurrColour {
            background-color:red;
        }
    </style>
</head>
<body>
     <!-- 添加jquery的引用文件-->
    <script type ="text/javascript">
        $(function () {
            $(".divTitle").click(function () {
                $(this).addClass("divCurrColour")
                    .next(".divContent").css("display", "block")
            });
        });
    </script>
     <div class = "divFrm">
       <div class ="divTitle"> 主题</div>
       <div class ="divContent">
           <a href="http://baidu.com">链接一</a><br />
           <a href="http://jquery.com">链接二</a><br />
           <a href="http://www.google.com/">链接三</a>
           <!-- <a></a> 链接的标记字段-->
       </div>
     </div>
</body>
</html>

说明：

中间红色的为事件的链式写法，实现两个事件：

1、改变 <div class ="divTitle"> 主题</div> 的颜色

2、显示   <div class ="divContent">

中间通过.next链接起来

jquery事件链式写法的更多相关文章

  1. JQuery事件的链式写法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Jquery | 基础 | 事件的链式写法

    $(".title").click(function () { $(this).addClass("curcol").next(".content&q ...

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

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

  4. Delphi Sysem.JSON 链式写法（转全能中间件）

    链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...

  5. ajax操作的链式写法

    ajax操作的传统写法: $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenEr ...

  6. jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Java 链式写法

    Java链式写法,子类继承父类的属性,也可以返回子类的对象,只是需要重写基类的Set方法 public class MyLS { public static void main(String[] ar ...

  8. Delphi Sysem.JSON 链式写法

    链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...

  9. jQuery的链式编程风格

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

随机推荐

  1. MOQ

    MOQ:(Minimum order Quantity) 最低订货数量   MOQ 即最小订购量(最小订单量)   对每个产品设定建议订单量是补货的方法之一.另外要注意订单的有效性,这是由供应商制定的 ...

  2. VS2010 win32项目windows窗体程序 向导生成代码解析

    目录: 1.Win32项目的windows窗体程序的向导生成了如下代码 2.手工生成代码如下 3.当消息队列中没有消息需要处理,我们可以利用这段时间处理我们自己的任务 1.Win32项目的window ...

  3. Spring 上下文

    Spring 上下文WebApplicationContext.是服务器启动的时候加载ContextLoaderListener 的时候存在 ServletContext 中 servletConte ...

  4. swith 语句详解

    switch 语句的格式: switch ( 整型或字符型变量 ) { case 变量可能值1 :   分支一; break; case 变量可能值2 :   分支二; break; case 变量可 ...

  5. [ACM] POJ 2253 Frogger （最短路径变形，每条通路中的最长边的最小值）

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24879   Accepted: 8076 Descript ...

  6. Echoprint系列--Android编译与调用

    在Echoprint系列--编译中编译了源代码,这次将Echoprint移植到Android平台并測试识别歌曲功能. 一.编译库 1.环境准备 Android NDK,我的是android-ndk-r ...

  7. Open virtual effects in Ubuntu 12.04LTS

    Need install below packages: compiz compiz-core compiz-fusion-plugins-extra+ compiz-fusion-plugins-m ...

  8. Windows 10 安装

    下载了 Windows 10 的 ISO 文件:WindowsTechnicalPreview-x64-ZH-CN.iso,在 VMWare 10 上进行了安装. 安装时没有 Windows 10   ...

  9. Docker之dockerfile

    一.什么是dockerfile Docker通过对于在dockerfile中的一系列指令的顺序解析实现自动的Image的构建: 通过使用build命令,根据dockerfile的描述来构建镜像: bu ...

  10. 搭建Myeclipse下Java Web开发环境

    1.准备 先下载软件:Myeclipse:http://www.xiazaiba.com/html/23858.html tomcat:http://files.cnblogs.com/files/l ...