jQuery attr()方法深度解析：赋值与取值

版权申诉

138 浏览量更新于2024-09-11 收藏 59KB PDF 举报

"jQuery的attr()方法是用于处理HTML元素属性的重要工具，它可以用来获取或设置元素的属性值。此方法有四种不同的用法，适用于多种DOM操作场景。" 在jQuery中，attr()方法是一个非常实用的功能，它允许开发者方便地处理HTML元素的属性。这个方法的名称来源于"attribute"（属性），在JavaScript和jQuery的DOM操作中扮演着核心角色。attr()方法有以下四种主要表达式： 1. `attr(属性名)` - 这种用法用于获取属性的值。当你传入一个属性名给attr()方法时，它将返回匹配的第一个元素的该属性值。如果元素没有对应的属性，attr()将返回`undefined`。 2. `attr(属性名, 属性值)` - 这个表达式用于设置属性的值。当你同时提供属性名和值，attr()会更新所有匹配元素的该属性，设置它们的新值。 3. `attr(属性名, 函数值)` - 这种情况下，attr()接收一个函数作为第二个参数，而不是直接的属性值。这个函数会被调用，其返回值将作为每个匹配元素的属性值。这样可以实现动态计算属性值的效果。 4. `attr(properties)` - 这是设置多个属性值的一种高效方法。你可以传递一个对象，其中键是属性名，值是对应的属性值。这样可以在所有匹配的元素上一次性设置多个属性，例如`{属性名一: "属性值一", 属性名二: "属性值二"}`。以下是一个简单的示例，展示了如何使用attr()方法： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery attr()方法示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> p { color: red; } li { color: blue; } .lili { font-weight: bold; color: red; } #lili { font-weight: bold; color: red; } </style> </head> <body> <p title="你最喜欢的水果是。">你最喜欢的水果是？</p> <ul id="fruitList"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> <script> $(document).ready(function() { // 获取p元素的title属性 var title = $('p').attr('title'); console.log('Title:', title); // 设置所有li元素的class属性 $('li').attr('class', 'lili'); // 使用函数动态设置属性值 $('#fruitList').children().each(function(index) { $(this).attr('data-index', index); }); // 批量设置多个属性 $('p').attr({ 'data-test': '测试数据', 'title': '新的标题' }); }); </script> </body> </html> ``` 在这个示例中，我们首先获取了`<p>`元素的`title`属性，并将其打印到控制台。然后，我们设置了所有`<li>`元素的`class`属性为`lili`。接着，我们使用一个函数为`fruitList`下的每个子元素设置`data-index`属性，使其值为元素的索引。最后，我们通过一个对象批量设置了`<p>`元素的`data-test`和`title`属性。 attr()方法是jQuery中非常基础且强大的功能，它使得操作HTML元素的属性变得简单且灵活。无论是获取属性值，还是设置属性值，甚至是动态计算属性值，attr()都能胜任。在实际开发中，它广泛应用于表单验证、动态数据绑定、交互效果等多种场景。

Jquery attr()方法方法属性赋值和属性获取详解属性赋值和属性获取详解

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4

个表达式。

1. attr( 属性名 ) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个

属性的值。如果元素没有相应属性，则返回 undefined ）

2. attr( 属性名, 属性值 ) //设置属性的值（为所有匹配的元素设置一个属性值。）

3. attr( 属性名 , 函数值 ) //设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函

数，由这个函数计算的值作为属性值。）

4. attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在

所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性

名。或者你可以直接使用’class’或者’id’。)

示例代码：示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery中attr()方法</title>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>

<ul>

</ul>

...

</script>

</body>

<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值：

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38532139

粉丝: 5
资源: 910

jQuery attr()方法深度解析：赋值与取值

jQuery使用attr()方法同时设置多个属性值用法实例

JS中Attr的用法详解

JS中attr和prop属性的区别以及优先选择示例介绍

jQuery使用元素属性attr赋值详解

jquery 动态遍历select 赋值的实例

jQuery对html元素的取值与赋值实例详解

JQuery常用控件赋值

jquery特效详解

Javascript 及Jquery详解

jquery 使用方法

最新资源