jQuery权威指南（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 jQuery程序的代码风格

1.3.1 “$”美元符的使用

在jQuery程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀都须使用该符号，可以说它是jQuery程序的标志。例如下列代码：

$("#tip").html("hello world").show(1000);

上述代码表示1000毫秒后，在ID号为“tip”的元素中显示“hello world”字样。

1.3.2 事件操作链接式书写

在编写页面某元素事件时，jQuery程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用，我们通过一个示例加以阐述。

示例1-2 jQuery事件的链式写法

（1）功能描述

在示例1-1基础之上，增加两个<div>元素，一个为框架，另一个为标题。示例1-1显示的文字为内容，框架元素包含标题和内容元素。当页面首次加载时，被包含的内容<div>标记是不可见的，当用户单击主题<div>标记时，改变自身的背景色，并将内容<div>标记显示出来。

（2）实现代码

新建一个HTML文件1-2.html,加入如下代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery事件的链式写法</title>
    <script src="JScript/jquery-1.8.2.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>

在上述文件的代码中，加粗代码就是链式写法。

（3）页面效果

执行HTML文件1-2.html，实现的页面效果如图1-3所示。

图1-3 DIV元素单击前后的页面对比效果

（4）代码分析

当用户单击Class名称为“title”的元素时，自身增加名称为“curcol”的样式；同时，将接下来的Class名称为“content”元素显示出来。可以看出两个功能的实现通过“.”符号链接在一起。

上一章目录下一章