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指向的不是字符串类型数据,那么就操作参数吧~
好了,那就到这儿吧,如果有不对的地方,欢迎大家指正,望在前端的道路上共勉!
DOM元素属性值如果设置为对象的更多相关文章
- (四)Jsoup 获取 DOM 元素属性值
第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...
- Jsoup(四)-- Jsoup获取DOM元素属性值
1.获取博客园的博客标题以及博客地址,获取友情链接 2.代码实现: public static void main(String[] args) throws Exception{ // 创建http ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- JavaScript DOM 元素属性 状态属性
JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
- Selenium2学习-028-WebUI自动化实战实例-026-获取页面元素值或者元素属性值
在自动化脚本编写过程中,经常需要获取页面元素的文本进行判断,以便对于不同的文本进行不同的处理.比如:很多的购物网站,加入购物车的按钮是有多个状态的(加入购物车.到货通知.暂不销售等),那么在实际的操作 ...
- vuejs2.0如何获取dom元素自定义属性值
1.设置定义属性值 :data-value=".." <ul class="header-ul"> <li class="flex ...
随机推荐
- IAR for MSP430 关于添加自定义头文件的两种方法【转】
前言:第一次接触这个软件,编译一个例程一直出现没有包含头文件的错误,在网上找了好几个方法都没什么效果,看到了篇文章,利用里面的方法1解决了,特此复制下来保存学习用. 原文链接:https://blog ...
- spring data JPA使用quartz定时器的具体实现
第一步.在pom.xml中的配置 <!--quartz--> <dependency> <groupId>org.quartz-scheduler</grou ...
- HDU5514 Frogs
/* HDU5514 Frogs http://acm.hdu.edu.cn/showproblem.php?pid=5514 容斥原理 * * */ #include <cstdio> ...
- CF369E. ZS and The Birthday Paradox
/* cf369E. ZS and The Birthday Paradox http://codeforces.com/contest/711/problem/E 抽屉原理+快速幂+逆元+勒让德定理 ...
- BA-siemens-insight时间表设置
时间表问题汇总: 如果遇到这种问题,显示"unable to locate databse object",就使用database transfer上传一边所有的模块信息,然后在操 ...
- 字节与字符_字节流与字符流_ASCII与Unicode_GB2312_GBK_GB18030_BIG-5
字节(Byte):通常将可表示经常使用英文字符8位二进制称为一字节. 一个英文字母(不分大写和小写)占一个字节的空间,一个中文汉字占两个字节的空间. 符号:英文标点2占一个字节,中文标点占两个字节. ...
- centos7.0 安装日志--图文具体解释-python开发环境配置
centos7.0公布之后,就下载了everthing的DVD镜像.今天有时间,所以决定在vbox底下体验一番--- 上图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...
- iOS库--.a与.framework
一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的差别? 静态库:链接时完整地拷贝至可运行文件里.被多次使用就有多份冗余拷贝. 动态库:链接时不复制.程序执行时由系 ...
- Shell简单介绍
Shell是一种具备特殊功能的程序.它是介于使用者和linux 操作系统之核心程序(kernel)间的一个接口.为什么我们说 shell 是一种介于系统核心程序与使用者间的中介者呢?读过操作系统概论的 ...
- Gzip压缩优化网站
网站常使用GZIP压缩算法对网页内容进行压缩,然后传给浏览器,以减小数据传输量,提高响应速度.浏览器接收到GZIP压缩数据后会自动解压并正确显示.GZIP加速常用于解决网速慢的瓶颈. 压缩Filter ...