当前位置:首页 > jquery

jquery改变属性

2026-02-03 16:39:14jquery

jQuery 改变属性方法

使用 jQuery 可以方便地修改 HTML 元素的属性。以下是几种常见的方法:

修改标准属性

使用 attr() 方法可以获取或设置元素的属性值。设置属性时需要传递属性名和值。

// 获取属性值
var href = $('a').attr('href');

// 设置单个属性
$('img').attr('src', 'new-image.jpg');

// 设置多个属性
$('input').attr({
  'type': 'text',
  'placeholder': 'Enter text'
});

修改布尔属性

对于 checked、disabled 等布尔属性,建议使用 prop() 方法。

// 选中复选框
$('#checkbox').prop('checked', true);

// 禁用按钮
$('#button').prop('disabled', true);

移除属性

使用 removeAttr() 方法可以完全移除元素的某个属性。

// 移除 title 属性
$('div').removeAttr('title');

修改 data 属性

对于 HTML5 的 data-* 属性,可以使用 data() 方法。

// 设置 data 属性
$('div').data('info', 'new data');

// 获取 data 属性
var info = $('div').data('info');

修改 CSS 类属性

虽然不是严格意义上的属性修改,但类名的变化也会影响元素表现。

// 添加类
$('p').addClass('highlight');

// 移除类
$('p').removeClass('highlight');

// 切换类
$('p').toggleClass('highlight');

注意事项

  • attr()prop() 的主要区别在于:attr() 操作 HTML 属性,prop() 操作 DOM 属性
  • 对于布尔属性如 checked、selected,使用 prop() 更可靠
  • 修改 data 属性不会改变 HTML 标记中的 data-* 属性,只改变 jQuery 内部存储的数据

jquery改变属性

标签: 属性jquery
分享给朋友:

相关文章

jquery最新版本

jquery最新版本

jQuery 最新版本 jQuery 是一个广泛使用的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是关于其最新版本的信息: 当前稳定版本 jQuer…

jquery版本

jquery版本

jQuery是一个快速、简洁的JavaScript库,用于简化HTML文档遍历、事件处理、动画设计和Ajax交互。以下是关于jQuery版本的详细信息: jQuery版本分类 jQuery主要分为三…

jquery手册

jquery手册

jQuery手册概览 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是核心功能和常用方法的分类整理。 核心方法 $(selector…

jquery 菜鸟

jquery 菜鸟

以下是针对 jQuery 初学者的基础指南,涵盖核心概念和常用操作: jQuery 简介 jQuery 是一个快速、轻量级的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考…

jquery选择器

jquery选择器

jQuery 选择器基础 jQuery 选择器用于选取 DOM 元素,基于 CSS 选择器语法扩展。通过 $() 或 jQuery() 函数调用,返回匹配元素的集合。 常见选择器类型 元素…