jQuery(三)、屬性、CSS

来源:https://www.cnblogs.com/www-123456/archive/2019/04/10/10685703.html
-Advertisement-
Play Games

jQuery設置了很多為標簽進行屬性的操作,比如添加、刪除。 一 、屬性 1 attr(name | properties | [key, value | fn]) 設置或返回被選擇的屬性值。 參數: (1) name :屬性名,返回該屬性值。 (2) properties:該參數為'名 : 值' ...


jQuery設置了很多為標簽進行屬性的操作,比如添加、刪除。

 一 、屬性

1 attr(name | properties | [key, value | fn])

  設置或返回被選擇的屬性值。

  參數:

  (1) name :屬性名,返回該屬性值。

  (2) properties:該參數為'名 : 值' 對的JSON格式對象,給標簽進行設值,如: $("img").attr({'width':'100','height':'100','src':'1.png'})

  (3) key, value:為屬性key設置值value。

  (4) key, function(index,attr):設置屬性,函數function返回屬性值,入參index為當前元素的索引值,attr為原先屬性值。

2 removeAttr(name)

  從每一個匹配的元素中刪除一個屬性。

3 prop(name | properties | [key, value | fn])

  獲取在匹配的元素集中的屬性值(雷同 attr )

4 removeProp(name)

  用來刪除由prop方法設置的屬性值。

5 addClass(class | fn)

  為每個匹配的元素添加指定的類名。

  參數:

  (1) class:一個或多個要添加到元素中的CSS類名,多個class用空格分開。

  (2) function(index, class):此函數必須返回一個或多個class。index為元素索引,class為元素以前的class。

6 removeClass([class | fn])

  為匹配的元素刪除全部或指定的類。

  參數:

  (1) class:一個或多個要刪除的CSS類名,多個class用空額分開。

  (2) removeClass():刪除全部class

  (3) function(index, class):此函數必須返回一個或多個class。index為元素索引,class為元素以前的class。

7 toggleClass(class | fn  [, switch])

  如果存在(不存在)就刪除(添加)一個class。

  參數:

  (1) class:CSS類名。

  (2) class, switch:要切換的class, 一個用來判斷樣式類添加還是移除的 boolean 值。

  (3) switch: 一個用來判斷樣式類添加還是移除的 boolean 值。

  (4) function(index, class[, switch]):1:用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數。 2: 一個用來判斷樣式類添加還是移除的 boolean 值。

8 html([val | fn])

  設置或返回第一個元素的html內容。

  參數:

  (1) html():返回第一個元素的html內容。

  (2) val:要設置的HTML內容值。

  (3) function(index, html):返回一個HTML字元串。index為元素在集合中的索引位置,html為原先的html。

9 text([val | fn])

  設置或返回所有匹配元素的內容。

  text() 返回由所有匹配元素包含的文本內容組合起來的文本。

  參數:

  (1) val:要設置的值

  (2) function(index, value):此函數要返回一個設置的值。index為元素在集合中的索引位置,text為原先的text值。

10 val([val | fn | arr])

  設置或返回匹配元素的當前值。

  在jQuery1.2後,可以返回任意元素的值,包括select,如果多選,將返回一個數組,包含其選擇的值。

  參數:

  (1) val():獲取文本框中的值,如 $('input').val();

  (2) val:要設置的值,如 $('input').val('HELLO WORLD!');

  (3) function(index, value):此函數返回一個要設置的值。index為元素在集合中的索引位置,value為原先的值。

  (4) array:用於checkbox/select/radio 的值,如 $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);

 

二、CSS

1 css(name | pro | [, val | fn])

  訪問匹配元素的樣式屬性。

  參數:

  (1) name:要訪問的屬性名稱,如 $('p').css('color');

  (2) properties:要設置樣式的  '名 : 值' JSON對象,如: $("p").css({ color: "#ff0011", background: "blue" });

  (3) name, value:為屬性name設置值為value。

  (4) name, function(index, value):為屬性name設置值,函數返回要設置的值。如:

 $('#div1').css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });

2 offset([coordinates])

  返回匹配元素在當前視口的相對偏移。

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

  參數:

  (1) coordinates:一個對象(如:{ top: 10, left: 30 } ) ,必須包含top和left屬性,作為元素的新坐標。這個參數也可以是一個返回一對坐標的函數,函數的第一個參數是元素的索引,第二個參數是當前的坐標。

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

$("p:last").offset({ top: 10, left: 30 });
$("p:last").offset(function(index,coord){
    var top = coord.top;
    var left = coord.left + 50;
    return {"top":top,"left":left};
});

3 position()

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

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

4 height([val | fn])

  獲取匹配元素當前計算的高度值(px)。

  參數:

  (1) val:設定CSS中height值,可以是字元串或者數字。

  (2) function(index, height):返回一個用於設置高度的函數。

5 width([val | fn])

  獲取第一個匹配元素當前計算的寬度值(px)。

6 innerHeight()

  獲取第一個匹配元素內部區域高度(包括補白、不包括邊框)。

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

7 innerWidth

  獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)。

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

8 outerHeight([options])

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

  參數:

  (1) options:設置為true時,計算邊距在內。

9 outerWidth([options])

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

  參數:

  (1) options:設置為true時,計算邊距在內。


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

-Advertisement-
Play Games
更多相關文章
  • 1. 查看系統資料庫參數配置: select * from sys.configurations where name='xp_cmdshell' 修改系統資料庫參數: 2.通過命令方式,啟動xp_cmdshell: sp_configure 'show advanced options',1 re ...
  • (一)neo4j安裝 neo4j有社區版本和企業版,社區版本是免費的,企業版本是收費的。在linux上安裝如下步驟: 1、將下載的neo4j-enterprise-3.4.0-unix.tar.gz包上傳到linux伺服器,並解壓。 2、設置$NEO4J_HOME也就是解壓圖資料庫安裝包所在的目錄到 ...
  • Android模擬器Genymotion的安裝和使用 by:授客 QQ:1033553122 環境: Win7 Genymotion 2.12.0 下載地址:http://download.canadiancontent.netGenymotion.html VirtualBox 5.1.34 下載 ...
  • 前言- 上幾篇文章,我們一個一個的研究了Cubism官方提供的Android使用Live2D的簡單例子,但是依舊和大家平時見到的還是有很大差距的。在研究了代碼差不多一周以後,我決定還是用文字的形式記錄一下比較好。 下麵就是我們的主角:SampleApp1 下載及運行 編譯運行後的結果- 先來粗略看看 ...
  • 文章大綱 一、多渠道打包與數據統計介紹二、友盟實現多渠道打包實戰三、友盟數據統計實戰四、項目源碼下載五、參考文章 一、多渠道打包與數據統計介紹 多渠道打包,相信很多同學都知道。在Android Studio中只要經過配置,就能打出對應市場的渠道包。打過包的同學可能都會有這樣的感受:散熱器瘋狂地轉、打 ...
  • 前端項目打包部署,以前都是手工運行打包命令,打包結束後壓縮,然後上傳到伺服器上解壓部署。這種重覆性的工作,確實有點讓人煩,而且效率也不高。 本文基於 vue 的前端項目、 GitHub 的代碼倉庫,簡述在 CentOS7 上利用 jenkins 實現自動部署。 一、安裝插件 NodeJS Jenki ...
  • 1.CSS的水平居中, 1.1 父元素是塊狀元素,子元素為行內元素的居中,直接設置text-aglin: center ,常見的文本,span 標簽,button,img等行內元素都是可以使其水平居中的 1.2 父元素為塊狀元素,子元素也為塊狀元素 1.2.1 子元素寬度已知,則可以設置子元素 ma ...
  • “塊級元素”和“display為block的元素”不是一個概念,因為<li>元素預設的display值是list-item,<table>元素預設的display值是table,它們都是塊級元素。 正是由於“塊級元素”具有換行特性,因此理論上它們都可以配合clear屬性來清除浮動帶來的影響。例如: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...