jQuery基础与难点详解：选择器、可见性及插入方法

本篇jQuery笔记主要涵盖了JavaScript库jQuery的基础知识以及一些实用的选择器技巧，这些选择器在网页开发中对于动态操作DOM（Document Object Model）具有重要作用。文章详细介绍了以下几个关键知识点： 1. 内容过滤选择器： - `:contains(text)`: 用于选取含有指定文本内容的元素，如`$("p:contains('jQuery')")`将返回包含"jQuery"文本的段落元素。 - `:empty`: 选择不包含任何子元素或文本内容的元素，如`$("div:empty")`。 - `:has(selector)`: 选取拥有匹配其他选择器的子元素的元素，例如`$(".container:has(input)")`会选择包含输入框的`.container`元素。 - `:parent`: 选择拥有子元素的元素，区分于`:not(:empty)`，后者还包括文本元素。 2. 可见性过滤选择器： - `:hidden`: 匹配所有不可见的元素，包括display:none或visibility:hidden的元素。 - `:visible`: 匹配所有可见的元素，即默认展示且非hidden的元素。 3. 属性过滤选择器： - `[attribute]`: 选取拥有指定属性的元素。 - `[attribute=value]`: 匹配属性值等于指定值的元素。 - 其他形式的属性选择器，如`[attribute^=value]`（以`value`开头）、`[attribute*=value]`（包含`value`）、`[attribute$=value]`（以`value`结尾）、`[attribute|=value]`（属性值等于`value`或以`value`开头加连接符-）、`[attribute~=value]`（属性值包含`value`列表中的一个）。 4. 子元素过滤选择器： - `:nth-child(index/even/odd/equation)`: 通过索引、奇偶性或数学表达式来选择子元素。 - `.first-child`, `.last-child`, `.only-child` 用于选择特定位置的子元素。 - `:nth-child(3n)` 可以选取索引为3的倍数的元素。 5. 特殊字符处理： - 对于特殊字符如`#`, `.`, `(`, `)`等，需要在选择器中进行转义，例如`$("#id\\#b")`。 - 选择器中的空格至关重要，它们决定了是后代选择器还是过滤选择器，例如`div p`和`div p`的含义不同。 6. 插入节点的方法： - 使用`<li>`标签创建HTML元素，并通过`$("<li>香蕉</li>")`将其转换为jQuery对象，然后可以使用`append()`, `prepend()`, 或 `insertBefore()`等方法插入到文档中。 这些选择器和方法是前端开发者日常工作中常用的jQuery技术，理解并熟练运用它们能够帮助提高代码的效率和可维护性。学习时，不仅要掌握语法，还要理解背后的逻辑，以便在实际项目中灵活应用。