《jQuery Cookbook中文版》——1.14 获取、设置和删除DOM元素属性

简介: 除了attr()方法之外,jQuery为使用HTML元素class属性提供了一组很特殊的方法。因为class属性可能包含多个值(例如,class="class1 class2 class3"),所以可以使用这些独特的属性方法管理这些类值。

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.14节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.14 获取、设置和删除DOM元素属性

1.14.1 问题
你已经用jQuery函数选择了一个DOM元素,需要获取或者设置该元素的属性值。

1.14.2 解决方案
jQuery提供attr()方法以获取和设置属性值。在下面的代码中,将设置元素的href属性值,然后获取该值:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a>jquery.com</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/JavaScript">
//提示jQuery主页URL
alert(
   jQuery('a').attr('href','http://www.jquery.com').attr('href')
);
</script>
</body>
</html>

在上述代码示例中你可以看到,选择HTML元素中仅有的< a>元素,设置它的href属性,然后用单一的属性名作为参数调用相同的attr()方法获取属性值。如果文档中有多个< a>元素, attr()方法将访问第一个匹配的元素。当代码加载到浏览器时,将用alert()方法显示设置的href属性值。

现在,因为大部分元素都有多个属性,所以也可以用单个attr()方法设置多个属性。例如,可以用一个对象代替两个字符串参数作为attr()方法的参数,设置前一个例子中的title属性:

jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href')
和添加属性功能相伴的是删除属性及其值的功能。removeAttr()方法可以用来从HTML元素中删除属性。要使用这个方法,只要传递代表要删除的属性值的字符串即可(例如,jQuery('a').removeAttr('title'))。

1.14.3 讨论
除了attr()方法之外,jQuery为使用HTML元素class属性提供了一组很特殊的方法。因为class属性可能包含多个值(例如,class="class1 class2 class3"),所以可以使用这些独特的属性方法管理这些类值。

下面列出的就是这些jQuery方法:

addClass()

用新的类/值更新class属性值,包括任何已经设置的类。

hasClass()

检查特定类的class属性值。

removeClass()

从class属性中删除特定的类,同时保持已经设置的任何值。

toggleClass()

如果特定类不存在则添加,如果存在则删除该类。

相关文章
|
5月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
57 10
|
4月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
4月前
|
JavaScript 前端开发
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
142 4
|
5月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
527 1
|
4月前
|
JavaScript 前端开发 API
|
5月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
50 0
|
5月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
5月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。