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

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

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

1.14.2 解决方案
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()方法将访问第一个匹配的元素。当代码加载到浏览器时,将用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()

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

时间: 2024-08-03 02:36:53

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

《jQuery Cookbook中文版》——导读

前言 jQuery程序库给前端开发带来了一场风暴.它极其简单的语法使曾经很复杂的任务变得轻松愉快.许多开发人员很快就为它的优雅和清晰而着迷.如果你已经开始使用这个程序库,你就已经将丰富而具有交互性的体验加入到你的项目中. jQuery的入门非常容易,但是和许多用于开发网站的工具一样,完全体会到它的广度和深度需要花费几个月甚至几年的时间.这个程序库充满了你从未想象过的特性.一旦你了解了这些特性,这些特性就能够戏剧性地改变你解决问题的方法. 本书旨在向亲爱的读者展示业界领先的前端开发人员在日常项目中

《jQuery Cookbook中文版》——1.11 删除DOM元素

1.11 删除DOM元素 1.11.1 问题 你想从DOM中删除元素. 1.11.2 解决方案 remove()方法可以用于从DOM中删除选中的元素集及其子元素.请看如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <h

《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集

1.9 根据当前上下文遍历DOM获得新的DOM元素集 1.9.1 问题你已经选择了一组DOM元素,根据选择集在DOM结构树中的位置,你打算遍历DOM获得一个新的元素集以供操作. 1.9.2 解决方案jQuery提供一组方法,可以根据当前选择的DOM元素的上下文遍历DOM. 例如,查看如下的HTML片段: <div> <ul> <li><a href="#">link</a></li> <li><a

快速获取/设置iframe内对象元素的几种js实现方法_javascript技巧

1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过IFRAME名称形象定位): document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用.IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的.比如这个,它在同样支持下

jQuery添加删除DOM元素方法详解_jquery

本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM

控件-.cs文件后台设置前台.aspx的元素属性

问题描述 .cs文件后台设置前台.aspx的元素属性 我现在后台那想通过判断登录用户的id来决定显示哪些控件,显示的将display设置为block.但是在后台怎么获取前台的元素,用后台是C#语言 解决方案 客户端还是服务器端控件?客户端增加一个runat="server"变为服务器端控件就可以使用xxx.Visible=true/false来设置显示隐藏.

《jQuery Cookbook中文版》——第1章 jQuery基础1.0 导言

第1章 jQuery基础 1.0 导言 既然你已经选择了一本有关jQuery的"食谱",本书作者基本就可以假定你对jQuery的定义和功能有了大致的认识.坦白说,"食谱"通常是为寻求加强已有知识基础的读者所编写的.因此,本书使用了问题-解决方案-讨论的编排方式,快速地介绍常见问题的解决方案.但是,如果你是一位jQuery新手,不要把本书抛诸脑后,认为第1章是老生常谈,这一章就是专为新手所写的. 如果你需要复习,或者只有很少或者完全没有jQuery的知识,第1章将帮助

《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素

1.10 创建.操作和插入DOM元素 1.10.1 问题 你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中. 1.10.2 解决方案 你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行.如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素.例如,下列语句将创建一个包装在< p>元素中的< a>元素,在< p>和< a>元素中还封装了一个文本节点: jQuery(

《jQuery Cookbook中文版》——1.13 克隆DOM元素

1.13 克隆DOM元素 1.13.1 问题 你需要克隆/复制DOM的一部分. 1.13.2 解决方案 jQuery提供clone()方法复制DOM元素.它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了.结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素.在下面的代码中,将克隆一个< ul>元素,然后用插入方法appendTo()将这个副本附加到DOM中.实际上,在页面上插入了与现有的< ul>完全相同的一个