Jquery教程|前端开发 Jquery获取标签属性、添加样式与删除样式及文本写入方法详解

🎯 jQuery魔法手册：属性操控、样式切换与文本写入全攻略

场景引入：
小明正在熬夜改公司官网的交互效果 😫，产品经理要求："点按钮时图标要变红，显示'已关注'文字，还要能一键取消！"——别慌！用jQuery三招搞定属性、样式和文本操作，分分钟让页面"活"起来！✨

🛠️ 获取/修改标签属性

jQuery处理属性就像拆快递一样简单 📦

// 获取属性值（比如获取图片链接）
let imgUrl = $("img#logo").attr("src"); 
// 修改单个属性（更换链接）
$("img#logo").attr("src", "new_logo.png");
// 批量修改属性（同时改alt和title）
$("img#logo").attr({
  alt: "公司新LOGO", "点击查看大图"
});
// 删除属性（移除禁用状态）
$("button.submit").removeAttr("disabled");

💡 小技巧：

• 用data()方法处理自定义属性更优雅：
  $("#user").data("uid") → 获取data-uid的值

🎨 样式操作：增删改查一条龙

比CSS面板还方便的操作来了！

// 添加样式（给导航条加高亮）
$("#navbar").addClass("active");
// 删除样式（关闭弹窗时去掉阴影）
$(".modal").removeClass("shadow");
// 切换样式（夜间模式开关）
$("#darkModeBtn").click(function(){
  $("body").toggleClass("dark-theme");
});
// 直接修改CSS（紧急红色警告！）
$(".alert").css("color", "red");
// 批量修改样式（调整卡片外观）
$(".card").css({
  "border-radius": "8px",
  "box-shadow": "0 2px 5px rgba(0,0,0,0.1)"
});

🚨 避坑指南：

• 用hasClass()检测样式是否存在：
  if($("#btn").hasClass("loading")) { ... }

✏️ 文本与HTML内容操作

告别innerHTML的繁琐写法！

// 获取纯文本（读取提示文字）
let hintText = $(".tooltip").text();
// 修改文本（更新计数器）
$("#counter").text("当前数量: 15");
// 获取HTML内容（带标签的结构）
let htmlContent = $(".article").html();
// 修改HTML（插入带样式的文字）
$(".notice").html("<strong>警告！</strong> 系统即将升级");
聊天室新消息）
$("#chatBox").append("<p>用户A：你好呀~</p>");

🌈 炫酷玩法：

• 链式操作一气呵成：

  $(".item")
    .text("新商品")
    .addClass("on-sale")
    .fadeIn();

🔧 综合实战：关注按钮功能

$("#followBtn").click(function(){
  // 切换关注状态
  $(this).toggleClass("followed");
  // 修改按钮文字
  let btn = $(this);
  btn.text(btn.hasClass("followed") ? "已关注 ❤️" : "点击关注");
  // 修改图标颜色
  btn.find("i").css("color", btn.hasClass("followed") ? "red" : "#999");
});

📆 2025年最新兼容性说明

截至2025年8月，jQuery 3.6+版本仍完美支持所有现代浏览器，但要注意：

• 部分新CSS属性（如gap）需用.css()直接设置
• 在React/Vue项目中建议配合jQuery-migrate插件使用

🎉 总结：

• 属性操作：attr()/removeAttr()
• 样式控制：addClass()/removeClass()/css() 编辑：text()/html()
  掌握这三板斧，90%的DOM操作需求都能轻松搞定！ 🚀

（完）