《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()

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

相关文章
|
11月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
172 0
|
12月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
11月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
284 4
|
12月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
12月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
159 0
前端基础(十)_Dom自定义属性(带案例)
|
12月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
112 2
|
12月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
73 1
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
87 5
|
11月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
109 0
|
11月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。