当前位置:首页 > jquery

jquery属性

2026-04-07 19:10:35jquery

jQuery 属性操作

jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以获取、设置或删除元素的属性,包括标准 HTML 属性和自定义属性。

获取属性值

使用 attr() 方法可以获取指定属性的值。语法如下:

$(selector).attr(attributeName)

示例代码:

var href = $('a').attr('href');

设置属性值

attr() 方法也可以用于设置属性值。可以单独设置一个属性,也可以同时设置多个属性。语法如下:

$(selector).attr(attributeName, value)
// 或多个属性
$(selector).attr({attribute1: value1, attribute2: value2})

示例代码:

$('img').attr('src', 'new-image.jpg');
$('input').attr({type: 'text', placeholder: 'Enter text'});

删除属性

使用 removeAttr() 方法可以删除指定的属性。语法如下:

$(selector).removeAttr(attributeName)

示例代码:

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

自定义属性(data-*)

HTML5 引入了 data-* 属性用于存储自定义数据。jQuery 提供了 data() 方法来操作这些属性。

获取 data 属性:

$(selector).data(key)

设置 data 属性:

$(selector).data(key, value)

示例代码:

var user = $('#user').data('user-id');
$('#user').data('score', 100);

prop() 与 attr() 的区别

prop() 方法用于获取或设置 DOM 元素的属性(如 checked, disabled 等布尔属性),而 attr() 用于 HTML 属性。

对于布尔属性,推荐使用 prop()

$('input[type="checkbox"]').prop('checked', true);

检查属性是否存在

可以通过 attr() 方法返回的值是否为 undefined 来判断属性是否存在:

jquery属性

if ($('img').attr('alt') !== undefined) {
    // 属性存在
}

常用属性操作示例

修改链接的 href 属性

$('a').attr('href', 'https://new-url.com');

获取图片的 alt 属性

var altText = $('img').attr('alt');

设置多个属性

$('input').attr({
    'type': 'password',
    'placeholder': 'Enter password'
});

移除类属性

$('div').removeAttr('class');

操作 data 属性

// 设置
$('#item').data('price', 20.99);
// 获取
var price = $('#item').data('price');

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

相关文章

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获…

jquery作用

jquery作用

jQuery的作用概述 jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计和Ajax交互等操作。其核心目标是让开发者以更少的代码完成更多功能,同时解…

jquery 筛选器

jquery 筛选器

jQuery 筛选器 jQuery 筛选器用于从一组匹配的元素中进一步筛选出符合条件的子集。这些筛选器可以基于元素的位置、内容、属性或状态进行筛选。 基本筛选器 :first 选择第一个匹配的元素。…

jquery循环

jquery循环

jQuery 循环方法 jQuery 提供了多种循环方法,适用于不同的场景,包括遍历 DOM 元素、数组或对象。以下是常见的 jQuery 循环方式: each() 方法 each() 是 jQue…

jquery 库

jquery 库

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,适合快速开发前端…

jquery 列表

jquery 列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>)。以下是一些常见的操作方式: 动态添加列表项 使用 append()…