jQuery全攻略：选择器、筛选器与常用事件详解

本篇文章深入介绍了jQuery库中常见的选择器、筛选器以及事件处理的相关知识，对前端开发者或自学jQuery的人来说具有很高的实用价值。首先，我们来详细探讨jQuery的选择器： 1. 基础选择器： - `$(“#”)`: 通过ID选择器，例如`$("#my")`用于选取ID为"my"的元素。 - `$(“.”)`: 类选择器，如`$(".main")`，匹配所有类为"main"的元素。 - `$(“标签名称”)`: 标签选择器，如`$("li")`，选择所有`<li>`标签。 2. 层级选择器： - `$(“.bgdiv")`: 选择class为"bg"的div元素下的所有后代元素。 - `$(“.my>li")`: 选择class为"my"元素直接子节点中的所有li元素。 - `$(“#hid+img")`: 选取id为"hid"后紧跟着的img元素。 - `$(“#some~[title]")`: 选择id为"some"的对象后面所有带有"title"属性的元素。 3. 筛选器： - `$('li:first')` 和 `$('li:last')`: 分别选取第一个和最后一个li元素。 - `$("tr:even")`, `$("tr:odd")`, `$("tr:eq(1)")`, `$("tr:gt(0)")`, `$("tr:lt(2)")`: 通过索引筛选行元素，如偶数行、奇数行等。 - `$(":focus")`: 当前获得焦点的元素。 - `$(":header")`: 匹配所有h1到h6标签。 - `$(":animated")`: 正在执行动画效果的元素。 4. 内容选择器： - `$("div:contains('nick')")`: 包含文本"nick"的div元素。 - `$("td:empty")`: 不包含任何子元素或文本的td元素。 - `$("div:has(p)")`: 包含至少一个p元素的div。 - `$("td:parent")`: 有子元素或文本的td元素。 5. 表单选择器： - `$(":input")`: 匹配各种输入控件，包括input、textarea、select和button。 - `$(":text")`, `$(":password")`, `$(":radio")`, `$(":checkbox")`, `$(":submit")`, `$(":reset")`, `$(":button")`, `$(":file")`: 分别对应不同类型的表单元素。 - `$("input:checked")`: 选取被选中的input元素。 - `$("selectoption:"`: 未完成的选择器，可能缺失冒号后的条件，但通常用于选择某个选项。 通过理解这些选择器和筛选器，开发者可以更高效地定位、操作DOM元素，实现动态网页交互。同时，结合事件处理（如click(), hover()等）可以创建丰富的用户界面响应。这份文档为初学者和进阶者提供了宝贵的学习资料，无论是初次接触jQuery还是巩固现有知识，都是一份不可多得的参考资料。