? Jquery 选择器：基础与进阶
Jquery 选择器是操作 DOM 的核心工具，它能快速定位网页元素。基础选择器包括 ID 选择器、类选择器和标签选择器。ID 选择器用 “#” 符号，比如
(".intro")，可以选中所有 class 为 intro 的元素。标签选择器直接写标签名，例如 $("p")，会选中所有段落元素。
除了基础选择器，还有组合选择器。比如层级选择器，
("form> input")，只选 form 的直接子元素 input。还有相邻兄弟选择器 $("label + input")，会选中紧跟在 label 后面的 input 元素。
伪类选择器也很常用。:first 能选中第一个元素，比如
("tr:even") 会选中表格偶数行。:contains (text) 能找到包含指定文本的元素，例如 $(":contains ('W3School')")。
属性选择器可以根据元素属性来筛选。比如
("(href='#')") 选中 href 值为 #的元素，
("(href='.jpg')") 则匹配 href 以.jpg 结尾的元素。
? 事件处理：从绑定到优化
Jquery 的事件处理让交互变得简单。常用的事件有 click、mouseenter、mouseleave、keypress 等。绑定事件可以用 on () 方法，比如 $("p").on ("click", function (){ alert ("点击了段落"); })。one () 方法能让事件只触发一次，适合只需要执行一次的操作。
事件委托是个重要技巧。比如给动态添加的列表项绑定点击事件，用 $(document).on ("click", "li", function (){ ... })，这样即使动态添加的 li 也能响应事件，比逐个绑定更高效。
事件处理中，event 对象很有用。它包含了事件的相关信息，比如 event.pageX 和 event.pageY 可以获取鼠标点击的坐标。event.preventDefault () 能阻止事件的默认行为，比如阻止表单提交。
解绑事件用 off () 方法。比如 $("p").off ("click") 可以移除点击事件。如果想移除特定的处理函数，需要先保存函数引用。
?️ 2025 年最新技巧与性能优化
2025 年 Jquery 4.0 正式版发布，带来了新特性和性能优化。新选择器更强大，比如支持更复杂的组合和更精准的筛选。错误处理机制也得到改进，能更友好地提示开发者错误。
性能优化方面，要注意选择器的效率。ID 选择器最快，其次是标签选择器，类选择器和属性选择器较慢，伪类选择器最慢。尽量避免使用复杂的选择器，比如全局选择器和属性选择器。
缓存选择器结果能提升性能。比如 var $win = $(window)，之后多次使用 $win，避免重复查询 DOM。
避免频繁操作 DOM。比如批量修改元素样式时，先将元素从 DOM 中 detach ()，修改完再 append () 回去，减少回流和重绘。
? 实际案例：动态表单与交互设计
动态表单是常见需求。比如动态添加单选按钮，点击 “添加选项” 按钮时，用 Jquery 生成新的单选按钮和标签，然后 append 到容器中。还可以添加删除功能，点击 “删除” 按钮时，移除对应的单选按钮。
交互设计中，事件处理和选择器结合使用。比如表单验证，当用户输入时，用 keyup 事件实时检查输入内容是否符合要求。用选择器选中输入框，绑定事件处理函数，判断输入是否为空或格式是否正确。
动态表格的奇偶行变色，可以用伪类选择器。比如 $("tr:even").css ("background-color", "#f0f0f0")，让偶数行有不同的背景色，提升可读性。
❓ 常见问题与解决方案
新手常遇到的问题是如何引入 Jquery 库。可以通过 CDN 引入，比如在 HTML 中添加。也可以下载到本地，通过本地路径引入。
另一个问题是动态元素事件绑定。使用事件委托，将事件绑定在父元素上，能解决动态元素无法响应事件的问题。
性能问题方面，避免使用匿名函数，尽量用具名函数，方便调试和维护。大循环时，优先使用原生 for 循环，比 Jquery 的 each () 方法更快。
该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具。