jquery怎么用html_jquery操作html元素的常用方法【指南】

2次阅读

$()选中元素无反应,主因是dom未加载完就执行代码,需用$(document).ready()或简写$()包裹逻辑,并用.Length验证是否选中。

jquery怎么用html_jquery操作html元素的常用方法【指南】

怎么用 $() 选中元素但什么都没发生?

jquery 的核心是选中元素再操作,但很多人卡在第一步:写对了选择器$() 却返回空数组。常见原因是 DOM 还没加载完就执行了 jQuery 代码。

  • 必须等 DOM 就绪后再运行操作,用 $(document).ready() 或简写 $() 包裹逻辑
  • $('#nonexistent') 不报错,但长度为 0 —— 先用 console.log($('#xxx').length) 确认是否选中
  • ID 选择器里的 # 后不能有空格或特殊字符,$('#user name') 是错的,应写成 $('#username')
  • 如果页面是动态插入的元素(比如 ajax 加载后追加),$() 原生不支持事件委托,得用 $(document).on('click', '.btn', handler)

.html().text() 到底该用哪个?

两者都改内容,但语义和效果完全不同:一个解析 HTML,一个当纯文本处理。

  • .html('Hello <strong>world</strong>') 会渲染加粗标签;.text('Hello <strong>world</strong>') 显示原样字符串,包括尖括号
  • .html() 插入用户输入的内容有 xss 风险,除非你明确信任来源
  • .html('') 清空子节点并销毁绑定的事件(因为整个 DOM 被重写了);.empty() 更安全,也清空但保留 jQuery 数据
  • 获取值时:.html() 拿到的是带标签的字符串,.text() 拿到的是去标签后的纯文本(含换行、空格)

为什么 .append() 插进去的元素点不了?

这是最典型的事件绑定失效场景:元素是后来加的,但事件是在旧 DOM 上绑定的。

  • 直接写 $('.btn').click(handler) 只对初始化时存在的 .btn 生效
  • 正确做法是用事件委托:$(document).on('click', '.btn', handler),把监听挂到父级(甚至 document),靠事件冒泡触发
  • 不要滥用 $(document),优先用最近的静态父容器,比如 $('#list').on('click', '.item', ...),性能更好
  • .append() 返回的是被插入的元素本身(不是父容器),别误以为它能链式绑定事件

jQuery 1.x / 2.x / 3.x 在 HTML 操作上有什么实际区别?

老项目升级或兼容旧浏览器时容易踩坑,关键差异不在语法,而在默认行为和容错逻辑。

立即学习前端免费学习笔记(深入)”;

  • jQuery 3+ 移除了对 IE8 及更早版本的支持,.html() 在某些嵌套标签下更严格,比如 <tr> 直接放 <code>.html('<td>1</td> <td>2</td>') 在 3.x 中可能失败,需用 <tbody> 包裹 <li>jQuery 3+ 对空集合调用方法不再抛错,而是静默返回,所以 <code>$('.missing').show() 不报错但也不生效 —— 得自己检查长度
  • .val() 处理 select 多选时,jQuery 1.x 返回第一个选中值,3.x 返回数组(即使单选),注意判空逻辑
  • 如果项目还在用 1.x,别直接切到 3.x,先过一遍 upgrade guide,重点看 .attr()/.prop().data() 行为变化
  • DOM 操作看着简单,但 jQuery 的隐式行为(比如自动遍历集合、静默失败、事件绑定时机)才是出问题最多的地方。别信“写完就能跑”,每次加新交互,先确认元素存在、事件绑对位置、版本行为没偏移。

text=ZqhQzanResources