jQuery基础入门：选择器与常用技巧总结

本篇笔记主要介绍了jQuery的基础学习内容，包括常用的jQuery方法和选择器，以及各种筛选条件的应用。jQuery是一个强大的JavaScript库，简化了DOM操作和事件处理，常用于前端开发中。 **1. DOM Ready与简写函数** `$(document).ready(function() { ... })` 是在文档结构加载完成后再执行的回调函数，用于确保脚本在页面渲染完成后执行，避免了对尚未加载完成的DOM元素的操作。这个表达式可以简写为 `$(function() { ... })`，语法上更为简洁。 **2. 选择器** - ID选择器：`$("#id")`，用于选取具有特定ID的唯一元素。 - 类选择器：`$(".class")`，选择具有指定类名的元素。 - 元素标签选择器：`$("HTML标签")`，选择所有该标签的元素。 - 子元素和后代选择器： - 子元素：`$(“a > b”)`，选取a元素下的所有直接子b元素。 - 后代元素：`$(“a + b”)` 或 `$(“a”).next(“b”)`，选取紧跟在a元素后的第一个b元素。 - 同级元素：`$(“a ~ b”)` 或 `$(“a”).nextAll(“b”)`，选取a元素后所有的b元素。 - 其他关系选择器：如兄弟元素、同辈元素和属性关联的选择器。 **3. 过滤选择器** - 基本过滤：`:first` 和 `:last` 分别选择第一个和最后一个元素。 - 指定索引：`:eq(index)`，选取索引号为index的元素；`:gt(index)` 选取索引大于index的元素；`:lt(index)` 选取索引小于index的元素。 - 逻辑运算：`:not(selector)` 选择不符合给定条件的元素；`:even` 和`:odd` 选取偶数和奇数索引的元素。 - 内容过滤：`:contains(text)` 选取包含特定文本的元素。 - 状态过滤：`:animated` 选取正在执行动画的元素；`:empty` 选取无子元素或文本的元素；`:has(selector)` 选取含有指定选择器元素的元素。 - 状态和可见性：`:parent` 选取有子元素的元素；`:hidden` 选取不可见的元素；`:visible` 选取可见的元素。 **4. 属性过滤选择器** 利用方括号 `[att]`、`[att=val]`、`[att!=val]`、`[att^=val]`、`[att$=val]` 和 `[att*=val]` 来筛选具有特定属性、属性值或属性包含特定字符串的元素。 **5. 子元素过滤选择器** 通过`:nth-child(index/even/odd/equation)` 来选择每个父元素下特定位置的子元素，如第n个、偶数或奇数子元素。`:first-child`、`:last-child` 和`:only-child` 分别用于选择第一个、最后一个和独生子元素。 **6. 表单对象属性过滤选择器** 这些选择器用于针对表单元素的特定属性进行筛选，例如，可以选取具有特定输入类型或状态的表单字段。 掌握这些基础的jQuery选择器和过滤器，能够极大地提升前端开发的效率，使开发者能够方便地操作DOM并实现复杂的效果。熟练运用这些技巧，可以让你更好地理解和构建响应式的Web应用。