1.3 jQuery代码的编写

发表于 2021-12-12 分类于锋利的jQuery(第2版) ，第1章认识jQuery Waline：本文字数： 7.9k 阅读时长 ≈ 7 分钟

1.3 jQuery代码的编写

1.3.1 配置jQuery环境

1．获取jQuery最新版本

进入jQuery的官方网站http://jquery.com/。图1-8所示的右边的GRAB THELATEST VERSION区域，下载最新的jQuery库文件。

epub_731606_15

图1-8 jQuery官方网站截图

2．jQuery库类型说明

jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），它们的区别如表1-1所示。

表1-1 几种jQuery库类型对比

epub_731606_16

为统一本书的讲解，建议选择下载jQuery最新版本。

3．jQuery环境配置

jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。

4．在页面中引入jQuery

本书将jquery.js放在目录scripts下，在所提供的jQuery例子中为了方便调试，引用时使用的是相对路径。在实际项目中，读者可以根据实际需要调整jQuery库的路径。

在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了，程序如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html； charset=utf-8" />
<!-- 在head标签内 引入jQuery  -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

注意：在本书的所有章节中，如果没有特别说明，jQuery库都是默认导入的。

1.3.2 编写简单的jQuery代码

在开始编写第1个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。

下面开始编写第1个jQuery程序。

//⋯省略其他代码
<!-- 引入 jQuery -->
<script src="../scripts/jquery.js"type="text/javascript"> </script>
<script type="text/javascript">
    $(document).ready(function(){             //等待Dom元素加载完毕
      alert("Hello World!");                  //弹出一个框
    });
</script>
//⋯省略其他代码

运行结果如图1-9所示。

图1-9 输出Hello World!

在上面的代码中有一个陌生的代码片段，如下：

1
2
3

$(document).ready(function(){
//⋯
});

这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-2对它们进行了简单对比。

表1-2 window.onload与$(document).ready()的对比

epub_731606_18

注意：关于$(document).ready()的详细说明可以参考附录A；关于$(document).ready()和window.onload的详细对比，可以参考第4章4.1.1小节。

1.3.3 jQuery代码风格

代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery代码编码风格，对日后代码的维护是非常有利的。

1．链式操作风格

以一个实际项目中的代码为例，这是一个导航栏，HTML代码如下：

<!--//⋯省略其他代码-->
<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>
<!--//⋯省略其他代码-->

代码执行效果如图1-10所示。

项目需求是做一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。

epub_731606_19

图1-10 导航栏初始化

选择jQuery来实现这个导航栏效果，编写的代码片段如下：

$(".level1 > a").click(function () {
    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass
    ("current").next().hide();
    return false;
});

这段代码的作用是，当鼠标单击到a元素（它是class含有level1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。

单击导航栏，效果如图1-11和图1-12所示。

图1-11 效果1

我的笔记: 展开/折叠

此时html代码如下:

<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none" class="current">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2" style="display: none;">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2" style="display: none;">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

图1-12 效果2

我的笔记：展开/折叠

此时的html代码如下：

<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none" class="">衬衫</a>
            <ul class="level2" style="display: none;">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none" class="current">卫衣</a>
            <ul class="level2" style="">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2" style="display: none;">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

这就是jQuery强大的链式操作，一行代码就完成了导航栏的功能。

虽然jQuery做到了行为和内容的分离，但jQuery代码本身也应该拥有良好的层次结构及规范，这样才能进一步改善代码的可读性和可维护性。因此，推荐一种带有适当的格式的代码风格。上面的代码改成如下格式：

$(".level1 > a").click(function () {
    $(this).addClass("current")             //当前元素<a>添加"current"样式
        .next().show()                      //当前元素的下一个元素显示
        //父元素的同辈元素的子元素<a> 移除"current"样式
        .parent().siblings().children("a").removeClass("current")
        .next().hide();                     //这些<a>元素的下一个元素 隐藏
    return false;
});

代码格式调整后，易读性好了很多。

也许读者看了上面的代码还是不明白其中的要领，这里总结3种情况。
（1）对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：

1	$("li").show().unbind("click")；

（2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：

$(this).removeClass("mouseout")
    .addClass("mouseover")
    .stop()
    .fadeTo("fast", 0.6)
    .fadeTo("fast", 1)
    .unbind("click")
    .click(function () {
        // do something …
    });

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。例如上面提到的代码：

$(this).addClass("highlight")
    .children("li").show().end()
.siblings().removeClass("highlight")
    .children("li").hide()；

注意：程序块严格采用缩进风格书写，能保证代码清晰易读，风格一致。

2．为代码添加注释

jQuery 以其强大的选择器著称，有时候很复杂的问题用一行选择器就可以轻松解决。但是使用jQuery进行代码编写时应该注意一个问题，就是必要的注释。请看下面的例子，代码如下：

1	$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")；

这行代码即使是经验丰富的jQuery开发者也不能立刻看懂。

这行代码的作用是，在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。

jQuery的选择器很强大，能够省去使用普通的JavaScript必须编写的很多行代码。但是，在编写一个优秀的选择器的时候，千万不要忘记给这一段代码加上注释，这很重要。无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果。在上段代码片段中加上注释就能提高其易读性，如下所示：

1
2

//在一个id为table的表格的tbody中，如果每行的一列中的checkbox没有被禁用，则把这行的背景设为红色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")；

通过类似有意义的注释，能够培养良好的编码习惯和风格，提高开发效率。