jQuery参考实例 1.14 获取、设定、删除DOM元素的属性
2013-03-28 21:50
766 查看
原文:
http://www.lifelaf.com/blog/?p=237
本文翻译自jQuery Cookbook (O’Reilly 2009) 1.14 Getting, Setting, and Removing DOM Element Attributes
在上面的代码中,我们首先选择了HTML文档中仅有的一个<a>元素并设定其href属性,然后又通过向attr()方法传属性名来获取该属性的值。如果文档中包含多个<a>元素,那么attr()方法只会对第一个匹配到的<a>元素起作用。上述代码运行后,浏览器将在弹出框中显示我们设定的href值。
在HTML中大多数元素都会有多个属性,同样,用attr()方法也可以一次性设定多个属性值。比如,通过向attr()方法传入JSON对象,我们可以在设定href属性的同时设定title属性:
在提供添加属性的功能外,jQuery还提供了删除属性的操作。通过向removeAttr()方法传入属性名,可以从HTML元素中删除该属性(比如:jQuery(‘a’)removeAttr(‘title’))。
这些方法包括:
addClass()
添加class属性值
hasClass()
检查元素是否包含某个class属性
removeClass()
移除class属性值
toggleClass()
如果class属性值不存在,则添加该属性值;如果class属性值存在,则删除该属性值
http://www.lifelaf.com/blog/?p=237
本文翻译自jQuery Cookbook (O’Reilly 2009) 1.14 Getting, Setting, and Removing DOM Element Attributes
需求
在用jQuery函数选中DOM元素后,需要访问或设定该DOM元素的属性值。解决方案
jQuery提供了一个叫做attr()的方法来访问或设定属性值。下面的代码首先设定<a>元素的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()方法只会对第一个匹配到的<a>元素起作用。上述代码运行后,浏览器将在弹出框中显示我们设定的href值。
在HTML中大多数元素都会有多个属性,同样,用attr()方法也可以一次性设定多个属性值。比如,通过向attr()方法传入JSON对象,我们可以在设定href属性的同时设定title属性:
jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href')
在提供添加属性的功能外,jQuery还提供了删除属性的操作。通过向removeAttr()方法传入属性名,可以从HTML元素中删除该属性(比如:jQuery(‘a’)removeAttr(‘title’))。
讨论
除了attr()方法,jQuery还提供了一系列特殊的方法来处理HTML元素的class属性。class属性可能包含多个值(比如:class=”class1 class2 class3″),而这些特殊的方法可以很好的处理这一情况。这些方法包括:
addClass()
添加class属性值
hasClass()
检查元素是否包含某个class属性
removeClass()
移除class属性值
toggleClass()
如果class属性值不存在,则添加该属性值;如果class属性值存在,则删除该属性值
相关文章推荐
- jQuery元素属性操作实例(设置、获取及删除元素属性)
- jQuery 获取/设置/删除DOM元素的属性以a元素为例
- jQuery -> 获取/设置/删除DOM元素的属性
- jQuery -> 获取/设置/删除DOM元素的属性
- jQuery 获取/设置/删除DOM元素的属性以a元素为例
- input-color与input-checkbox元素通过jquery获取值以及设定值(input属性的取值与设定)
- jQuery参考实例 1.10 创建、编辑并插入DOM元素
- jQuery参考实例 1.10 创建、编辑并插入DOM元素
- javascript,jquery动态添加dom元素,并设定css属性,点击事件
- 38、实例 使用jQuery操作DOM之删除元素
- jQuery参考实例 1.11 移除DOM元素
- jQuery参考实例 1.12 替换DOM元素
- JQuery 获取Dom元素的实例讲解
- js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
- jQuery参考实例 1.2 在DOM加载完毕,页面元素完全加载之前运行jQuery/JavaScript代码
- jQuery参考实例 1.15 获取、设定HTML源码片段
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- jQuery参考实例 1.3 使用选择器和jQuery函数对DOM元素进行选择
- jquery 获取dom固定元素 添加样式的简单实例
- jQuery参考实例 1.13 复制DOM元素