jquery attr()如何显示隐藏元素

发布时间：2021-11-16 14:36:56 作者：iii
来源：亿速云阅读：560

# jQuery attr()如何显示隐藏元素

## 前言

在网页开发中，元素的显示与隐藏是最基础且高频的需求之一。jQuery作为曾经最流行的JavaScript库，提供了多种方法来实现这一功能。其中`attr()`方法虽然并非专为显示隐藏设计，但通过操作HTML属性（如`style`或自定义属性）也能间接实现效果。本文将深入探讨如何利用`attr()`控制元素显隐，并对比其他更专业的jQuery方法。

---

## 一、attr()方法基础

### 1. 方法定义
`attr()`是jQuery中用于获取或设置HTML元素属性的核心方法：
```javascript
// 获取属性值
$(selector).attr(attributeName);

// 设置属性值
$(selector).attr(attributeName, value);

2. 典型应用场景

修改/读取标准HTML属性（如id, class, href）
操作自定义数据属性（data-*）
动态改变元素样式（通过style属性）

二、使用attr()控制显隐的三种方式

方式1：直接操作style属性

// 隐藏元素
$("#target").attr("style", "display: none");

// 显示元素
$("#target").attr("style", "display: block");

注意事项： - 会覆盖元素原有的全部行内样式 - 需要明确知道元素默认的display值（block/inline/inline-block等）

方式2：切换class属性

配合CSS定义：

.hidden { display: none; }
.visible { display: block; }

jQuery操作：

// 隐藏
$("#target").attr("class", "hidden");

// 显示
$("#target").attr("class", "visible");

优势： - 样式与行为分离 - 便于维护多状态样式

方式3：使用自定义属性标记状态

// 初始化标记
$("#target").attr("data-visible", "true");

// 切换状态
$("#toggleBtn").click(function(){
  const isVisible = $("#target").attr("data-visible") === "true";
  $("#target")
    .attr("data-visible", !isVisible)
    .attr("style", `display: ${isVisible ? "none" : "block"}`);
});

三、与专业显隐方法对比

1. show()/hide()/toggle()

// 专业方法
$("#target").hide();  // 等同于 display: none
$("#target").show();  // 恢复为原有display值

优势： - 自动记忆元素原始display状态 - 支持动画效果（可传入duration参数）

2. css()方法

$("#target").css("display", "none");  // 更专业的样式操作

对比attr()： - 不会意外覆盖其他样式属性 - 专为样式操作优化

3. addClass()/removeClass()

$("#target").addClass("hidden");  // 类比class操作更专业

四、attr()方案适用场景

不推荐场景

仅需控制显隐时（应优先使用show()/hide()）
需要CSS动画过渡效果时

五、完整示例代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .box { 
      width: 200px; 
      height: 200px; 
      background: #3498db;
    }
    .hidden { display: none; }
  </style>
</head>
<body>
  <div id="content" class="box"></div>
  <button id="toggleAttr">attr()切换</button>
  <button id="toggleShowHide">show()/hide()切换</button>

  <script>
    // attr()方案
    $("#toggleAttr").click(function(){
      const $el = $("#content");
      if($el.attr("style")?.includes("none")) {
        $el.attr("style", "");
      } else {
        $el.attr("style", "display: none");
      }
    });

    // 专业方法对比
    $("#toggleShowHide").click(function(){
      $("#content").toggle();
    });
  </script>
</body>
</html>

六、总结

虽然attr()能够实现元素显隐控制，但在实际开发中应遵循以下原则：

语义优先：优先使用show()/hide()等专用方法
关注点分离：样式控制推荐使用css()或class操作
属性操作：当需要操作非样式属性时，attr()仍是首选

理解各种方法的适用场景，才能编写出更高效、更易维护的jQuery代码。 “`

注：本文实际约1100字，可根据需要调整示例部分的内容长度。建议在实际项目中优先考虑使用toggleClass()或hide()/show()等更语义化的方法。