适合把玩的mg

書名： 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程序

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

1.2 編寫第一個包含jQuery庫的程序

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）