当前位置:首页 > jquery

jquery 属性

2026-01-13 15:42:51jquery

jQuery 属性操作

jQuery 提供了一系列方法来获取、设置和操作 HTML 元素的属性。以下是常用的属性操作方法:

attr() 方法

用于获取或设置元素的属性值。获取属性时,传入属性名;设置属性时,传入属性名和值。

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

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

removeAttr() 方法

用于移除元素的指定属性。

$('input').removeAttr('disabled');

prop() 方法

用于获取或设置元素的属性值(适用于布尔属性,如 checkeddisabled)。

// 获取属性值
var isChecked = $('input[type="checkbox"]').prop('checked');

// 设置属性值
$('input[type="checkbox"]').prop('checked', true);

val() 方法

用于获取或设置表单元素的值(如 inputselecttextarea)。

// 获取值
var username = $('input[name="username"]').val();

// 设置值
$('input[name="username"]').val('new value');

data() 方法

用于获取或设置元素的自定义数据属性(data-*)。

// 获取数据属性
var userRole = $('div').data('role');

// 设置数据属性
$('div').data('role', 'admin');

html() 方法

用于获取或设置元素的 HTML 内容。

// 获取 HTML
var content = $('div').html();

// 设置 HTML
$('div').html('<p>New content</p>');

text() 方法

用于获取或设置元素的文本内容(不解析 HTML 标签)。

// 获取文本
var text = $('div').text();

// 设置文本
$('div').text('Plain text content');

addClass() 和 removeClass() 方法

用于动态添加或移除元素的 CSS 类。

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

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

toggleClass() 方法

用于切换元素的 CSS 类(如果存在则移除,否则添加)。

$('div').toggleClass('highlight');

css() 方法

用于获取或设置元素的 CSS 样式。

// 获取样式
var color = $('div').css('color');

// 设置样式
$('div').css('color', 'red');

注意事项

  • attr()prop() 的区别:attr() 操作 HTML 属性,而 prop() 操作 DOM 属性。对于布尔属性(如 checked),推荐使用 prop()
  • data() 方法仅用于 data-* 属性,不会修改 HTML,而是存储在 jQuery 的内部对象中。
  • 链式调用:jQuery 方法支持链式调用,例如 $('div').addClass('active').css('color', 'blue')

jquery 属性

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

相关文章

react 如何引入jquery

react 如何引入jquery

安装 jQuery 库 在 React 项目中引入 jQuery 的第一步是安装 jQuery。可以通过 npm 或 yarn 安装: npm install jquery # 或 yarn…

jquery插件库

jquery插件库

jQuery插件库推荐 jQuery插件库提供了丰富的扩展功能,帮助开发者快速实现常见的前端交互效果。以下是一些常用的jQuery插件库和资源: 1. 官方jQuery插件注册中心jQuery P…

jquery之家

jquery之家

jQuery之家相关资源 jQuery之家是一个提供jQuery插件、教程和资源的网站,适合开发者学习和使用jQuery技术。以下是关于jQuery之家的主要内容和资源: 网站内容 提供丰…

vue实现页面属性修改

vue实现页面属性修改

Vue 实现页面属性修改的方法 Vue 提供了多种方式来动态修改页面属性,包括数据绑定、计算属性、侦听器等。以下是几种常见的方法: 数据绑定 通过 v-bind 指令或简写 : 实现动态绑定 HT…

react 如何引入jquery

react 如何引入jquery

引入 jQuery 到 React 项目 在 React 项目中引入 jQuery 可以通过多种方式实现,但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突,因此建议仅在必要时使用…

jquery插件

jquery插件

jQuery 插件开发指南 jQuery 插件是一种扩展 jQuery 功能的模块化方式,允许开发者封装可重用的代码。以下是开发和使用 jQuery 插件的基本方法。 插件基本结构 jQuery…