DOM元素屬性值如果設置為對象

来源:http://www.cnblogs.com/bsblogs/archive/2017/11/09/7811987.html
-Advertisement-
Play Games

結論:內部會調用toString方法,將設置的對象轉換為字元串添加給相應的屬性; 這個問題呢,是通過jQuery的each方法中,回調函數的this指向問題而來; 我們知道,回調函數中的this如果指向的是基本數據類型,那麼系統會自動將這個基本數據類型的值包裝為對應的對象類型; 就比如: 數組裡面存 ...


結論:內部會調用toString方法,將設置的對象轉換為字元串添加給相應的屬性;

這個問題呢,是通過jQuery的each方法中,回調函數的this指向問題而來;

我們知道,回調函數中的this如果指向的是基本數據類型,那麼系統會自動將這個基本數據類型的值包裝為對應的對象類型;

就比如:

數組裡面存的是string類型的值,然後jq實例調用each方法,列印的this如下圖所示:

this指向的基本數據類型的值被轉換為了String類型;

 

但是這裡說的不是這個問題,而是和這個問題類似,我們在給DOM元素設置屬性值的時候,如果設置的是對象呢?

獲取頁面中的span,然後給兩個span分別設置屬性‘a’,屬性值為兩個對象:

 

看看設置後顯示的結果:

第一個屬性值:內部調用toString方法將{a : 'a',b : 'b'}對象轉換為字元串設置;

第二個屬性值:同理,也是調用toString方法將String對象的實例轉換為字元串設置;

那麼,我們在回到jQuery中,

如果用each方法給DOM添加屬性值;

jQuery中的each方法的回調函數中的this,如果指向的是字元串類型的數據,那麼在回調函數中操作this給元素添加屬性值,是沒有問題的,因為this即使被轉換為了相應的對象類型數據,那麼再給DOM元素添加的時候,內部會調用toString方法在對象類型的數據轉換為字元串添加,就相當於‘又折騰回來了’;

那麼,如果this指向的不是字元串類型數據,那麼就操作參數吧~

好了,那就到這兒吧,如果有不對的地方,歡迎大家指正,望在前端的道路上共勉!


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

-Advertisement-
Play Games
更多相關文章
  • Python 數字數據類型用於存儲數值。 數據類型是不允許改變的,這就意味著如果改變數字數據類型得值,將重新分配記憶體空間。 以下實例在變數賦值時 Number 對象將被創建: 您也可以使用del語句刪除一些數字對象的引用。 del語句的語法是: 您可以通過使用del語句刪除單個或多個對象的引用,例如 ...
  • 生成一個簽章(用java.awt畫一個簽章) 並添加到pdf 公章處package com.bjpowernode.p2p.admin.util;import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;import ...
  • 1.類和對象 概念:對象是實例,類是一組具有相同行為和屬性的對象的集合; 區別:類是對象的抽象,對象是類的實例化 2.如何聲明一個類: 語法: 修飾符 class 類名{ //類的屬性(數據類型 變數名;) //類的方法(修飾符 返回類型 方法名(參數列表){}) } 舉例: public clas ...
  • 1.抽象類; 定義;包含一個抽象方法的類稱稱為抽象類,抽象類在class前使用adstract關鍵詞修飾。 抽象方法;只聲明未實現的方法稱為抽象方法,使用adstract關鍵字聲明該方法。 抽象類定義語法: adstract class 抽象類類名{ 屬性: 普通方法: 訪問修飾符 adstract ...
  • 從一個任務開始講 某天,公司領導找到開發人員,說要開發一個微信支付寶的收款明細獲取功能,我們把這個任務作為一個案例進行說明。 第一步:設計 案例精簡:把任務指派給開發人員完成。本句話中,有兩個名詞:“任務”和“開發人員”,所以我們考慮設計兩個對象(任務和開發人員)。 開發人員對象: 任務對象: 場景 ...
  • 定義:設計模式是一套被反覆使用、多數人知曉的、經過分類的、代碼設計經驗的總結。 目的:為了代碼可重用性、讓代碼更容易被他人理解、保證代碼可靠性,設計模式使代碼編寫真正工程化。 使用:每一種設計模式都是在特定場景下總結出來的,選用時需要根據特定的場景選擇,不能為了模式而模式。 定義:設計模式是一套被反 ...
  • 背景 作為中國最大的線上教育站點,目前滬江日誌服務的用戶包含網校,交易,金融,CCTalk 等多個部門的多個產品的日誌搜索分析業務,每日產生的各類日誌有好十幾種,每天處理約10億條(1TB)日誌,熱數據保留最近7天數據,冷數據永久保存。 為什麼做日誌系統 首先,什麼是日誌? 日誌就是程式產生的,遵循 ...
  • arguments 對象 在函數代碼中,使用特殊對象 arguments,開發者無需明確指出參數名,就能訪問它們。 例如,在函數 sayHi() 中,第一個參數是 message。用 arguments[0] 也可以訪問這個值,即第一個參數的值(第一個參數位於位置 0,第二個參數位於位置 1,依此類 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...