当前位置:首页 > jquery

jquery设置属性

2026-02-03 08:57:36jquery

使用 attr() 方法设置属性

attr() 是 jQuery 中用于设置或获取属性的核心方法。通过传递属性名和值,可以动态修改元素的属性。
语法:

$(selector).attr(attributeName, value);

示例:

// 设置单个属性
$("#myImage").attr("src", "new-image.jpg");

// 设置多个属性(通过对象传递)
$("#myLink").attr({
  "href": "https://example.com",
  "title": "Visit Example"
});

使用 prop() 方法设置布尔属性

对于布尔属性(如 checkeddisabled),推荐使用 prop() 方法,因为它更准确地反映 DOM 属性的状态。
语法:

$(selector).prop(propertyName, value);

示例:

// 禁用按钮
$("#submitBtn").prop("disabled", true);

// 选中复选框
$("#checkBox").prop("checked", true);

使用 data() 方法设置自定义数据属性

data() 方法用于操作 data-* 属性,适合存储与元素相关的额外信息。
语法:

$(selector).data(key, value);

示例:

// 设置 data-id 属性
$("#item").data("id", 123);

// 读取时无需 "data-" 前缀
console.log($("#item").data("id")); // 输出 123

直接操作 DOM 属性(原生结合)

通过 jQuery 对象获取原生 DOM 元素后,可直接修改属性。适用于需要高性能的场景。
示例:

// 通过 [0] 或 get(0) 获取原生 DOM
$("#myInput")[0].placeholder = "Enter text";
$("#myDiv").get(0).className = "highlight";

动态设置样式属性(结合 CSS)

通过 css() 方法可直接设置元素的样式属性,虽然不是标准 HTML 属性,但常用于动态样式调整。
示例:

jquery设置属性

$("#box").css("background-color", "blue");

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

相关文章

jquery 滑块

jquery 滑块

jQuery 滑块实现方法 使用 jQuery 实现滑块功能可以通过多种方式完成,包括使用原生 jQuery 或结合插件(如 jQuery UI)。以下是几种常见实现方法: 使用 jQuery UI…

jquery获取

jquery获取

获取元素 使用jQuery选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('#…

jquery 效果

jquery 效果

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 提供了丰富的效果(Effects)功能,可以轻松实现元素的动态显…

jquery验证

jquery验证

jQuery 验证的基本方法 使用 jQuery 进行表单验证可以通过多种方式实现,以下是一些常见的方法和插件: 使用 jQuery 原生方法 通过 jQuery 选择器和事件处理函数,可以手动编写…

jquery列表

jquery列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>),包括动态添加、删除、修改列表项,以及事件绑定等。 创建列表 使用 j…

jquery 引用

jquery 引用

jQuery 引用方法 通过CDN引用jQuery 推荐使用官方或公共CDN(内容分发网络)加载jQuery,以下为最新版本的CDN链接: <!-- jQuery 3.x 版本(压…