iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
Modern Web

關於學習網頁這檔事系列 第 28

DAY28 jquery 簡化 DOM 操作

  • 分享至 

  • xImage
  •  

jQuery 是一個廣泛用於網頁前端開發的 JavaScript 函式庫。它的主要目的是簡化和優化 JavaScript 代碼的編寫。以下是一些示例,展示了如何使用 jQuery 來簡化常見的 DOM 操作:

1.選擇元素 : 例如要選擇所有 p 段落元素,可以這樣做:

$("p")

2.修改內容 : 使用 jQuery 的 .text() 或 .html() 方法來設置元素的內容。例如,將一個元素的文字內容更改為 "新內容":

$("#myElement").text("新內容");

3.添加和刪除元素:例如將一個新的 div 元素添加到 body 元素中:

$("body").append("<div>新的 div 元素</div>");

4.修改元素屬性和樣式:使用 .attr() 方法修改元素的屬性,以及使用 .css() 方法修改元素的樣式。例如修改元素的 class 屬性:

$("#myElement").addClass("highlight");

5.事件處理 : 使用 .on() 方法來附加事件處理程序。

// 添加點擊事件處理程序
$("button").on("click", function() {
    alert("按鈕被點擊了!");
});

這些範例僅是 jQuery 的基本功能,它還提供了許多其他功能和方法,可用於更高級的 DOM 操作。藉助 jQuery,可以更快速地開發具有互動性和動態性的網頁應用程式。今天的介紹就到這裡,我們明天再見吧。


上一篇
DAY27 <HTML>基本標籤
下一篇
DAY29 jQuery選擇器介紹
系列文
關於學習網頁這檔事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言