2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性

jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性

时间:2020-07-17 23:38:18

相关推荐

jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性

推荐阅读

Helm3(K8S 资源对象管理工具)视频教程:/course/detail/32506
Helm3(K8S 资源对象管理工具)博客专栏:/xzk9381/category_10895812.html

本文原文链接:/xzk9381/article/details/111869886,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。

一、设置、获取和修改属性及属性值

1. 设置单个属性和属性值

使用 $(‘DOM’).attr() 可以设置元素的属性和属性值:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');})</script></head><body><div id="mydiv"></div></body></html>

2. 获取已存在的属性

使用 $(‘DOM’).attr() 也可以判断是否存在该属性,如果存在则返回属性值,如果不存在则返回 undefined:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');console.log($('#mydiv').attr('name'));console.log($('#mydiv').attr('age'));})</script></head><body><div id="mydiv"></div></body></html>

3. 重新设置属性值

对于已存在的属性,还可以使用 $(‘DOM’).attr() 重新设置属性值:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');console.log($('#mydiv').attr('name'));$('#mydiv').attr('name','aaron');console.log($('#mydiv').attr('name'));})</script></head><body><div id="mydiv"></div></body></html>

4. 同时设置多个属性值

$(‘DOM’).attr() 也可以同时设置多个属性值,方法是将所有的属性值以 JSON 对象的方式传递进去:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr({'name':'xuzk','age':18,'sex':'male'});})</script></head><body><div id="mydiv"></div></body></html>

5. 使用函数返回值作为属性值

$(‘DOM’).attr() 还支持使用函数的返回值作为属性值:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('age',function (){return 18;});})</script></head><body><div id="mydiv"></div></body></html>

二、删除属性和属性值

使用 $(‘DOM’).removeAttr() 可以删除指定的属性:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('age','18');console.log($('#mydiv').attr('age'));// 输出属性值$('#mydiv').removeAttr('age');console.log($('#mydiv').attr('age'));// 输出 undefined})</script></head><body><div id="mydiv"></div></body></html>

需要注意的是,一次只能删除一个属性,但是可以使用链式操作的办法删除多个属性:

<!DOCTYPE html><html><head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr({'name':'xuzk','age':'18'});$('#mydiv').removeAttr('age').removeAttr('name');})</script></head><body><div id="mydiv"></div></body></html>

本文原文链接:/xzk9381/article/details/111869886,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。