<!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. ie7（z-index）

    父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,子元素的z-index是相对于父级元素的index. <div style="po ...

  2. SendMessage发送WM_COMMAND消息控制另一个程序的某一个按钮

    procedure TfrmMain.btnSendClick(Sender: TObject); var hCalc, h1: Cardinal; begin WinExec('calc', SW_ ...

  3. 如何使用 Android Studio 的 git hub 功能

    How to use GitHub with Android Studio This article will explain how to use GitHub with Android Studi ...

  4. hdu 5461 Largest Point

    Thinking about it: 对于式子 a * ti * ti + b * tj,可以看作时有两部分构成 a * ti * ti 和 b * tj,如果整个式子要最大,则要求这两部分都要尽量大 ...

  5. OpenVPN多处理之-多队列TUN多线程

    1.有一点不正确劲 在改动了那个TUN驱动后,我在想,为何我总是对一些驱动程序进行修修补补而从来不从应用程序找解决方式呢?我改动了那个TUN驱动,可是能保证我的改动对别的应用一样可用吗?难道TUN驱动 ...

  6. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  7. webservice跨域上传图片

    1.上传文件,在一般处理程序中处理 //1.接收post过来的文件 HttpPostedFile file = context.Request.Files[]; || file.ContentLeng ...

  8. ADO.NET详解----核心对象的使用

    一.Connection对象 指定某个具体数据源以及提供登陆方式及用户名与密码. Connection对象的主要成员: 1.ConnectionString属性:连接字符串,指定要操作的数据库以及登录 ...

  9. JavaScript使用button提交表单

    <form action="test.html" method="POST"> <input type="button" ...

  10. POJ 2752 Seek the Name, Seek the Fame（求所有既是前缀又是后缀的子串长度）

    题目链接:http://poj.org/problem?id=2752 题意:给你一个字符串,求出所有前缀后缀(既是前缀又是后缀的子串)的长度 思路:首先整个字符串肯定既是前缀又是后缀,为最大的前缀后 ...