$(".title").click(function () {

                　　$(this).addClass("curcol").next(".content").css("display", "block");

            });

<!DOCTYPE html>

<html>

<head>

    <title>jQuery事件的链式写法</title>

    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>

    <style type="text/css">

        .iframe {

            border: solid 1px #888;

            font-size: 13px;

        }

        .title {

            padding: 6px;

            background-color: #EEE;

        }

        .content {

            padding: 8px 0px;

            font-size: 12px;

            text-align: center;

            display: none;

        }

        .curcol {

            background-color: #CCC

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $(".content").html("您好！欢迎来到jQuery的精彩世界。");

            $(".title").click(function () {

                $(this).addClass("curcol").next(".content").css("display", "block");

            });

        });

    </script>

</head>

<body>

    <div class="iframe">

        <div class="title">标题</div>

        <div class="content"></div>

    </div>

</body>

</html>

当页面首次加载时，被包含的内容<div> 标记是不可见的，当用户单击主题<div> 标记时，改变自身的背景色，并将内容<div> 标记显示出来。

Jquery | 基础 | 事件的链式写法的更多相关文章

  1. JQuery事件的链式写法

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

  2. jquery事件链式写法

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

  3. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

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

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

  5. Hadoop基础-Map端链式编程之MapReduce统计TopN示例

    Hadoop基础-Map端链式编程之MapReduce统计TopN示例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.项目需求 对“temp.txt”中的数据进行分析,统计出各 ...

  6. ajax操作的链式写法

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

  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. Java链式写法

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11613067.html Java 链式写法:详细看代码 package chain; /** ...

随机推荐

  1. Mac终端操作SVN指令

    1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录)   例如:svn checkout svn://192.168.1.1/pro/domain    ...

  2. MysqlNDBcluster集群数据操作可能出现的问题

    Ndbcluster 版本7.5: 1.非ndbcluster引擎的表集群不会同步:若要同步,需要使engine=ndbcluster;如果表有外键约束需先删除外键,同步成功后再建立外键[否则会报错] ...

  3. [bzoj 1449] 球队收益(费用流)

    [bzoj 1449] 球队收益(费用流) Description Input Output 一个整数表示联盟里所有球队收益之和的最小值. Sample Input 3 3 1 0 2 1 1 1 1 ...

  4. [coci2012]覆盖字符串 AC自动机

    给出一个长度为N的小写字母串,现在Mirko有M个若干长度为Li字符串.现在Mirko要用这M个字符串去覆盖给出的那个字符串的.覆盖时,必须保证:1.Mirko的字符串不能拆开,旋转:2.Mirko的 ...

  5. java中设计模式详解

    一.设计模式的分类 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外 ...

  6. Codeforces696 Round #362 (Div. 1)(vp) A~D题解

    很久没有打比赛了,内部模拟赛天天垫底,第一次vp之旅又是和**一样,这样下去GDOI之后直接退役算了 整场都在忘开LL A. Lorenzo Von Matterhorn 这个题一看我就想直接虚树+树 ...

  7. mac安装python3

    http://www.jianshu.com/p/51811fa24752 brew install python3 安装路径:/usr/local/Cellar 使用: 执行python3即可 配置 ...

  8. Discuz/X3.1去掉标题中的Powered by Discuz!以及解决首页标题后的"-"

    虽然不提倡大家去掉版权信息,但是在实际操作的时候还是去掉,毕竟每个页面标题最后面出现”Powered by Discuz!“会显得页面标题比较冗长. 经过本人的实践,论坛里也有操作方法,不过那个操作方 ...

  9. vue 路由跳转到外部链接

    尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

  10. WinThruster中文版破解方法(注册表无伤清理工具)

    每次卸载完软件,都会有注册表残余垃圾,久而久之电脑会越来越慢,winThruster可以检测出系统无用注册表,并删除. 1.解压文件,安装Setup_WinThruster_2015.exe文件. 2 ...