$(".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. CentOS 更换 usr 挂载分区

    由于之前挂载在/usr目录的分区空间过小,无法安装更多需要的软件,现在添加一块硬盘重新挂载在/usr目录,并将之前/usr 目录下的内容(包括权限.连接等)完整拷贝到新磁盘分区的/usr目录. 操作系 ...

  2. SAP bseg 使用注意点:1.不要使用;2.有主键再用,

    粗表-簇表 cluster-table BSEGRFBLG 池表 pool-table 我記的沒錯的話,在21天學會ABAP中有一節是專門在講Cluster table,另外在 www.sapfans ...

  3. 【WordSearch】Word Search

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  4. JVM client模式和Server模式

    我们把jdk安装完成后,在命名行输入java -version 不仅可以看到jdk版本相关信息,还会看到类似与 Java HotSpot(TM) 64-Bit Server VM (build 25. ...

  5. Docker容器的网络连接:

    yw1989@ubuntu:~$ ifconfig docker0 Link encap:Ethernet HWaddr 02:42:97:61:42:9f inet addr:172.17.0.1 ...

  6. php设计模式之--组合模式

    php组合模式主要用于上下级关系,可以新增叶子和树枝,分析如下代码即可明白组合模式的含义: <?php header('Content-Type:text/html;charset=utf-8' ...

  7. HDU5968 异或密码 —— 二分 + 边界的细节处理

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5968 异或密码 Time Limit: 2000/1000 MS (Java/Others)    M ...

  8. html5 canvas 涂鸦画板

    html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...

  9. BZOJ 1620 [Usaco2008 Nov]Time Management 时间管理:贪心

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1620 题意: 有n个工作,每一个工作完成需要花费的时间为tim[i],完成这项工作的截止日 ...

  10. hdu 1029 Ignatius and the Princess IV(排序)

    题意:求出现次数>=(N+1)/2的数 思路:排序后,输出第(N+1)/2个数 #include<iostream> #include<stdio.h> #include ...