jQuery精要笔记：技巧与选择器解析

"这是一份关于jQuery的笔记，包含了作者在阅读多本jQuery相关书籍后总结的常见应用和精妙技巧。笔记涵盖了DOM对象与jQuery对象之间的转换、jQuery选择器的使用，包括基本选择器、层次选择器、属性选择器以及过滤选择器等多个方面，适合于一般网站开发中的常见需求。" jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。这份笔记提供了深入理解jQuery的基础和进阶技巧。 **DOM对象和jQuery对象之间的转换** 在JavaScript中，DOM对象是浏览器解析HTML后的节点对象，而jQuery对象则封装了这些DOM对象，提供了更友好的API。要将jQuery对象转换为DOM对象，可以使用以下两种方法： 1. `var domObj = jqueryObj[0]` 或 2. `var domObj = jqueryObj.get(0)` 反之，将DOM对象转换为jQuery对象，只需用 `$()` 将DOM对象包裹起来，如：`var jqueryObj = $(domObj)`。 **jQuery选择器** jQuery的选择器功能强大，能实现精准的元素选取： - **基本选择器** 包括：ID选择器（`$('#id')`）、标签选择器（`$('div')`）和类选择器（`$('.textbox')`）。并集选择器（如：`$('#id, div')`）可以同时选取多个不同条件的元素，交集选择器（如：`$('h1.title')`）则选取具有共同属性的元素。 - **层次选择器** 包括：后代选择器（`$('div span')`）、子选择器（`$('div > span')`）、相邻元素选择器（`$('#menu1 + span')`）和同辈元素选择器（`$('#menu1 ~ span')`），用于选取元素间的特定关系。 - **属性选择器** 允许根据元素属性进行选取，例如选取所有有href属性的元素：`$("[href]")`，或者选取href属性值为特定值的元素：`$("[href='#']")`。 - **过滤选择器** 如：`:has()`、`:contains()`、`:first`、`:last`、`:not()`、`:even` 和 `:odd`，它们可以帮助我们筛选出满足特定条件的元素。 **应用示例** - `$("div:has('#id')")` 选取包含id为"id"的div元素。 - `$("div:contains(test)")` 选取其文本包含"test"的div元素。 - `$("li:first")` 选取所有`<li>`元素中的第一个。 - `$("li:last")` 选取所有`<li>`元素中的最后一个。 - `$("li:not(.three)")` 选取class不是"three"的`<li>`元素。 - `$("li:even")` 选取索引为偶数的`<li>`元素。 - `$("li:odd")` 选取索引为奇数的`<li>`元素。 这份笔记对于jQuery初学者或开发者来说是非常有价值的参考资料，它不仅解释了各种选择器的使用，还展示了如何通过jQuery实现高效的DOM操作，提升网页开发效率。