50个jQuery常用操作技巧汇总

本篇文章主要介绍了jQuery中常用的一些操作技巧和方法，涵盖了多个方面，包括选择器、事件处理、CSS类操作以及媒体查询等。以下是对这些知识点的详细解析： 1. **选择器与过滤**: - `//δǶ׵Ĺ//־תֹ׵`: 这段代码使用了`:not()`选择器来排除拥有`.selected`类的元素。`$(formToLookAt + "input:checked").each(function() { ... })`部分则动态筛选出被选中的输入框的关联类名。 2. **数组操作与jQuery集合**: - `var allItems = $("div.item"); var keepList = $("div#container1 div.item");`：这段代码定义了两个jQuery对象，分别代表所有的项目和需要保留的列表。通过`.filter()`方法，根据特定条件（比如`$(this).attr("name")`）筛选列表元素。 3. **事件处理与状态检查**: - `.has()`方法用来检查元素是否包含指定的子元素，如`$("input").has(".email").addClass("email_icon");`，这在验证表单输入或显示状态图标时非常有用。 4. **媒体查询与样式修改**: - `$('link[media="screen"]').attr('href', 'Alternative.css');`：使用jQuery选择器针对`media="screen"`的链接进行样式切换，当页面视口尺寸适合屏幕时应用新的样式。 5. **复选框和状态判断**: - `var in_stock = $('#shopping_cart_items input.is_in_stock');`：这个变量用于获取购物车清单中状态为“库存”的复选框，后续可能用于更新库存显示或者执行相关逻辑。 6. **类操作与动画效果**: - `toggleClass()`函数用于切换元素的类，如果元素已经有了某个类，则移除它，反之则添加。例如，`a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton')`，此操作在按钮颜色切换上非常常见。 总结起来，本文档提供了一个实用的jQuery操作集锦，涵盖了选择器、动态筛选、事件绑定、样式控制以及用户交互等常见场景。熟练掌握这些技巧，可以帮助开发者更高效地编写JavaScript代码，实现丰富的前端交互效果。