jquery修改属性值实例代码(设置属性值)

本文介绍了jQuery中的attr()方法,该方法可用于设置或修改HTML元素的属性值。文章通过实例展示了如何使用attr()来更新链接的href属性以及如何同时设置多个属性。此外,还讲解了如何利用回调函数来动态地修改属性值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


jQuery attr()方法用于设置/改变属性值,下面的例子演示如何改变(设置)链接中 href 属性的值

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变(设置)链接中 href 属性的值:

实例
 代码如下:

$("button").click(function(){
$("#keleyi").attr("href","http://www.jb51.net");
});

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:


实例
 代码如下:

$("button").click(function(){
$("#keleyi").attr({
"href" : "http://www.jb51.net",
"title" : "柯乐义网"
});
});

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法:

实例
 代码如下:

$("button").click(function(){
$("#keleyi").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});

### 使用 jQuery 修改元素属性值 在网页开发过程中,有时需要动态更改 HTML 元素的属性。通过 jQuery 可以轻松实现这一目标。`attr()` 方法用于设置被选元素的一个或多个属性及其对应的值。 要改变单个属性的值,可以传递两个参数给 `attr()`: 属性名称和新的属性值: ```javascript $('#elementId').attr('attributeName', 'newValue'); ``` 如果想要一次性更新多个属性,则可以通过传入对象来完成此操作[^1]: ```javascript $('#elementId').attr({ attributeNameOne: 'valueOne', attributeNameTwo: 'valueTwo' }); ``` 对于特定场景下的应用实例,比如获取点击的单选按钮的价格并将其赋值给某个元素的自定义属性 `rel`: ```javascript $('input[name="optionsRadios"]').change(function(){ var price = $(this).data('price'); // 假设价格存储于 data-price 中而不是 rel 中 $('#targetElement').attr('rel', price); }); ``` 需要注意的是,在现代实践中更推荐使用 `data-*` 属性而非过时的 `rel` 来保存额外的信息[^2]。 当涉及到日期处理时,也可以利用 JavaScript 的内置方法结合 jQuery 设置输入框中的日期值: ```javascript $('.set-today').val((new Date()).toISOString().substr(0, 10)); ``` 上述代码片段展示了如何将当前系统的 ISO8601 格式的日期字符串截取前 10 位作为 YYYY-MM-DD 形式的日期填充到具有 `.set-today` 类的选择器所匹配的第一个 `<input>` 或者其他支持该特性的表单控件内[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值