[JQ权威指南]第一天：事件操作链接式书写_jq的链接写法是什么意思-CSDN博客

本文链接：https://blog.csdn.net/david_520042/article/details/46431091

在编写页面某元素事件时，jQuery 程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用，我们通过一个示例加以阐述。示例 1-2　jQuery 事件的链式写法（1）功能描述在示例 1-1 基础之上，增加两个

元素，一个为框架，另一个为标题。示例 1-1 显示的文字为内容，框架元素包含标题和内容元素。当页面首次加载时，被包含的内容

标记是不可见的，当用户单击主题

标记时，改变自身的背景色，并将内容

标记显示出来。（2）实现代码新建一个 HTML 文件 1-2.html, 加入如下代码：

<!DOCTYPE html> <html> <head> <title>jQuery事件的链式写法</title> 
 <style type="text/css"> 
 .iframe{ border:solid 1px #888;font-size:13px;} 
 .content{ padding:8px 0px;font-size:12px; text-align:center;display:none;} 
 </style> 
 <script type="text/javascript"> 
 $(function() { $(".content").html("您好！欢迎来到jQuery的精彩世界。"); 
 $(".title").click(function() { $(this).addClass("curcol") .next(".content").css("display", "block"); 
 }); 
 </head> 
 <div class="iframe"> 
 <div class="title">标题</div> 
 </div> 
 </body> 
 </html>

在上述文件的代码中，加粗代码就是链式写法。（3）页面效果执行 HTML 文件 1-2.html，实现的页面效果如图 1-3 所示。
1.4　jQuery 简单应用　　7
图 1-3　DIV 元素单击前后的页面对比效果
（4）代码分析当用户单击 Class 名称为“title”的元素时，自身增加名称为“curcol”的样式；同时，将接下来的 Class 名称为“content”元素显示出来。可以看出两个功能的实现通过“.”符号链接在一起