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

    xiaoxiao2024-03-22  122

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

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

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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)