$(".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. UIView封装动画--iOS 利用系统提供方法来做弹性运动

    iOS 利用系统提供方法来做弹性运动 /*创建弹性动画 damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 velocity:弹性复位的速度 */ [UIView animateWith ...

  2. indexDB操作(部分方法不太会使用)

    <script type="text/javascript"> //打开数据库 function openDB(name,version){ var version = ...

  3. Redis C语言操作封装

    #ifndef BOYAA_FOURLANDLORD_REDISCLASS_H_20130217 #define BOYAA_FOURLANDLORD_REDISCLASS_H_20130217 #i ...

  4. 英语发音规则---gh

    英语发音规则---gh 一.总结 一句话总结:gh字母组合的读音在中学英语课本中归纳起来主要有"发音"和"不发音"两种情况. gh字词首是发/g/,因为需要开头 ...

  5. android:textAppearance

    Android之系统自带的文字外观设置及实际显示效果图 android:textAppearancexml布局里面设置文字的外观: 如“android:textAppearance=“?android ...

  6. Linux-awk和shell编程初步

    1 awk 格式: awk -选项 '处理' 输入 awk -F : '{print $1}' file -F指定分隔符, 默认是空格 $1 分割后的第一部分 $0 获得所有部分 NF 表示以分隔符分 ...

  7. CodeForces - 762E：Radio stations （CDQ分治||排序二分）

    In the lattice points of the coordinate line there are n radio stations, the i-th of which is descri ...

  8. Swift引用计数器

    ARC概述 和4.2+版本的Xcode对OC的支持一样,Swift也是使用ARC来管理内存,文档是这么描述的: Swift uses Automatic Reference Counting(ARC) ...

  9. JQ对象和原生DOM对象

    相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...

  10. sparkContext之一：sparkContext的初始化分析

    Spark源码学习:sparkContext的初始化分析 spark可以运行在本地模式local下,可以运行在yarn和standalone模式下,但是本地程序是通过什么渠道和这些集群交互的呢?那就是 ...