html 自定义属性 jq|极客教程

html 自定义属性 jq

一、什么是自定义属性

在HTML中，自定义属性是指在标签中定义的非标准属性，用来存储与标签相关的自定义数据或信息。HTML规范中定义了一些全局属性，如id、class等，但有时我们需要为标签添加一些额外的数据，以便在JavaScript或CSS中进行操作。这时，就可以使用自定义属性。

自定义属性的命名规则是以data-开头，后面跟上自己定义的属性名称。例如，<div data-info="example"></div>中的data-info就是一个自定义属性。

二、自定义属性的用途

自定义属性的用途非常广泛，它可以帮助我们在HTML标签中存储一些与业务逻辑相关的数据，供后续的脚本代码使用。

以下是自定义属性的一些常见应用场景：

1. 存储数据

通过自定义属性，我们可以将数据直接嵌入到HTML标签中，方便在JavaScript中进行数据操作和传递。例如，我们可以在一个<div>标签中添加自定义属性来存储用户的ID：

<div data-user-id="123456"></div>

然后，我们可以使用JavaScript获取该自定义属性的值，并进行相应的操作：

var userId = document.querySelector('div').dataset.userId;
console.log(userId); // 输出: 123456

2. JS行为判断和标识

有时，我们需要根据某个条件来对某个标签进行特殊的处理或标识。此时，可以使用自定义属性来给标签添加一些标记，以便后续的JavaScript代码进行判断和操作。例如，我们可以给某个按钮添加一个自定义属性，来判断该按钮是否已经被点击过：

<button data-clicked="false">点击按钮</button>

然后，使用JavaScript来获取该自定义属性的值，并进行判断和操作：

var button = document.querySelector('button');
var clicked = button.dataset.clicked;

if (clicked === 'false') {
  // 按钮未点击过的处理逻辑
  button.dataset.clicked = 'true'; // 将自定义属性的值修改为已点击
} else {
  // 按钮已点击过的处理逻辑
}

3. CSS样式控制

自定义属性还可以用于CSS样式的控制。我们可以在CSS中使用[attr=value]的选择器来选择具有特定自定义属性值的元素，并对其样式进行设置。例如，我们可以定义一个自定义属性data-gender来标识用户的性别，然后使用CSS对不同性别的用户显示不同的样式：

<div data-gender="male">男性用户</div>
<div data-gender="female">女性用户</div>

div[data-gender="male"] {
  color: blue;
}

div[data-gender="female"] {
  color: pink;
}

这样，男性用户的文字颜色将会是蓝色，女性用户的文字颜色将会是粉色。

三、使用jQuery操作自定义属性

jQuery是一个广泛应用于JavaScript开发的快速、简洁的JavaScript库。它大大简化了JavaScript与HTML文档、事件处理、动画效果和服务器交互等操作的编码难度。下面，我们将介绍如何使用jQuery来操作自定义属性。

1. 获取自定义属性的值

使用jQuery来获取自定义属性的值非常简单，可以通过.data()或.attr()方法来实现。

例如，我们有以下HTML代码：

<div id="example" data-info="hello">这是一个示例</div>

然后，我们可以使用jQuery来获取该自定义属性的值：

var info =  $('#example').data('info'); console.log(info); // 输出: hello var infoAttr =$ ('#example').attr('data-info');
console.log(infoAttr); // 输出: hello

2. 设置自定义属性的值

使用jQuery来设置自定义属性的值也非常简单，可以通过.data()或.attr()方法来实现。

例如，我们有以下HTML代码：

<div id="example">这是一个示例</div>

然后，我们可以使用jQuery来设置该自定义属性的值：

$('#example').data('info', 'world');

或者：

$('#example').attr('data-info', 'world');

此时，HTML标签中的自定义属性值已经被修改为world。

3. 操作具有特定自定义属性的元素

使用jQuery来操作具有特定自定义属性的元素也非常简单，可以通过选择器来选择具有特定自定义属性值的元素。

例如，我们有以下HTML代码：

<div data-type="fruit">苹果</div>
<div data-type="fruit">橙子</div>
<div data-type="vegetable">西红柿</div>

然后，我们可以使用以下代码来选择具有自定义属性data-type值为fruit的元素：

var fruits = $('[data-type="fruit"]');
fruits.css('color', 'red');

这样，具有自定义属性data-type值为fruit的元素的文字颜色将会变为红色。

四、示例代码运行结果

下面是使用jQuery操作自定义属性的示例代码运行结果。

示例HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="example" data-info="hello">这是一个示例</div>

  <script>
    var info =  $('#example').data('info'); console.log(info); // 输出: hello var infoAttr =$ ('#example').attr('data-info');
    console.log(infoAttr); // 输出: hello

     $('#example').data('info', 'world'); var updatedInfo =$ ('#example').data('info');
    console.log(updatedInfo); // 输出: world

    var fruits = $('[data-type="fruit"]');
    fruits.css('color', 'red');
  </script>
</body>
</html>

运行以上示例代码后，控制台将会输出以下结果：