DOM元素属性值如果设置为对象

结论:内部会调用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指向的不是字符串类型数据,那么就操作参数吧~

好了,那就到这儿吧,如果有不对的地方,欢迎大家指正,望在前端的道路上共勉!

转载于:https://www.cnblogs.com/bsblogs/p/7811987.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

纯CSS3美化单选按钮radio

这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1、可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2、只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片…

【洛谷】【二分答案+最短路】P1462 通往奥格瑞玛的道路

在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量有一天他醒来后发现自己居然到了联盟的主城暴风城在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目背景【题目描述:】 在艾泽拉斯,有n个城市。编号为1…

训练残骸模式– Java 8中的改进实现

Venkat Subramaniam在今天的演讲中提到了有关“级联方法”模式或“火车残骸”模式的内容,如下所示: >someObject.method1().method2().method3().finalResult()很少有人会将此与构建器模式相关联,但事实并非如此。 无论如何,让…

px、em、pt之间的区别与互相转换

关于px、pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之。点击查看原文(原网址已失效,这是其他站点) …

3.Apache ZooKeeper数据模型

1. ZooKeeper自下向上的服务视图 Apache ZooKeeper是分布式应用程序的协调服务。 它旨在解决分布式应用程序中与组件协调相关的棘手问题。 它通过暴露一个简单而强大的接口来实现这一点。 应用程序可以设计在通过ZooKeeper API实现的这些接口上,以解决分布式同步&am…

STS插件_ springsource-tool-suite插件各个历史版本

目前spring官网(http://spring.io/tools/sts/all)上可下载的spring插件只有:springsource-tool-suite-3.8.4(sts-3.8.4)。但这只针对指定的eclipse版本适用。 原贴更精彩:http://blog.csdn.net/u010203767/article/details/69211072 sts-3.8.3的下载地址…

idea运行项目时报Error:java无效的源发行版:1.8

如果你安装的是JDK1.7,而在file->project structure中设置的是language level是8的话,就会出现这个错误提示:无效的源发行版:8。 解决办法:将语言级别改为7,或6。即语言级别不能高于你安装的版本。 另外…

JUnit:在参数化测试中命名单个测试用例

几年前,我写了有关JUnit参数化测试的文章 。 我不喜欢它们的一件事是JUnit使用数字命名了单个测试用例,因此,如果它们失败,您将不知道是哪个测试参数导致了失败。 以下Eclipse屏幕快照将向您展示我的意思: 但是&#…

如何在 React Native 中写一个自定义模块

前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是…

gulp webpack整合

为什么需要前端工程化? 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生。好奇心日报在进行前端工程化的过程中,主要的挑战在于解决如下问题:✦ 如何管理多个项目的前端代码&…

SpringBoot 入门第一章

一、前言 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。 本系列以快速入门为主,可当作工具小手册阅…

【转】 VC++6.0 在Win7 64位下调试,Shift+F5无法退出

Win7 64位VC6.0调试代码无法关闭窗口解决方法  VC6.0 在64位Windows7下调试的时候,再结束调试,程序无法退出,只能关闭VC6.0 IDE环境。  问题描述:当我击F5开始一个项目的调试时,程序在我设置的断点处停止&#xff…

使用Infinispan创建自己的Drools和jBPM持久性

我 在这里发表的原始文章: 您好,欢迎来到我打算向您展示如何创建自己的Drools和jBPM持久性实现的帖子。 我已经为流口水对象开发了基于infinispan的持久性方案,并且在此过程中学到了很多东西。 如果您想做某种事情,我打算给您一些…

Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

<input> 无限制输入 type 限制输入 type 如下类型 type 后还可以跟一些属性: 如<input typetext maxlength 10> 限制文本的长度为10字节 list 可以用的时候再来查, list就是当一个建议值不够的时候添加到几个. <form> <input typ…

c语言 输出音频 单片机,单片机播放WAV格式音频的理解

CSDN账号注册了3年&#xff0c;一直没有上来过&#xff0c;更不用说写博客了。我不知道博客的具体用途&#xff0c;我只想把它当做一种心得来发表&#xff0c;可能是一些技术上的理解或者生活上的小故事。好了&#xff0c;下面我将记录我对WAV播放器的理解。很久以前就看到过某…

UVALive3989 Ladies' Choice —— 稳定婚姻问题 Gale - Shapely算法

题目链接&#xff1a;https://vjudge.net/problem/UVALive-3989 题解&#xff1a; 题意&#xff1a;有n个男生和n个女生。每个女生对男神都有个好感度排行&#xff0c;同时每个男生对每个女生也有一个好感度排行。问&#xff1a;怎样配对&#xff0c;才能使的每个女生尽可能幸福…

通过命令行界面使用AWS ElasticMapReduce

在本文中&#xff0c;我将通过针对EMR的CLI使用AWS MapReduce服务&#xff08;称为ElasticMapReduce &#xff09;。 使用EMR的过程可以大致分为三个步骤&#xff1a; 设置并填充S3存储桶 创建并运行EMR作业 从S3存储桶中获取结果 在开始这三个高级步骤之前&#xff0c;还…

[UE4]关卡蓝图

转载于:https://www.cnblogs.com/timy/p/9053876.html

iframe的缺点

一、iframe会阻塞主页面的onload事件&#xff1b; 二、搜索引擎检索程序无法解读这种页面&#xff0c;不利于SEO&#xff1b; 三、会影响页面的并行加载。 并行加载&#xff1a;同一时间对同一域名下的加载数量是有限制的&#xff1a; 解决方法&#xff1a; 使用js动态给ifr…

使用可视化工具redisclient连接redis

可视化工具推荐&#xff1a;http://database.51cto.com/art/201505/477692.htm 1.连接redis服务端 1.1 设置连接密码&#xff1a;在redis根目录下&#xff0c;双击redis-cli.exe&#xff0c; 输入命令&#xff1a;redis-cli.exe -h 127.0.0.1 -p 6379 -n 1 1就是密码 1.2 使…