程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • jQuery

    • jQuery 入门
    • jQuery 选择器
    • jQuery 样式操作
    • jQuery 效果
    • jQuery 属性操作
      • 1. 设置或获取元素固有属性值 prop()
      • 2. 设置或获取元素自定义属性值 attr()
      • 3. 数据缓存 data()
      • 4. 综合示例
    • jQuery 文本属性值操作
    • jQuery 元素操作
    • jQuery 尺寸、位置操作
    • jQuery 事件
    • jQuery 其他方法
  • jQuery
  • jQuery
scholar
2024-07-24
目录

jQuery 属性操作

# jQuery 属性操作

jQuery 提供了许多方便的方法来操作 DOM 元素的属性。以下是常用的属性操作方法:

# 1. 设置或获取元素固有属性值 prop()

prop() 方法用于获取或设置元素的固有属性(如 checked、disabled 等)。

// 获取属性值
var checked = $('input[type="checkbox"]').prop('checked'); // 获取复选框的选中状态

// 设置属性值
$('input[type="checkbox"]').prop('checked', true); // 设置复选框为选中状态
1
2
3
4
5

语法:

.prop(propertyName) // 获取属性值
.prop(propertyName, value) // 设置属性值
1
2

# 2. 设置或获取元素自定义属性值 attr()

attr() 方法用于获取或设置元素的自定义属性(如 data-* 属性)。

// 获取属性值
var index = $('div').attr('data-index'); // 获取自定义属性 data-index 的值

// 设置属性值
$('div').attr('data-index', '1'); // 设置自定义属性 data-index 的值为 1
1
2
3
4
5

语法:

.attr(attributeName) // 获取属性值
.attr(attributeName, value) // 设置属性值
1
2

# 3. 数据缓存 data()

data() 方法用于在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。也可以用于读取 HTML5 自定义属性 data-*。

// 附加数据
$('div').data('name', 'value'); // 向被选元素附加数据

// 获取数据
var value = $('div').data('name'); // 向被选元素获取数据

// 读取 HTML5 自定义属性
var index = $('div').data('index'); // 读取 HTML5 自定义属性 data-index 的值
1
2
3
4
5
6
7
8

语法:

.data(key) // 获取数据
.data(key, value) // 设置数据
1
2

# 4. 综合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 获取固有属性值
            var isChecked = $('#checkbox').prop('checked');
            console.log('复选框选中状态:', isChecked);

            // 设置固有属性值
            $('#checkbox').prop('checked', true);

            // 获取自定义属性值
            var dataIndex = $('#myDiv').attr('data-index');
            console.log('自定义属性 data-index 的值:', dataIndex);

            // 设置自定义属性值
            $('#myDiv').attr('data-index', '2');

            // 附加数据
            $('#myDiv').data('name', 'example');
            
            // 获取数据
            var dataValue = $('#myDiv').data('name');
            console.log('附加数据 name 的值:', dataValue);

            // 读取 HTML5 自定义属性
            var html5DataIndex = $('#myDiv').data('index');
            console.log('HTML5 自定义属性 data-index 的值:', html5DataIndex);
        });
    </script>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <div id="myDiv" data-index="1">示例 DIV</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
jQuery 效果
jQuery 文本属性值操作

← jQuery 效果 jQuery 文本属性值操作→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式