jQuery操作屬性與樣式詳解_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery操作屬性與樣式詳解_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

jquery樣式

• 區分 DOM 屬性與元素屬性

<img class="classA lazy"  src="/static/imghwm/default1.png"  data-src="images/image.1.jpg"  id="hibiscus" alt="Hibiscus" />

通常開發人員習慣將id,src,alt等叫做這個元素的"屬性"。我們稱之為"元素屬性"。但是在解析成 DOM 物件時,實際瀏覽器最後會將標籤元素解析成"DOM 物件", 並且將元素的"元素屬性"儲存為"DOM 屬性"，兩者是有區別的。

甚至有些"元素屬性"和"DOM 屬性"的名稱都不一樣,比如上面的元素屬性 class, 轉換為 DOM 屬性後對應 className。

牢記, 在 javascript 中我們可以直接取得或設定"DOM 屬性":

<script type="text/javascript">
  $(function() {
    var img1 = document.getElementById("hibiscus");
    alert(img1.alt);
    img1.alt = "Change the alt element attribute";
    alert(img1.alt);
    img1.className = "classB";
  })
</script>

所以如果要設定元素的 CSS 樣式類別, 要使用的是 DOM 屬性"className"而不是元素屬性"class"。
-------------------------------------------------- ------------------------------
•操作"Dom 屬性"

在 jQuery 提供了each()函數用於遍歷 jQuery 包裝集,其中的this指針是一個 DOM 物件,所以我們可以應用這一點配合原生 javascript 來操作元素的 DOM 屬性:

$("img").each(function(index) {
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
   this.alt = "changed";
   alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
 });

•操作"元素屬性"

我們可以使用 javascript 中的getAttribute和setAttribute來操作元素的"元素屬性"。在 jQuery 中給你提供了attr()包裝集函數, 能夠同時操作包裝集中所有元素的屬性:

雖然我們可以使用removeAttr(name)刪除元素屬性,但是對應的DOM 屬性是不會被刪除的, 只會影響DOM 屬性的值.例如將一個input元素的readonly元素屬性去掉,會導致對應的DOM 屬性變成false(即input變成可編輯狀態).

•修改 CSS 類別和樣式

下表是修改 CSS 類別相關的 jQuery 方法：

注意addClass(class)和removeClass(classes)的參數可以一次傳入多個 css 類別, 用空格分割。 removeClass 方法的參數可選, 如果不傳入參數則移除全部 CSS 類別。

同樣當我們想要修改元素的具體某一個 CSS 樣式,即修改元素屬性"style"時, jQuery 也提供了對應的方法:

• 取得常用屬性

<!doctype html>
<html lang="zh">
<head>
 <meata charset="utf-8"/>
 <title>get object width</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script>
  $(function() {
   alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined
   alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
   alert("width():" + $("#testDiv").width()); //正确的数值 1264
   alert("style.width:" + $("#testDiv")[0].style.width); //空值
  })
 </script>
</head>
<body>
 <div id="testDiv">test text</div>
</body>
</html>

我們希望取得測試圖層的寬度,使用 attr 方法取得"元素特性"為 undefined, 因為並沒有為 div 增加 width。而使用 css()方法雖然可以獲取到 style 屬性的值, 但是在不同瀏覽器裡返回的結果不同,IE6 下返回 auto,而 FF 下雖然返回了正確的數值但是後面帶有"px"。所以 jQuery 提供了 width()方法,此方法回傳的是正確的不帶 px 的數值。

針對上面的問題,jQuery 為常用的屬性提供了獲取和設定的方法,比如 width()用戶獲取元素的寬度,而 width(val)用來設定元素寬度。

以下這些方法可以用來取得元素的常用屬性值:

1. 寬和高相關 Height and Width

outerWidth 可以接受一個 bool 值參數表示是否計算 margin 值。

2. 位置相關 Positioning

以上這篇jQuery操作屬性和樣式詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。