iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0

當您使用jQuery來操作DOM(文件物件模型)時,您可以輕鬆地添加、刪除、修改和查詢HTML元素和它們的屬性,使您能夠實現互動式和動態的網頁效果。

1.text

獲取或設置元素的文本內容

var text = $("p").text();
console.log(text); // 輸出段落的文本內容

獲取文本內容

$("p").text("這是新的文本內容");

設定文本內容

2.val

獲取或設置表單元素的值。

var value = $("input").val();
console.log(value); // 輸出輸入元素的值

獲取輸入元素的值

$("input").val("新的值");

設置輸入元素的值

3.html

獲取或設置元素的HTML內容

var htmlContent = $("#myDiv").html();
console.log(htmlContent); // 輸出元素的HTML內容

獲取元素的HTML內容

$("#myDiv").html("<p>這是新的HTML內容</p>");

設置元素的HTML內容

4.attr

獲取或設置元素的屬性值

var src = $("img").attr("src");
console.log(src); // 輸出圖片的src屬性值

獲取屬性值

$("img").attr("alt", "替代文字");

設置屬性值

5.append

將元素或內容追加到選擇的元素內部

$("#myDiv").append("<p>這是追加的內容</p>");

6.prepend

將元素或內容插入到選擇的元素內部的開頭位置

$("#myDiv").prepend("<p>這是插入的內容</p>");

7.after

在選擇的元素之後插入新元素或內容

$("#myElement").after("<p>這是新的內容</p>");

8.before

在選擇的元素之前插入新元素或內容

$("#myElement").before("<p>這是新的內容</p>");

9.remove

從DOM中刪除選擇的元素

$("#myElement").remove();

10.empty

從選擇的元素中刪除所有子元素和內容

$("#myElement").empty();

上一篇
DAY23jquery
下一篇
DAY25jQuery 事件
系列文
網頁設計之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言