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

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

DOM元素属性值如果设置为对象的更多相关文章

  1. (四)Jsoup 获取 DOM 元素属性值

    第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...

  2. Jsoup(四)-- Jsoup获取DOM元素属性值

    1.获取博客园的博客标题以及博客地址,获取友情链接 2.代码实现: public static void main(String[] args) throws Exception{ // 创建http ...

  3. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  4. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

  5. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  6. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  7. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  8. Selenium2学习-028-WebUI自动化实战实例-026-获取页面元素值或者元素属性值

    在自动化脚本编写过程中,经常需要获取页面元素的文本进行判断,以便对于不同的文本进行不同的处理.比如:很多的购物网站,加入购物车的按钮是有多个状态的(加入购物车.到货通知.暂不销售等),那么在实际的操作 ...

  9. vuejs2.0如何获取dom元素自定义属性值

    1.设置定义属性值  :data-value=".." <ul class="header-ul"> <li class="flex ...

随机推荐

  1. python之异常处理模块

    一 . python 内置的异常类 在程序运行过程中,如果出现错误,python解释器会创建一个异常对象,并抛出给系统运行时.即程序终止正常执行流程,转而执行异常处理流程. 在某种特殊条件下,代码中也 ...

  2. nyoj48-小明的调查作业

    48-小明的调查作业 内存限制:64MB时间限制:1000msSpecial Judge: No accepted:3submit:4 题目描述: 小明的老师布置了一份调查作业,小明想在学校中请一些同 ...

  3. maven的依赖冲突时的原则

    1.如图: 假设上图中的项目B引入了一个junit.jar架包是3.0的版本 项目D引入了一个junit.jar架包是4.0的版本,那么项目X引用的将会是4.0的版本 2.pom.xml排到最前面的架 ...

  4. Python半双工聊天

    半双工聊天 半双工聊天.创建一个简单的半双工聊天程序.指定半双工,我们的意思就是,当建立一个连接且服务开始后,只有一个人能打字,而另一个参与者在得到输入消息提示之前必须等待消息.并且,一旦发送者发送了 ...

  5. Swagger在 NETcore 中的使用

    请参考 https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/getting-started-with-swashbuckle?view=asp ...

  6. 【hdu 6406】Taotao Picks Apples

    [链接] 我是链接,点我呀:) [题意] 题意相当于问你改变一个位置之后. 从左往右扫描最大值.这个最大值会改变多少次. [题解] 假设我们改变的是i这个位置,下面说的a[i]都是改成q之后的a[i] ...

  7. wcf的Contract中name的使用

    name可以自定义,Contract中的name会更改soap消息中的名称,虽然不影响在服务端代码中的使用 可以看到,在后台代码中使用函数的重用进行编写代码是非常方便的

  8. BA-siemens-insight_ppcl_adapts函数用法

    adapts函数是比pid调节性更好的自适应调节算法,比pid有更好的稳定性,具有震荡小.调节过程快.平稳等特点,函数的用法如下:

  9. CF909A Generate Login

    CF909A Generate Login 题意翻译 给定两个用空格分隔的字符串,分别取两字符串的任意非空前缀,将两前缀合并为一个新的字符串,求可行字典序最小的字符串. 题目描述 The prefer ...

  10. string转utf8后解决TTS识别中文的问题

    今天遇到string字符编码的问题,由于遇到了用TTS将文本转语音的一个API,里面的中文必须是utf8的,我传了一个uncode编码的中文进去,就一直不能正常读出来.后来才发现是编码的问题.这里在网 ...