$(".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. OC浅析一

    Objective-C是一门简单的语言,95%是C.只是在语言层面上加了些关键字和语法.真正让Objective-C如此强大的是它的运行时.它很小但却很强大.它的核心是消息分发. 在Objective ...

  2. BZOJ 1623 [Usaco2008 Open]Cow Cars 奶牛飞车：贪心

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1623 题意: 编号为1到N的N只奶牛正各自驾着车打算在牛德比亚的高速公路上飞驰.高速公路有 ...

  3. python 快速排序 qsort

    def qsort(arr, start, end): if start > end: return def partition(arr, start, end): pivot = arr[st ...

  4. Persistent connections CONN_MAX_AGE django

    Persistent connections¶ Persistent connections avoid the overhead of re-establishing a connection to ...

  5. CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

  6. PowerDesigner里怎样查找特定的表

    转自:https://blog.csdn.net/u013178480/article/details/78261650 crtl+f查找,在code处输入你要查找的表名,然后点击“find now& ...

  7. TypeScript完全解读(26课时)_10.TypeScript完全解读-枚举

    10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以 ...

  8. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  9. ecplise常见的一些问题

    修改注释的字体,默认的字体太小了.

  10. 八大排序算法java代码

    1.冒泡排序 public static void main(String[] args) { int[] arr = {1,4,2,9,5,7,6}; System.out.println(&quo ...