![](https://img-blog.csdnimg.cn/1a917b670fa9475ebc4f3604f183e0de.png)
![](https://img-blog.csdnimg.cn/b604080ff79b42fda90cd95101f1031e.png)
hello大家好呀!此篇文章带领大家熟练掌握 jQuery 的属性方面的操作,包括固有属性的获取与设置,自定义属性的获取与设置等等,走进 jQuery 的更深层次阶段
![](https://img-blog.csdnimg.cn/44f2fe7732a14e35b1d73fdfc67166c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
文章目录:
一:固有属性的设置与获取 prop
1.1 固有属性的获取
1.2 固有属性的设置
二:自定义属性的设置与获取 attr
2.1 自定义属性的设置
2.2 自定义属性的获取
三:数据缓存 data
3.1 数据缓存的形式设置属性 和 获取性值
3.2 数据缓存获取 H5 标准的自定义书属性
一:固有属性的设置与获取 prop
什么是固有属性?固有属性即标签本身具有的属性,例如 a 标签的 href 属性,input 标签的 type 属性,这些就叫做元素的固有属性,此版块我们要学会获取与设置其固有属性。
1.1 固有属性的获取
element.prop('属性名')
<body>
<input type="text">
<script>
console.log($('input').prop('type'));
</script>
</body>
![](https://img-blog.csdnimg.cn/12d8c46e72464bf482ca379f2c79d76e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
1.2 固有属性的设置
element.prop('属性名','属性值')
<body>
<input type="text">
<script>
$('input').prop('type','password');
</script>
</body>
input 标签的固有属性 type 的值设置为了 password
![](https://img-blog.csdnimg.cn/a84ebe9840594f40ad7e5bb636dbd80c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_19,color_FFFFFF,t_70,g_se,x_16)
二:自定义属性的设置与获取 attr
在原生 JS 版块我们使用过自定义属性,在点击导航切换页面时我们给排列的五个 div 依次设置了自定义属性 index,我们使用的是 setAttribute 设置定义属性,和 getAttribute 获取设置好的自定义属性值,在 jQuery 领域,我们也有同样效果的获取和设置自定义属性的方法。
2.1 自定义属性的设置
element.attr('属性名','属性值')
<body>
<div></div>
<script>
$('div').attr('index','100')
</script>
</body>
设置了自定义属性 index 值为100,如果元素本身就有自定义属性,那么更改自定义属性值也用此方法,将第二个参数改为想要设置的值即可
![](https://img-blog.csdnimg.cn/a38757c0c7504c60a2933d00c18f6710.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
2.2 自定义属性的获取
element.attr('属性名')
<body>
<div index="1"></div>
<script>
console.log($('div').attr('index'));
</script>
</body>
![](https://img-blog.csdnimg.cn/bdab16fe878f4f5582c84b65acc5c22a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
三:数据缓存 data
还有一个获取设置属性值的办法为数据缓存 data,这个里面的数据即属性值,不会显示在控制台的元素标签里(不会改变 DOM 结构),而是存放在元素的内存中,但是当页面刷新,元素内存中的数据将被删除
3.1 数据缓存的形式设置属性 和 获取性值
设置属性:element.data('属性名','属性值')
获取属性值:element.data('属性名')
<body>
<div></div>
<script>
$('div').data('index','1');
</script>
</body>
可以发现我们虽然添加了自定义的属性 index,但是结构中并没有显示,这就是因为数据存放在了元素内存中,没有改变 DOM 结构
![](https://img-blog.csdnimg.cn/e20fd2d16a7e4e728111cfa56b82f113.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
但是如果我们获取是可以得到这个属性值的
<body>
<div></div>
<script>
$('div').data('index','1');
console.log($('div').data('index'));
</script>
</body>
![](https://img-blog.csdnimg.cn/18507bc15b024900beb446979bf14646.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16)
3.2 数据缓存获取 H5 标准的自定义书属性
我们知道 H5 标准下的自定义属性前面有个 ‘ data- ’,在这里使用data获取H5标准的自定义属性时不需要加 data-,并且得到的是一个 数字型 的值
<body>
<div data-index="123456"></div>
<script>
console.log($('div').data('index'));
</script>
</body>
![](https://img-blog.csdnimg.cn/621dd8bb3dec4a049cf0ba573c615a07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_18,color_FFFFFF,t_70,g_se,x_16)
【注意!!不需要加 data- 前缀,并且此处获取的值为数字型】
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)