[技術探討] jQuery實作 小而精的網頁函式庫 (三)

jQuery實作小而精的網頁函式庫(三)

繼上兩篇瞭解了jQuery的選擇器和遍歷後,我們知道要如何在頁面中找尋目標物件和遍歷其內容,接下來我們就可以利用 jQuery實作 來改變物件的內容和屬性,來達成網頁動態的效果。

接下來就來介紹jQuery用來改變物件的常用功能。

  • .append() :

在選擇的物件中增加內容,例子如下:

HTML片段 :

<div id=”build”>

</div>

SCRIPT 片段 :

$(“#build”). append(“<div>two</div>”);

結果 :

<div id=”build”>

<div>two</div>

</div>

執行完後我們會發現build中會出現 <div>two</div>,如果我們在append一次新的內容,那該筆內容會在 <div>two</div> 之後。

  • .appendTo() :

此執行結果和append相同,只是要增加物件的指定方式改變。

  • .html() :

修改指定物件的html內容,例子如下:

HTML片段 :

<div id=”build”>

<p>Hello</p>

</div>

SCRIPT 片段 :

$(“#build”).html(“<div>Test</div>”);

結果 :

<div id=”build”>

<div>Test</div>

</div>

執行完後build中的p標籤被取代為div標籤且文字也被改變成Test。

此方法還可以用來獲得指定目標的html標籤內容,範例如下 :

HTML片段 :

<div id=”build”>

<p>Hello</p>

</div>

SCRIPT 片段 :

console.log($(“#build”).html());

執行後我們可以在瀏覽器主控台中看到build中的html標籤內容。

  • .text() :

和html類似不過只改變文字內容,不會改變html標籤。

  • .after() :

在指定物件的後面增加內容,例子如下:

HTML片段 :

<div id=”build”>

<p>Hello</p>

</div>

SCRIPT 片段 :

$(“#build”).after(“<div>Test</div>”);

結果 :

<div id=”build”>

<p>Hello</p>

</div>

<div>Test</div>

增加的位子是在指定物件的下一個位置,而不是其物件中。

  • .before() :

和after()相反,加在指定物件的前方。

  • .empty() :

清除指定物件的內容,例子如下:

HTML片段 :

<div id=”build”>

<p>Hello</p>

</div>

SCRIPT 片段 :

$(“#build”).empty();

結果 :

<div id=”build”>

</div>

build內容完全被清空,效果和用html(“”)一樣。

  • .remove() :

移除指定物件,例子如下

HTML片段 :

<div id=”build”>

<p>Hello</p>

</div>

SCRIPT 片段 :

$(“#build”). remove();

執行完build從網頁中移除。

  • .clone() :

複製指定的物件,例子如下 :

HTML片段 :

<div id=”divA”>

<p>Hello</p>

</div>

<div id=”divB”>

</div>

SCRIPT 片段 :

$(“#divA”).clone().appendTo($(“#divB”));

結果 :

<div id=”divA”>

<p>Hello</p>

</div>

<div id=”divB”>

<div id=”divA”>

<p>Hello</p>

</div>

</div>

執行後可以看到divA物件被複製並加到divB的物件中。

  • .addClass() :

對指定的物件增加新的class,例子如下 :

HTML片段 :

<div id=”build”>

</div>

SCRIPT 片段 :

$(“#build”). addClass (“focus”);

結果 :

<div id=”build” class=”focus”>

</div>

※如要增加多筆class只要用空白隔開即可$(“#build”). addClass (“focus hover”);

  • .removeClass() :

和addClass()相反為移除class。

  • .toggleClass() :

目標物件如果已有class則移除該class,沒有則幫其加上class  :

  • .css() :

給予物件CSS屬性,例子如下:

HTML片段 :

<div id=”build”> </div>

SCRIPT 片段 :

$(“#build”). css(“background”,”skyblue”);

此物件就會增加style=”background:skyblue”。

※如果需要一次增加多種css,寫法如下 :

$(“#build”). css({“background”:”skyblue”,”left”:”10px”});

 

以上介紹了一些常用的方法,接下來我們就利用這些來做些簡單的練習。

練習 1 : 頁面中有一DIV物件當我們滑鼠進到物件和離開時改變其樣式 :

    程式碼:

jQuery

結果 :

jQueryjQuery

利用mouseenter和mouseout事件來達成樣式的切換,我們可以看到當滑鼠進入DIV物件,幫其加上了Divhover的class,讓其變成黑色,接下來當滑鼠離開DIV物件時將剛剛加上的class清除,由此我們就可以簡單的做出切換的效果,若是圖片的話再搭配淡入或淡出的效果,會讓圖片切換時的感覺更好。

 

練習 2 : 製作一個會隨瀏覽器大小改變位置的提示視窗,按下視窗的按鈕移除該視窗,並在頁面中有一按鈕可再叫出提示視窗 :

   程式碼:

jQuery jQuery

結果 :

jQuery

jQuery

jQuery

首先我們先用網頁標籤做出我們想要呈現的提示視窗( PS :抱歉我弄得好醜… ),做好後將其變成字串(行11),我們就可以得到一個提示視窗的框架,接下來我們將其轉為Jquery的物件(行18),此時我們就有了一個提示視窗的物件,接下來取得瀏覽器目前得視窗高度(行19),接著將我們要顯示的內容填入物件的header和span中(行20-24),並將此物件位置移動視窗外部,再將此物件加到網頁中,利用Jquery的動畫方法.animate來讓視窗由上往下移動,做出滑入的效果,當物件移動到畫面中央後給予其置中class並將其top屬性清除(行29),在來給予視窗中的按鈕點擊事件,點擊後將此視窗從網頁中移除,至此產生視窗的功能就已完成,接下來我們只要叫用並給予標題和內容,就可以簡單的產生提示視窗了。

 

參考資料 :

http://api.jquery.com/

 

相關文章:

[技術探討]jQuery 小而精的函式庫 (二)

[技術探討]jQuery小而精的網頁函式庫 (一)

 


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料