<!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. mobile&nbsp;web&nbsp;手机开发

    1.   -webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(255,255,255,0); 用来把android上点击网页时出现 ...

  2. QT 一些非常常用的操作

    一   如果在窗体关闭前自行判断是否可关闭二   如何用打开和保存文件对话框  三   如何使用警告.信息等对话框  四   在Windows下Qt里为什么没有终端输出五   想在源代码中直接使用中文 ...

  3. Oracle 11g RAC database on ASM, ACFS or OCFS2

    I see a lot of questions on shared file systems that can be used when people move from single instan ...

  4. tp中phpexcel导出实例

    public function phpexcel(){ //测试$this->display("User:xx");//跨模块分配页面User模块xx.html // xx\ ...

  5. java面试核心基础（1）

    1.以下代码的执行结果 String s1 = "helloworld"; String s2 = "hello" + new Stirng("wor ...

  6. linux中时间函数

    linux下常用时间类型有四种: time_t . struct   tm. struct  timeval .    struct   timespec 1.time_t   时间函数 time_t ...

  7. hasOwnProperty和isPrototypeOf方法使用

    hasOwnProperty():判断对象是否有某个特定的属性.必须用字符串指定该属性.(例如,o.hasOwnProperty("name"))  //复制自w3cschool ...

  8. Uploadif稍做扩展使用

    文章出自Uploadify扩展配置使用http://www.wuyinweb.com/doc/52/57.aspx 在做项目中涉及多文件上传,经过筛选,选择了Uploaidify,但还涉及一个问题,就 ...

  9. zoj 3197 Google Book

    这道题告诉我想法正确是多么重要,先是我自己想的时候没考虑到最后的页码作为循环的终止,我一直以区间个数来终止循环,这是多么愚蠢啊!然后,我看了别人的代码,但是很不幸超时了! 我自己wa的代码,我感觉很正 ...

  10. strstr 的使用

    Problem E: Automatic Editing Source file: autoedit.{c, cpp, java, pas} Input file: autoedit.in Outpu ...