jQuery attr() 方法详解：属性获取、设置与删除

jQuery attr() 方法概述

在jQuery中，attr()方法用于获取和设置元素的属性。attr是attribute（属性）的缩写，在jQuery的DOM操作中非常常见，该方法提供了4种不同的表达式形式。

attr() 方法的四种表达式

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></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>

<li title="苹果汁">苹果</li>

<li title="橘子汁" alt="123">橘子</li>

<li title="菠萝汁">菠萝</li>

</ul>

<script>

...

</script>

</body>

<html>

attr() 方法使用示例

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

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

<script>

alert($("ul li:eq(1)").attr("title"));

</script>

结果：显示 橘子汁

1.2 使用 attr(name) 获取 alt 值：

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

结果：

显示123

2. attr(name,value)：设置属性的值

2.1 使用 attr(name,value) 修改 title 值为：不吃橘子

<script>

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>

结果：

显示不吃橘子

3. attr(name,fn)：设置属性的函数值

3.1 把 alt 属性的值设置为 title 属性的值。

<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>

结果：

显示123

4. attr(properties)：将一个“名/值”形式的对象设置为所有匹配元素的属性

4.1 获取 <ul> 里第2个 <li> 设置 title 和 alt 属性。

<script>

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

结果：

显示2个，不喝橘子汁 不是123

4.2 获取 <ul> 里第2个 <li> 设置 class。

<script>

$("ul li:eq(1)").attr({className:"lili"});

</script>

结果：

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

4.3 获取 <ul> 里第2个 <li> 设置 id。

<script>

$("ul li:eq(1)").attr({id:"lili"});

</script>

结果：

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁">橘子</li>

<li title="菠萝汁">菠萝</li>

4.4 获取 <ul> 里第2个 <li> 设置 style。

<script>

$("ul li:eq(1)").attr({style:"color:red"});

</script>

结果：

<li title="苹果汁">苹果</li>

<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>

<li title="菠萝汁">菠萝</li>

alt 属性注意事项与区别

在 li 中添加 alt 属性是错误的，因为它只能用在 img、area 和 input 元素中（包括 applet 元素）。对于 input 元素，alt 属性意在用来替换提交按钮的图片。在这里为了详细说明 attr() 方法，没有合适的属性，所以用了 alt 进行举例，仅供学习参考 attr() 方法用法。

在此说明下 alt 和 title 的区别。

alt：这是用以描述图形的文字，当图片无法显示时，这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。

title：是鼠标放上去之后，会显示出来的文字。

删除属性与相关方法

那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

就这么简单， attr 其实就是原生js中 getAttribute 的简化实现, 而 removeAttr 就是 removeAttribute 的简写了。

那么是否有跟 attr() 相似的属性呢？

jquery中 val() 与之类似，

$(this).val(); 获取某个元素节点的 value 值，相当于 $(this).attr("value");

$(this).val(value); 设置某个元素节点的 value 值，相当于 $(this).attr("value",value);

以上这篇Jquery attr()方法 属性赋值和属性获取详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。