jQuery 入門教學 – 使用 attr() 抓取圖片的屬性以及改變圖片的路徑

在 JavaScript 語法中,可以使用 document.getElementById(“MYIMG”).src 來抓取圖片的 src 路徑,然後改變圖片的 src 路徑,就可以製作出在網頁上變換圖片的功能。 到了 jQuery 語法,就改成了使用 $(“#MYIMG”).attr(“src”); 這個方法來抓取圖片的 src 路徑,以下,我們就設計了一個簡單的範例來示範如何使用 attr() 這個指令。

 

JavaScript 程式設計  - jQuery 入門教學 - 使用 attr() 抓取圖片的屬性以及改變圖片的路徑 - FLY011


這個網頁的 HTML 語法部份,如下圖:

JavaScript 程式設計  - jQuery 入門教學 - 使用 attr() 抓取圖片的屬性以及改變圖片的路徑 - FLY03_thumb

舉例說明:

當我們使用 $(“#SS1”).attr(“width”); 就可以抓出第一張小圖片的寬度,得到 120 這個值。

當我們使用 $(“#SS1”).attr(“id”); 就可以抓出第一張小圖片的 id 名字,得到 SS1 這個值。

當我們使用 $(“#SS1”).attr(“src”); 就可以抓出第一張小圖片的路徑,得到 images/small1.jpg 這個值。

 

當我們使用 $(“#SS1”).attr(“width”, “150”); 就可以把小圖片的寬度,更改成為 150 這個值。

當我們使用 $(“#SS1”).attr(“src”, “images/small2.jpg”); 就可以把小圖片的的路徑,更改成為 images/small2.jpg 這個值。

 


這個範例的 jQuery 語法部份,如下圖:

JavaScript 程式設計  - jQuery 入門教學 - 使用 attr() 抓取圖片的屬性以及改變圖片的路徑 - FLY02_thumb1

 

jQuery 語法說明:

第 3 行:$(“#SMALL img”) 選取了所有的小圖片,使用 click 滑鼠事件。

第 5 行:宣告變數 N 抓取 $(this).attr(“id”) 就可以得到被滑鼠點選到的那一張小圖片的 id 名稱。

第 5 行:最後再使用 substr(2) 截取出小圖片的 id 名稱的最後一個字。

第 7 行:選取 $(“#BIG”) 大圖片,使用 attr(“取得圖片的路徑”,”更改圖片的路徑”) 。

 

以上,一個簡單的範例,就可以使用 jQuery 製作出在網頁上點選小圖片更換大圖片的功能了。

如果您對於這個範例有其他的問題或想法,歡迎直接到老師的 Facebook 交流討論,也可以直接到我們飛肯設計的 Facebook 交流討論。

最後,再次感謝您閱讀完這一篇文章。

 

 


本文作者:
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in JavaScript 程式設計 and tagged , , , , .

迴響已被關閉。