<!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. Groovy中那些神奇注解之Memoized

    临近年关手头比较闲,去看了一下Groovy的官方文档,才发现原来Groovy中带了那么多的注解,很多注解带来的效果,有时候让人感觉“这不是在变魔法吧”. 个人很喜欢Groovy,写不成Ruby,Gro ...

  2. mysql 性别存储

    大家在设计数据库时,碰到 性别.状态等 这些 值比较固定的列时,数据类型 是如何定义? 通常都是采用 : 1 create table `XXX` 2 ( 3 ........ 4 sex int(1 ...

  3. 第八届acm省赛 A挑战密室（模拟）

    10406: A.挑战密室 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 29  Solved: 10 [Submit][Status][Web Bo ...

  4. poj1637Sightseeing tour(混合图欧拉回路)

    题目请戳这里 题目大意:求混合图欧拉回路. 题目分析:最大流.竟然用网络流求混合图的欧拉回路,涨姿势了啊啊.. 其实仔细一想也是那么回事.欧拉回路是遍历所有边一次又回到起点的回路.双向图只要每个点度数 ...

  5. iOS 用UISearchDisplayController实现查找功能

    UISearchDisplayController是iOS中用于处理搜索功能的控制器,此控制器需要和UISearchBar结合使用 示例代码如下: // // WKRootViewController ...

  6. window.parent与window.opener的区别与使用

    window.parent 是iframe页面调用父页面对象 举例: a.html 如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrma ...

  7. BZOJ 1497: [NOI2006]最大获利( 最大流 )

    下午到周六早上是期末考试...但是我还是坚守在机房....要挂的节奏啊.... 这道题就是网络流 , 建图后就最大流跑啊跑啊跑... --------------------------------- ...

  8. javascript 原型 和 原型链

    最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...

  9. Python开发环境Spyder安装方法

    Spyder(Scientific PYthon Development EnviRonment)是一个强大的交互式 Python 语言开发环境,提供高级的代码编辑.交互测试.调试等特性,支持包括 W ...

  10. [LeetCode]题解（python）：073-Set Matrix Zeroes

    题目来源: https://leetcode.com/problems/set-matrix-zeroes/ 题意分析: 输入一个m×n矩阵,如果出现有0,那么将对应的行和列都变成0. 题目思路: 简 ...