jQuery 里面的attr（）方法

最新推荐文章于 2024-03-29 11:48:29 发布
最新推荐文章于 2024-03-29 11:48:29 发布
阅读量3.4w 收藏 93
点赞数 38
分类专栏： 前端学习 文章标签： 前端 jquery web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38992887/article/details/78884574
版权
这个是上个星期在公司的时候遇到的问题，都不知道在学校学的啥一直没有弄清楚，趁着周末好好补补。

说说attr（）这个方法吧。
这里写一段通用的代码：

<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
   <li title="苹果汁">苹果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠萝汁">菠萝</li>
</ul>
<button>点击按钮看attr()方法的效果</button>
<h3></h3>
</body>

1、返回属性的值：

语法：attr(属性名)
$(document).ready(function(){
$("button").click(function(){
var vatext= $("ul li:eq(1)").attr("value");
$("h3").text(vatext);
});
});
这时h3标签获取了第二个li里面value的值：
这里写图片描述

2、设置属性和值：

语法：attr(属性,属性值)
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(0)").attr("title","圣诞节要吃苹果");
var vatext=$("ul li:eq(0)").attr("title");
$("h3").text(vatext);
});
});
</script>
这是第一个li的title属性值变成了我们自己定义的内容：
这里写图片描述

3、使用函数设置属性和值：

语法：attr(属性,函数值)
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(1)").attr("title",function(){
return this.value;
});
var vatext=$("ul li:eq(1)").attr("title");
$("h3").text(vatext);
});
});
</script>
这里写图片描述

4、设置多个属性和值：

语法：attr(属性:属性值,属性:属性值…)
其实感觉这个和第二个差不多的性质，只是加了属性和属性值。
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(1)").attr({title:"我想喝柠檬汁，不想喝橘子汁",value:"123长大了变成了321"});
var vatext1=$("ul li:eq(1)").attr("title");
var vatext2=$("ul li:eq(1)").attr("value");
$("p").text(vatext1);
$("h3").text(vatext2);
});
});
</script>
原来p标签和H3标签的值都改变了：
这里写图片描述

温馨提示：

删除属性用removeAttr（）方法就可以了。
本来说讲attr（）方法和data（）方法的，attr（）讲完就那么多了，data（）放在下一篇文章吧。

注意：上文中所写的为个人版权，如需转载请注明出，欢迎联系作者，一起讨论学习。
邮箱：823376567@qq.com

种种的种
关注
  • 38
    点赞
  • 踩
  • 93
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Jquery attr()方法 属性赋值和属性获取详解
10-22
下面小编就为大家带来一篇Jquery attr()方法 属性赋值和属性获取详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考
attr 用法
weixin_30814329的博客
05-08 583
一. .attr(attributeName)返回String attributeName 为要获取的值的属性名 值得注意的是这个.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法做一个循环。 在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。另外，.att...
前端提高篇(八十五)：jQuery的属性与特性，prop与attr
最新发布
2401_83916355的博客
03-29 1009
前端校招精编面试解析大全点击这里即可获取完整版pdf查看[外链图片转存中…(img-rnm1tgbX-1711684071159)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-7oGweXz3-1711684071159)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取。
attr属性大全
weixin_30612769的博客
07-31 4227
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了： jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1.attr(属性...
attr（）的使用
热门推荐
枫的博客
07-31 1万+
attr（）的使用三种用法 1、获取属性的值 attr（value）,可以获得属性值 2、改变属性值attr（name，value） 把name的值改变成value。 3、函数使用attr（attribute,function(index,oldvalue)）attribute 规定属性的名称。 function(index,oldvalue) 规定返回属性值的函数。该函数可接收并
attr()用法
chuyaonong6148的博客
06-21 3102
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1.attr(属性名)//获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从...
jQuery 自学笔记（五）——— attr() 操作属性、prop() 操作布尔类型、尺寸和位置操作
秀岩的博客
01-04 1761
一、attr() 操作属性 1.1 设置属性 1.2 获取属性 1.3 移除属性 二、 prop() 操作布尔类型的属性 2.1 原生 js 操作 checked 属性 2.2 jQuery 操作 checked 属性 2.3 表格全选反选 三、尺寸和位置操作 3.1 width() 方法与 height() 方法 3.2 offset() 方法 与 position() 方法 3.3 scrollTop()方法 和 scrollLeft()方法
jquery的attr方法禁用表单元素禁用输入内容
10-25
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它提供了许多方便的API来操作DOM元素，其中`attr`方法是其中一个重要的功能。本篇将详细介绍如何使用jQuery的`attr`方法来禁用表单元素，防止用户输入内容。 ...
jquery 动态合并单元格的实现方法
11-22
如下所示： ////在table的第二行的位置添加一行： var tbl_elm = $("#dgList"); $('<tr><td colspan=\>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ...还可以写成：tds[6].attr("rowSpan", 2);
JQuery实现倒计时按钮具体方法
10-26
这种功能在JQuery中可以很容易实现。本文将详细解释如何使用JQuery来实现一个倒计时按钮。 首先，我们需要理解JQuery的基本用法。JQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax...
jquery插件使用方法大全
05-24
·attribute（改进了.attr()的性能）、jQuery()核心函数、CSS（.css()性能有两倍提升）、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章，宣布jQuery 1.5正式版已经...
JQUERY设置IFRAME的SRC值的代码
12-11
代码如下:$(window.parent.document).find... leftiframe中jQuery改变mainiframe的src代码： $(“#mainframe”,parent.document.body).attr(“src”,”//www.jb51.net “) 2 如果内容里面有一个ID为mainiframe的ifame
jQuery的attr()方法和JavaScript的属性操作
rr20060119的博客
10-13 391
使用来读取元素的属性值。使用来设置元素的属性值。使用来设置多个属性的值。使用来移除元素的属性。使用来检查属性是否存在。使用来添加自定义数据属性。使用回调函数来根据属性的旧值来设置新值。
Android 之 ?attr/ 用法
alpgao的博客
03-27 8520
?attr 是和主题Theme有关，也就是说在Resource资源中定义，在主题Theme中赋值，使用的时候，该值会随着主题的变化而获取的值也是不同的。 一、自定义属性att基本用法 (1)、定义 在values文件夹中创建一个attrs_base.xml，名称随意起。定义一个属性，并给出属性的格式。 <resources> <attr name="playBarBack...
jQuery 的设置属性值，和获取属性值，attr()和prop()；
F_x_i_a_o_l_i_n_g_的博客
09-25 469
jQuery 的设置属性值，和获取属性值，attr()和prop(); attr(“属性”)：获取属性值 attr(“属性”，“属性值”)：设置属性的属性值 prop(“属性”)：获取属性值 prop(“属性”，“属性值”)：设置属性的属性值 两者的区别 attr可以获得和定义自定义的属性和属性值，prop不行，但是attr已经不进行维护啦，所以推荐使用prop ...
jQuery中attr的用法
currui的博客
03-14 8730
attr用来获取属性，prop获取特性 Jquery1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性 属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName” jquery判断checked的三种方法: .attr('checked'): //看版本1.5-返回:true或false .prop('checked')...
jQuery的attr（）方法
anfield的门柱
09-08 1329
1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ） 2. attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。） 3. attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，
前端面试题5-attr是什么，用法呢？
weixin_48249606的博客
10-27 979
attr是什么，用法？ 定义和用法 attr()方法设置或返回被选元素的属性值 根据属性值的不同，会有多种用法 返回属性值：返回被选元素的属性值 语法： $(selector).attr(attribute) 参数 描述 attribute 规定要获取其值的属性。 设置属性/值：设置被选元素的属性和值 $(selector).attr(attribute,value) 参数 描述 attribute 规定属性的名称。 value 规定属性的值。 使
jQuery.attr() 函数详解
十年树木的博客
11-24 4577
attr()函数用于设置或返回当前jQuery对象所匹配的元素节点的属性值。 该函数属于jQuery对象(实例)。如果需要删除DOM元素节点的属性，请使用removeAttr()函数。 语法 attr()函数有以下两种用法： 用法一： jQueryObject.attr( attributeName [, value ] ) 设置或返回指定属性attribu
jquery获取文本内容时，不需要里面的span标签
05-27
好的，如果你想要获取文本内容时不包含其中的 `span` 标签，可以使用 jQuery 的 `text()` 方法加以过滤。具体做法是，在获取文本之前，先使用 `find()` 方法找到要过滤的标签，然后使用 `not()` 方法将其排除掉，最后使用 `text()` 方法获取文本内容即可。以下是修改后的代码： ```javascript $(".subcategories-container").each(function() { var categoryName = $(this).find(".category-name").text(); console.log("Category Name: " + categoryName); $(this).find(".subcategory-name").each(function() { var subcategoryLink = $(this).find("a").attr("href"); var subcategoryName = $(this).find("a:first-child").clone().find("span").remove().end().text(); var booksCount = $(this).find(".books-count").text(); console.log("Subcategory Name: " + subcategoryName); console.log("Subcategory Link: " + subcategoryLink); console.log("Books Count: " + booksCount); }); }); ``` 以上代码会遍历页面上所有类名为 "subcategories-container" 的标签，获取它们下面的 "category-name" 的文本内容，然后获取这个标签下面所有类名为 "subcategory-name" 的标签。对于每个 "subcategory-name" 标签，会获取它下面的 "a" 标签的 "href" 属性值，以及第一个子节点的文本内容，但是会先将其中的 `span` 标签移除。最终输出这些值到控制台上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值