jQuery 是一個已經廣為使用的 JavaScript 函式庫,目前已經獲得微軟與 Nokia 青睞,即將被納入這兩家廠商的產品中。觀望了很久,今天是第一天玩 jQuery,記錄一下操作的過程。

首先準備一個簡單的測試頁面。它分成三個部分:HTML、CSS、JavaScript。你可以把以下的原始碼複製貼上到記事本,注意要儲存相對應的副檔名。

test.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>jQuery 小測試</title>
    <link rel="stylesheet" href="fannys23.css" type="text/css" />
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="fannys23.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <h1>jQuery 小測試</h1>
        <div class="content" id="author">by fannys23</div>
        <div class="content" id="textfield"></div>
        <div class="content" id="jQueryTest"><p class="neat">從 jQuery 官網首頁的 &quot;Learn JQUERY Now!&quot; 取得的語法測試。</p></div>
    </div>
</body>
</html>




fannys23.css

body
{
    margin: 30px;
}

.content-set
{
    font-size: 12pt;
    color: Navy;
}

.author-set
{
    font-style: italic;
    border: 1px solid Green;
    padding: 0.5em;
    width: 20em;
    float: right;
}

p.neat
{
    display: none;
    clear: both;
    margin: 1em 0;
    padding: 1em 15px;
    background: #0F67A1;
    color: #fff;
}



fannys23.js

$(document).ready(function() {
  $('.content').addClass('content-set');
  $('#author').addClass('author-set');
 
  if ($('#textfield').html().length==0){
        $('#textfield').html('<p>預設的測試內容</p>');
  }
 
  $("p.neat").addClass("ohmy").show("slow");
});



把三個檔案依檔名存好以後放在同一層目錄下,在瀏覽器打開 test.html,會發現這時的測試頁面只是一個搭配了樣式表的網頁,完全沒有用到 jQuery 的任何東西。為了要成功引入 jQuery 的功能,得再補上 jQuery 的函式庫。

引用 jQuery 的方法很多,我的做法是到 jQuery Project 下載 jQuery-1.2.6.min.js。下載後放在同一層目錄裡頭,這時再重新整理一下,嘿,好了,畫面有變化了呢。

不過,如果使用者可以下載一次 jQuery 函式庫就好,或者說我們以後不用自己更新版本,再或者說不用擔心要把 jQuery 函式庫放到哪裡……應該會更理想吧?所以,我們也可以再改一下 HTML,直接抓 HOST 在 Google 的 jQuery 函式庫。語法是這樣:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 



也就是把 test.html 中,原本指定在本地端檔案的 "jquery-1.2.6.min.js",取代成擺在 Google 上的 "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"。這麼一來,讓使用者拜訪數個使用同樣版本的 jQuery 的網站時,可以到 Google AJAX API 去下載一次就好。

但這樣的 jQuery 一點都不炫麗有趣啊。最有趣的入門範例還是要推薦好人助教 Ericsk 的部落格上的「jQuery 學習心得筆記」系列文以及教學投影片,循序漸近、淺顯易懂,在這邊誠懇大推!(y)

附記一下,有三種取得頁面元素的作法:

 

 

欲取得頁面元素 範例 語法
經由 HTML 標籤的名稱取用 取用 <p> 標籤裡的內容 $('p')
經由元素的唯一名稱(ID)取得 取用 <p id="test"> 標籤裡的內容 $('#test')
經由元素的類別名稱(class)取用 取用 <p class="test"> 標籤裡的內容 $('.test')
創作者介紹
創作者 fannys23 的頭像
fannys23

小攻城師的戰場筆記

fannys23 發表在 痞客邦 留言(0) 人氣()