`

jQuery attr — 匹配元素属性

 
阅读更多

attr(name) — 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
参数 : name — 属性名称(String)
示例 :
返回文档中第一个图像的src属性值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("src");
结果:
test.jpg

attr(properties) — 将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
参数 : properties — 作为属性的“名/值对”对象(Map)
示例 :
为所有图像设置src和alt属性。
HTML 代码:
<img/>
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[ <img src= "test.jpg" alt:="Test Image" /> ]

attr(key, value) — 为所有匹配的元素设置一个属性值。
参数 :
key — 属性名称(String)
value — 属性值(Object)
示例 :
为所有图像设置src属性。
HTML 代码:
<img/>
< img/>
jQuery 代码:
$("img").attr("src","test.jpg");
结果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

attr(key, function(index, attr)) — 为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
参数 :
key — 属性名称(String)
function(index, attr) — 返回属性值的函数 ,第一个参数为当前元素的索引值,第二个参数为原先的属性值。(Function)
示例 :
把src属性的值设置为title属性的值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("title", function() { return this.src });
结果:
<img src="test.jpg" title="test.jpg" />

removeAttr(name) — 从每一个匹配的元素中删除一个属性
参数 : name — 要删除的属性名(String)
示例 :
将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]

分享到:
评论

相关推荐

    JQuery框架元素的属性与样式

    尽管JQuery不直接提供修改DOM属性的方法,但它提供了`attr()`函数来处理元素属性。`attr()`函数可以用于获取或设置一个或多个元素的属性值。以下是一个示例,展示如何使用`attr()`来改变图片的`src`和`alt`属性: `...

    使用jQuery操作元素的属性与样式

    ### 使用jQuery操作元素的属性与样式 ...通过以上示例,我们可以看到jQuery提供的`attr()`方法不仅功能强大而且易于使用,非常适合用来操作元素属性。这对于构建具有高度交互性和响应式的网页来说是非常有用的工具。

    详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

    本篇文章将详细介绍jQuery中用于操作DOM元素属性的两个非常重要的方法:attr()和removeAttr()。 首先,attr()方法是jQuery中最常用的方法之一,它用于读取或设置HTML元素的属性值。在介绍attr()方法之前,我们首先...

    jquery 获取自定义属性(attr和prop)的实现代码

    1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined ) 2. attr(属性名, 属性值) //设置属性的值 ...

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

    在JavaScript的世界里,jQuery库极大地简化了DOM操作,包括对元素属性的操作。本文将深入探讨jQuery如何使用`attr`方法来赋值和处理元素的属性。 `attr`是jQuery中的一个核心方法,它用于获取、设置或者删除HTML...

    jquery的attr方法使用

    **jQuery的attr方法详解** ...综上所述,jQuery的`attr`方法是操作HTML元素属性的重要工具,无论是获取还是设置,都能高效地完成任务。在实际开发中,熟练掌握`attr`的用法,将极大地提升工作效率。

    jQuery 1.5 遍历xml节点属性

    在这个过程中,`.attr(name)`用于获取或设置元素的属性值,`.attr.each()`则遍历元素的所有属性。需要注意的是,`.attr.each()`并不是jQuery的核心方法,而是对`jQuery.fn.attr`的一个扩展,如在描述中提到的博客...

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

    Jquery的attr()方法是jQuery库中用于操作DOM元素属性的一个核心方法。它能够获取或设置元素的属性和属性值。通过attr()方法,可以非常方便地操作HTML元素的属性,从而实现页面动态交互效果。在详细讲解attr()方法...

    jQuery .attr()和.removeAttr()方法操作元素属性示例

    (attr()方法是jQuery中用于获取和设置元素属性的标准方法。它有以下两种主要功能: 1. 读取属性值:当我们要获取某个元素的某个属性值时,可以使用.attr()方法。它的语法结构非常简单,只需要传递属性名即可。例如...

    jquery常用的一些属性,方法及例子说明

    .get()取得匹配元素的集合;.get(index)获取特定位置的元素;.get().reverse()反转元素数组;.index($("Element"))获取元素在集合中的位置索引等。 基本对象获取方面,我们可以通过id选择器$("#id")获取特定id的...

    jQuery第2天知识点:jQuery 样式操作、jQuery 属性操作.zip

    例如,`$('selector').attr('attributeName', 'attributeValue')`将设置匹配元素的`attributeName`属性为`attributeValue`。 2. **`.removeAttr()`**:用于移除元素的指定属性。例如,`$('selector').removeAttr('...

    JQuery学习笔记,属性大全

    1. `attr(attributeName)`/`attr(attributeName, value)` - 获取或设置元素的属性值。 2. `prop(propertyName)`/`prop(propertyName, value)` - 获取或设置元素的DOM属性,如`checked`、`selected`等。 3. `data(key...

    jquery得到iframe src属性值的方法

    jQuery中的attr()方法用于获取或设置匹配元素的属性值。在这个例子中,attr("src")用于获取iframe元素的src属性值。 5. $(document).ready()方法: 在jQuery中,$(document).ready()方法用于确保在文档完全加载...

    jquery 属性选择器的使用

    2. **值匹配选择器**: 使用 `[attr=value]`,选取属性值等于指定值的元素。例如,`$('a[target="_blank"]')` 选取所有 `target` 属性设置为 "_blank" 的超链接。 3. **以某种字符串开头的选择器**: 使用 `[attr^=...

    jquery获取自定义属性(attr和prop)实例介绍

    总结一下,`attr()`和`prop()`是jQuery中处理HTML元素属性的重要工具。`attr()`适用于传统的HTML属性,而`prop()`则针对那些反映元素状态或特性的属性。在实际开发中,正确选择这两个方法可以提高代码的效率和兼容性...

    详解jQuery设置内容和属性.docx

    jQuery的`attr()`方法用于获取或设置元素的属性值。例如: - 设置单个属性: ```javascript $("button").click(function(){ $("#w3s").attr("href", "https://www.w3school.com.cn/jquery"); }); ``` 这将在按钮...

Global site tag (gtag.js) - Google Analytics