<!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. 【转载】Android开源：数据库ORM框架GreenDao学习心得及使用总结

    转载链接:http://www.it165.net/pro/html/201401/9026.html 最近在对开发项目的性能进行优化.由于项目里涉及了大量的缓存处理和数据库运用,需要对数据库进行频繁 ...

  2. Hive Server 2 安装部署测试

    Hive 0.11 包含了Hive Server 1 和 Hive Server 2,还包含1的原因是为了做到向下兼容性.从长远来看都会以Hive Server 2作为首选 1. 配置hive ser ...

  3. 使用资源监控工具 glances

    http://www.ibm.com/developerworks/cn/linux/1304_caoyq_glances/ glances 可以为 Unix 和 Linux 性能专家提供监视和分析性 ...

  4. [置顶] fmt日期格式化

    jstl中的日期格式化 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> & ...

  5. Android使用ViewFlipper实现左右滑动效果面

    在我的博客中,上次是使用ViewPager实现左右滑动的效果的,请看文章:Android使用ViewPager实现左右滑动效果. 这次我来使用ViewFlipper实现这种效果,好了,先看看效果吧: ...

  6. POJ2151-Check the difficulty of problems（概率DP）

    Check the difficulty of problems Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4512   ...

  7. NHibernate初入门之映射文件配置说明（三）

    转载逆心http://www.cnblogs.com/kissdodog/archive/2013/02/21/2919886.html 1. hibernate-mapping 这个元素包括以下可选 ...

  8. linux 知识整理1linux 常见的目录

    linux 系统现在也是搭配啦图形操作界面. 本人初次学习linux,不是为工作,我的工作是玩Asp.net 的.学习linux 也算是知识的储备吧. 学习linux必须知道一些基本的知识. 目录 用 ...

  9. DevOps探索

    devops最近随着docker的升温而被越来越多的人所吸引!最近因项目所需投身到devops的项目当中,经过初步的实践搞出一套 paas平台的devops,这个平台现在还需要检验! 作为一个dev, ...

  10. BZOJ 1208: [HNOI2004]宠物收养所(BST)

    本来想先用set写一遍,再自己写个splay或treap,不过用set过了之后就懒得去写了....以后有空再来写吧..(不会有空的吧= = ------------------------------ ...