從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

来源:http://www.cnblogs.com/wzhiq896/archive/2016/10/20/5967494.html
-Advertisement-
Play Games

本系列文章導航 從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式 一.摘要 本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習. 二.前言 通過前面幾章我們已經能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對 ...


本系列文章導航

 

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

 

一.摘要

本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習.

 

二.前言

通過前面幾章我們已經能夠完全控制jQuery包裝集了,  無論是通過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.

 

三. 區分DOM屬性和元素屬性

一個img標簽:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

 

通常開發人員習慣將id, src, alt等叫做這個元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對象時, 實際瀏覽器最後會將標簽元素解析成"DOM對象", 並且將元素的"元素屬性"存儲為"DOM屬性". 兩者是有區別的. 
雖然我們設置了元素的src是相對路徑:images/image.1.jpg 
但是在"DOM屬性"中都會轉換成絕對路徑:http://localhost/images/image.1.jpg.

甚至有些"元素屬性"和"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);
        })
    </script>


所以如果要設置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:

img1.className = "classB";

 

四. 操作"DOM屬性"

在jQuery中沒有包裝操作"DOM屬性"的函數, 因為使用javascript獲取和設置"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);
            });

下麵是each函數的說明:

each( callback )  Returns: jQuery包裝集

對包裝集中的每一個元素執行callback方法. 其中callback方法接受一個參數, 表示當前遍歷的索引值,從0開始.

 

五. 操作"元素屬性"

我們可以使用javascript中的getAttribute和setAttribute來操作元素的"元素屬性".

在jQuery中給你提供了attr()包裝集函數, 能夠同時操作包裝集中所有元素的屬性:

名稱 說明 舉例

attr( name )

 取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined 。 返迴文檔中第一個圖像的src屬性值: 
$("img").attr("src");
attr( properties )

將一個“名/值”形式的對象設置為所有匹配元素的屬性。

這是一種在所有匹配元素中批量設置很多屬性的最佳方式。 註意，如果你要設置對象的class屬性，你必須使用'className' 作為屬性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

 為所有圖像設置src和alt屬性: 
$("img").attr({ src: "test.jpg", alt: "Test Image" });
attr( key, value ) 為所有匹配的元素設置一個屬性值。 為所有圖像設置src屬性: 
$("img").attr("src","test.jpg");
attr( key, fn )

為所有匹配的元素設置一個計算的屬性值。

不提供值，而是提供一個函數，由這個函數計算的值作為屬性值。

 把src屬性的值設置為title屬性的值: 
$("img").attr("title", function() { return this.src });
removeAttr( name ) 從每一個匹配的元素中刪除一個屬性 將文檔中圖像的src屬性刪除: 
$("img").removeAttr("src"); 

 

當使用id選擇器時常常返回只有一個對象的jQuery包裝集, 這個時侯常使用attr(name)函數獲得它的元素屬性:

function testAttr1(event) {
   alert($("#hibiscus").attr("class"));
}


註意attr(name)函數只返回第一個匹配元素的特定元素屬性值. 而attr(key, name)會設置所有包裝集中的元素屬性:

//修改所有img元素的alt屬性
$("img").attr("alt", "修改後的alt屬性");


而 attr( properties ) 可以一次修改多個元素屬性:

$("img").attr({title:"修改後的title", alt: "同時修改alt屬性"});


另外雖然我們可以使用 removeAttr( name ) 刪除元素屬性, 但是對應的DOM屬性是不會被刪除的, 只會影響DOM屬性的值.

比如將一個input元素的readonly元素屬性去掉,會導致對應的DOM屬性變成false(即input變成可編輯狀態):

$("#inputTest").removeAttr("readonly");

 

六,修改CSS樣式

修改元素的樣式, 我們可以修改元素CSS類或者直接修改元素的樣式.

一個元素可以應用多個css類, 但是不幸的是在DOM屬性中是用一個以空格分割的字元串存儲的, 而不是數組. 所以如果在原始javascript時代我們想對元素添加或者刪除多個屬性時, 都要自己操作字元串.

jQuery讓這一切變得異常簡單. 我們再也不用做那些無聊的工作了.

1. 修改CSS類

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

名稱 說明 實例

addClass( classes )

 為每個匹配的元素添加指定的類名。 為匹配的元素加上 'selected' 類: 
$("p").addClass("selected");
hasClass( class ) 判斷包裝集中是否至少有一個元素應用了指定的CSS類
$("p").hasClass("selected");
removeClass( [classes] ) 從所有匹配的元素中刪除全部或者指定的類。 從匹配的元素中刪除 'selected' 類: 
$("p").removeClass("selected");
toggleClass( class ) 如果存在（不存在）就刪除（添加）一個類。 為匹配的元素切換 'selected' 類: 
$("p").toggleClass("selected");
toggleClass( class, switch ) 當switch是true時添加類, 
當switch是false時刪除類

每三次點擊切換高亮樣式: 
var count = 0; 
$("p").click(function(){ 
  $(this).toggleClass("highlight", count++ % 3 == 0); 
});

 

使用上面的方法, 我們可以將元素的CSS類像集合一樣修改, 再也不必手工解析字元串.

註意  addClass( class ) 和removeClass( [classes] ) 的參數可以一次傳入多個css類, 用空格分割,比如:

$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });


removeClass方法的參數可選, 如果不傳入參數則移除全部CSS類:

 $("p").removeClass()

 

2. 修改CSS樣式

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

名稱 說明 實例
css( name ) 訪問第一個匹配元素的樣式屬性。 取得第一個段落的color樣式屬性的值: 

$("p").css("color");
css( properties )

把一個“名/值對”對象設置為所有匹配元素的樣式屬性。

這是一種在所有匹配的元素上設置大量樣式屬性的最佳方式。

 將所有段落的字體顏色設為紅色並且背景為藍色: 
$("p").css({ color: "#ff0011", background: "blue" }); 

 
css( name, value )

在所有匹配的元素中，設置一個樣式屬性的值。

數字將自動轉化為像素值

 將所有段落字體設為紅色: 

$("p").css("color","red");

 

七.獲取常用屬性

雖然我們可以通過獲取屬性,特性以及CSS樣式來取得元素的幾乎所有信息,  但是註意下麵的實驗:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>獲取對象寬度</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(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">
        測試文本</div>
</body>
</html>


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

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

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

1.寬和高相關 Height and Width

名稱 說明 舉例
height( ) 取得第一個匹配元素當前計算的高度值（px）。 獲取第一段的高: 
$("p").height();
height( val ) 為每個匹配的元素設置CSS高度(hidth)屬性的值。如果沒有明確指定單位（如：em或%），使用px。 把所有段落的高設為 20: 

$("p").height(20);
width( ) 取得第一個匹配元素當前計算的寬度值（px）。 獲取第一段的寬: 
$("p").width();
width( val )

為每個匹配的元素設置CSS寬度(width)屬性的值。

如果沒有明確指定單位（如：em或%），使用px。

 將所有段落的寬設為 20: 

$("p").width(20);
innerHeight( )

獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。 
此方法對可見和隱藏元素均有效。

 見最後示例
innerWidth( )

獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。 
此方法對可見和隱藏元素均有效。

 見最後示例
outerHeight( [margin] )

獲取第一個匹配元素外部高度（預設包括補白和邊框）。 
此方法對可見和隱藏元素均有效。

 見最後示例
outerWidth( [margin] )

獲取第一個匹配元素外部寬度（預設包括補白和邊框）。 
此方法對可見和隱藏元素均有效。

 見最後示例

 

關於在獲取長寬的函數中, 要區別"inner", "outer"和height/width這三種函數的區別:

image

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

相信此圖一目瞭然各個函數所索取的範圍. 圖片以width為例說明的, height的各個函數同理.  

2.位置相關 Positioning

另外在一些設計套彈出對象的腳本中,常常需要動態獲取彈出坐標並且設置元素的位置.

但是很多的計算位置的方法存在著瀏覽器相容性問題,  jQuery中為我們提供了位置相關的各個函數:

名稱 說明 舉例
offset( )

獲取匹配元素在當前視窗的相對偏移。

返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

 獲取第二段的偏移: 
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
position( )

獲取匹配元素相對父元素的偏移。

返回的對象包含兩個整形屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

 獲取第一段的偏移: 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop( )

獲取匹配元素相對滾動條頂部的偏移。

此方法對可見和隱藏元素均有效。

 獲取第一段相對滾動條頂部的偏移: 
var p = $("p:first"); 
$("p:last").text( "scrollTop:" + p.scrollTop() );
scrollTop( val )

傳遞參數值時，設置垂直滾動條頂部偏移為該值。

此方法對可見和隱藏元素均有效。

 設定垂直滾動條值: 
$("div.demo").scrollTop(300);
scrollLeft( )

獲取匹配元素相對滾動條左側的偏移。

此方法對可見和隱藏元素均有效。

 獲取第一段相對滾動條左側的偏移: 
var p = $("p:first"); 
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
scrollLeft( val )

傳遞參數值時，設置水平滾動條左側偏移為該值。

此方法對可見和隱藏元素均有效。

 設置相對滾動條左側的偏移: 
$("div.demo").scrollLeft(300);

 

八.總結

本篇文章主要講解如何使用jQuery操作元素的屬性和修改樣式. 請大家主要註意元素屬性和DOM屬性的區別. 下一篇文章將講解最重要的事件, 介紹如何綁定事件, 操作事件對象等.


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • POJ 3761 Bubble Sort 快速冪取模+組合數學
    轉載於：http://www.cnblogs.com/767355675hutaishi/p/3873770.html 題目大意：眾所周知冒泡排序演算法多數情況下不能只掃描一遍就結束排序，而是要掃描好幾遍。現在你的任務是求1~N的排列中，需要掃描K遍才能排好序的數列的個數模20100713。註意，不同 ...
  • [代碼實例]用C++實現的簡單無符號整數進位轉換器
    大家好啊,今天為大家帶來的是自己實現的用C++編寫的簡單進位轉換器,用於10進位數和8進位數,16進位數,2進位數的相互轉換. 首先,說明一下什麼是進位.n進位就是一種用來表示數值的方法,n進位,顧名思義,逢n進1.我們日常生活中使用的基本都是10進位數,逢10進1;現代電腦處理器所能處理的只能是 ...
  • java8--類載入機制與反射(java瘋狂講義3複習筆記)
    本章重點介紹java.lang.reflect包下的介面和類 當程式使用某個類時,如果該類還沒有被載入到記憶體中,那麼系統會通過載入,連接,初始化三個步驟來對該類進行初始化. 類的載入時指將類的class文件讀入記憶體,併為之創建一個java.lang.class對象,也就是說,當程式中使用任何類時,系 ...
  • 子數涵數·C語言——指針
    一、什麼是指針？ 指針在百度的解釋：是編程語言中的一個對象，利用地址，它的值直接指向（points to）存在電腦存儲器中另一個地方的值。 也就是說，指針是用於指向某一記憶體單元。 簡而化之，指針便是地址。 二、聲明指針 1.方法：數據類型 *名稱 初始化 2.例如： 3.註意：指針聲明完一定要初始化 ...
  • JAVA Collections工具類sort()排序方法
    JAVA Collections工具類sort()排序方法，對Comparable介面 Comparator介面簡述 ...
  • JAVA WEB 作用域之間的區別
    JAVA WEB 作用域 1、page屬性範圍（pageContext） a、在一個頁面設置的屬性，跳轉到其他頁面就無法訪問了（包括重定向和）。 示例:pageScopeDemo01.jsp <%@ page import="java.util.*" language="java" contentT ...
  • Spring中的事務
    Spring配置文件中關於事務配置總是由三個組成部分，分別是DataSource、TransactionManager和代理機制這三部分，無論哪種配置方式，一般變化的只是代理機制這部分。 DataSource、 TransactionManager這兩部分只是會根據數據訪問方式有所變化，比如使用Hi ...
  • Java --socket編程
    首先讓我們看看最簡單的socket client與server實例： Client Server 以上一個Client和一個Server，最簡單的例子，但是體現socket編程。 如果需要Server服務端一直監聽埠，那麼只需要迴圈就可以（server.accept()會阻塞等待請求），至於需要高 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類