iT邦幫忙

0

27.jQuary之操作DOM物件

  • 分享至 

  • xImage
  •  

DOM全稱為 Document Object Model(文件物件模型)是一種表示和操作HTML、XML等文件結構的程式化方式。它將文件視為一個樹狀結構,允許程式通過程式碼來訪問、修改和操作文件的內容,以下是一些常見的 jQuery 操作 DOM 物件的方法:
(一)

  1. $(selector).text() 返回文本內容(取得所有符合內容的元素的內容)
    $ (element).text(textContent) 設置所選元素的文本內容(會覆蓋所有匹配元素的內容。)
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468bUVs3AZazD.png
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468bWp774aRhi.png
  2. $(selector).html() 取得第一個符合之元素(包括HTML標籤)
    $(selector).html(content) 覆蓋所有匹配元素的內容。
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468tfGlJRazbR.png
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468i4TcHKq0D8.png
    VS $(selector).text()https://ithelp.ithome.com.tw/upload/images/20231011/20163468MOr0ZEOPMw.png
    3.val():讀取和修改一個表單元素的value字段值
    設置或返回被選元素的屬性值(針對表單元素)
    二、插入新元素
    $(element).append(content); // 在"元素內部"末尾插入,加到指定區塊內的後面
    $(element).prepend(content); // 在元素內部起始處插入,加到指定區塊內的前面
    $(element).after(content); // 在"元素後插入",加到指定區塊外的後面
    $(element).before(content); // 在元素前插入,加到指定區塊外的前面
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468rFlbPudwgX.png
    三、操作元素屬性
    $(element).attr(attributeName); // 獲取屬性值
    $(element).attr(attributeName, value); // 設置屬性值
    四、移除元素
    .remove() - 用來刪除參數所指定的元素(及其子元素)。
    https://ithelp.ithome.com.tw/upload/images/20231011/20163468LtunzAe3bQ.png
    .empty() - 刪除匹配到的元素其所有子節點
    https://ithelp.ithome.com.tw/upload/images/20231011/201634686j67Xa2qEq.png
    參考資料:
    1.jQuery API Documentation:https://api.jquery.com/
    2.W3school:https://www.w3schools.com/jquery/default.asp

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言