结论:内部会调用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. vue中使用base64进行加解密

    vue进行Base64加解密 背景 项目中需要对特殊字符进行处理,避免json和数据库的特殊字符(""等)冲突,刚好学了信息安全,干脆整个加解密,wkk.. 使用步骤 打开dos, ...

  2. C语言基础 (10) 变量作用域,生命周期 内存结构

    01 课程回顾 1.指针数组 注意: 对于数组来说,在使用sizeof的时候a和&a[0]是不一样的, 虽然以%x打印出来他们都是地址 2.值传递 int a; fun(a); int *** ...

  3. Project Euler 16 Power digit sum( 大数乘法 )

    题意: 215 = 32768,而32768的各位数字之和是 3 + 2 + 7 + 6 + 8 = 26. 21000的各位数字之和是多少? 思路:大数乘法,计算 210 × 100 可加速计算,每 ...

  4. UVA1585 - Score(紫书习题3.1)

    如何计算你们的得分呢?,如"OOXXOXXOOO". "O"表示问题的正确答案,"X"表示错误的答案.那么它得分是由它自己和它刚刚以前连续的 ...

  5. [Libre 6282] 数列分块入门 6 (分块)

    原题:传送门 code: //By Menteur_Hxy #include<cstdio> #include<iostream> #include<algorithm& ...

  6. JavaScript的闭包理解

    因为本人是做java web 开发的,对js仅仅是存在非常浅的理解,js闭包的概念非常早就听说了,可是一直都不明确是什么意思,今天准备梳理一下闭关的概念; 闭包(closure)是Javascript ...

  7. 源码高速定位工具-qwandry

    https://github.com/adamsanderson/qwandry qwandry 能高速定位到我们须要找到 库文件, 项目 的工具. Ruby中实现高速定位的方法有好多种.我知道的有三 ...

  8. Android持久化保存cookie

    在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录,然后把cookie保存下来,以供下一次访问使用,这时就需要持久化cookie中的内容. 在之前先科普一下基础知识: 什么 ...

  9. asp.net website 单独编译某个页面,连带编译app_code

    选中某一个页面,然后右键build page

  10. python matplot 绘图

    import numpy as np import matplotlib.pyplot as plt plt.figure(1) # 创建图表1 plt.figure(2) # 创建图表2 ax1 = ...