1.2 编写第一个包含jQuery库的程序_15天学会jQuery编程与实战（视频教学版）（Web前端技术丛书）-QQ阅读男生玄幻网

书名：15天学会jQuery编程与实战（视频教学版）（Web前端技术丛书）
作者名：刘鑫
本章字数：350字
更新时间：2020-11-28 16:21:41

1.2 编写第一个包含jQuery库的程序

编写jQuery的工具很多，记事本、Notepad++、Dreamweaver都可以。为方便读者学习，这里先简单用记事本写一个HTML 5网页。

【示例1-1】jquery01.html

        01    <! DOCTYPE html>
        02    <html lang="zh-CN">
        03    <head>
        04        <meta charset="UTF-8">
        05        <title>HELLO</title>
        06    <body>
        07     <div id="hi">Hello jQuery，我来了</div>
        08    </body>
        09    </html>

这个网页代码结构比较简单，估计学习过HTML的人都能看懂。代码中只有一个div，会在网页中显示一行文字“Hello jQuery，我来了”。

此时，我们要为div增加一个单击事件，首先要获取div，使用的JavaScript代码是：

document.getElementById("hi")

如果使用jQuery，代码是：

$("# hi")

这样进行比较后，是不是发现jQuery书写更简单。下面使用jQuery为div增加事件。

（1）首先在第05行后面添加对jQuery库的引用。这里要注意js文件存放的位置，如果在当前目录中，就不需要．./。../是指js文件在上一级目录中。

<script src="../jquery-3.1.1.js" type="text/javascript" ></script>

（2）在文档的加载事件中为div增加事件。

        <script type="text/javascript">
        $(document).ready(function(e) {
            $("#hi").click(function(){
            alert("hello");
            });
        });
        </script>

首先使用$("#hi")获取div，然后添加click事件，详细的代码在下一节分析。本示例的效果如图1.3所示。

图1.3 第一个jQuery程序