essoduke's blog

什麼是 jQuery?

[quote]jQuery 是一個快速又簡潔的 JavaScript 程式庫,簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程,簡單地來說,jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。[/quote]

雖然如此簡單,不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒,而網路上眾多範例都是屬於進階、甚至高階技巧,所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章,而第一篇就鎖定在網頁元素的操作,希望對於入門者有所幫助。

剛開始的準備

當然就是下載最新版本的 jQuery 並引入網頁的 head 區段,並準備好方便編輯 HTML 源碼的編輯器,我推薦 PSPad,一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。




PsPad

基礎:網頁元素控制

我合作過不少網頁設計師,對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計,所以對於 HTML 原始碼通常都一知半解,但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。

舉個最常在 DW 源碼內出現的 id 屬性,多數使用 DW 的設計師都不清楚這個 id 有什麼用途?簡單來說,id 就是所謂的 identity(識別)也就是該元素的唯一識別名稱,單一網頁的一個 id 只能出現一次,為的就是方便使用 DOM 的方式來控制這些元素。

案例一觀看範例

將滑鼠移到超連結上,下方黑線區塊內的文字變更為超連結的文字,移開後就恢復空白。這個案例適用於想要用不同的方式設計連結說明。

/*在 ... 內放置超連結 a 元素和一個 id 為 mytext 的 div 元素*/
Google
/*在 ... 內加入下列 script*/

當然也可以直接獲取元素的 class name 來控制元素,只要將 class="link" 加入 a 元素中,並將 jQuery Selector 改寫為:

$(".link").mouseover(function(){
...
}

使用 jQuery 控制網頁元素就是這麼簡單!

下一個單元就是令很多網頁設計師頭疼的 Form 表單元件的應用範例,如聚焦事件、鎖定按鈕、友善的錯誤提示等等。


  • kk

    版大請問一下
    http://code.google.com/intl/zh-CN/apis/maps/documentation/examples/control-localsearch.html這個功能

    var mymap = ‘viewmap_small';

    var map = null;
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById(mymap));
    //縮放和移動控件
    map.addControl(new GSmallMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMenuMapTypeControl());
    //加入搜尋功能
    map.addControl(new google.maps.LocalSearch());

    var center = new GLatLng(‘$shop[mappoint][1]‘,’$shop[mappoint][0]‘);
    var shop = ‘$shop[shopname]‘;


    if( parent.lng && parent.lat && parent.shopname) {
    var center = new GLatLng( parent.lat,parent.lng );
    var shop = parent.shopname;
    }

    if(center) {
    map.setCenter(center, 15);
    var marker = new GMarker(center, {title: shop});
    map.addOverlay(marker);
    } else {
    var center = new GLatLng($_default_mappoint[1], $_default_mappoint[0]);
    map.setCenter(center, 12);
    }
    }

    要放在那個位置裡呢

  • http://essoduke.org/ essoduke

    我剛剛測試了一下可以正常運作,範例請參考以下網址的地圖右下處:

    http://app.essoduke.org/gmap/

    您的原始碼可能因為 wordpress 的關係而有把某些符號置換過,所以沒使用作為範例之用。

    我稍微整理一下重點:

    1. 需要引入兩個 js
    http://www.google.com/uds/api?file=uds.js&v=1.0
    http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js

    2.加入下列控制項語法
    myMap.map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));

    我只加入上述要點即可使用 LocalSearch,請參考看看。