$(".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. 解决express video 手机无法播放的问题

    http://stackoverflow.com/questions/24976123/streaming-a-video-file-to-an-html5-video-player-with-nod ...

  2. [NOIP2011提高组day1]-3-mayan游戏

    3.Mayan 游戏 (mayan.cpp/c/pas) [问题描述] Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个 7行 5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即 ...

  3. bzoj4474: [Jsoi2015]isomorphism

    树hash啊 我的做法很垃圾,就是yy一种只有一个孩子时hash值和孩子一样的hash法 然后用重心去作为根遍历 这样有点问题,就是重心假如也是要删掉的那就gg了 那我们求tot的时候删掉的点就不管直 ...

  4. 2017广东工业大学程序设计竞赛 E倒水(Water)

    题目链接:http://www.gdutcode.sinaapp.com/problem.php?cid=1057&pid=4 题解: 方法一:对n取2的对数: 取对数的公式:s = log( ...

  5. ansible安全优化建议

    摘自 ansible自动化配置书籍,特此感谢 针对非授权连接和截取通信息等共计行为,我们总结了9条方法: 使用安全加密的通信方式 禁止root用户远程登录并充分利用sudo 移除非必须的软件,只开放需 ...

  6. 旋转屏幕导致Activity重建

    简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系统会销毁并重建Activity以便反映新的Conf ...

  7. 第三篇:python基础之数据类型与变量

    阅读目录 一.变量 二.数据类型 2.1 什么是数据类型及数据类型分类 2.2 标准数据类型: 2.2.1 数字 2.2.1.1 整型: 2.2.1.2 长整型long: 2.2.1.3 布尔bool ...

  8. git bash使用端口转发连接服务器

    之前的配置是 url = user@xx.xx.xx.xx:/home/tutu/thelib/ww.git xx.xx.xx.xx是服务器的外网地址,其内网地址是zz.zz.zz.zz 但是现在服务 ...

  9. 封装class类为jar包提供给其他项目使用

    一.完成class类的编写与测试工作 二.完善javadoc注释,生成自己的API 注释要按照标准要求进行 Project -- generate  javadoc

  10. 让Spinner中的文字居中

    如果套用simple_spinner_item或是simple_spinner_dropdown_item,然后直接在Spinner中用 android:gravity="center&qu ...