JQuery基础教程：选择器与过滤方法解析

"这篇文档是关于JQuery基础的笔记，主要涵盖了JQuery的选择器、层级选择器和过滤选择器的使用方法，适用于互联网开发中的DOM操作。" 在JQuery库中，"$"符号是一个非常核心的标识，它实际上是对JQuery函数的别名。`$(document).ready(function() {...})` 和 `$(function() {...})` 是等价的，它们都是确保在HTML文档加载完成后执行的代码，这样可以避免因页面未完全加载而引发的问题。JQuery的一个特点是它具有容错机制，即使在JQuery发生错误时，也不会像JavaScript那样抛出错误，而是默默地处理错误，这提高了程序的稳定性。 **1. JQuery选择器** - **基本选择器**：`$("#idName")` 用于选取id为"idName"的元素；`$(".className")` 用于选取class为"className"的元素；`$("tagName")` 用于选取所有标签名为"tagName"的元素；`$("*")` 则匹配所有元素；`$("li*")` 匹配所有li元素的子元素。 - **群组匹配**：`$("selector1,selector2")` 可以同时选取符合"selector1"或"selector2"的元素。 - **限定选择器**：`$("box.div")` 会选取父元素为box的div元素。 **2. 层级选择器** - **后代选择器**：`$("ab")` 选取所有a元素的后代b元素。 - **子代选择器**：`$("a>b")` 选取a元素的直接子元素b。 - **相邻兄弟选择器**：`$("a+b")` 选取紧跟在a元素后面的b元素。 - **后续兄弟选择器**：`$("a~b")` 选取a元素后面的所有同级b元素。 **3. 过滤选择器** - **基本过滤**： - `$("li:first")` 选取第一个li元素。 - `$("li:last")` 选取最后一个li元素。 - `$("li:eq(index)")` 选取索引为index的li元素（索引从0开始）。 - **范围过滤**： - `$("li:lt(index)")` 选取索引小于index的所有li元素。 - `$("li:gt(index)")` 选取索引大于index的所有li元素。 - `$("li:not(selector)")` 选取不匹配"selector"的li元素。 - **行过滤**： - `$("li:odd")` 选取索引为奇数的li元素（即偶数行）。 - `$("li:even")` 选取索引为偶数的li元素（即奇数行）。 **4. 属性过滤选择器** - `$("tag[attribute]")` 选取具有指定属性"attribute"的元素。 - `$("tag[attribute=value]")` 选取属性"attribute"等于"value"的元素。 - `$("tag[attribute^=value]")` 选取属性"attribute"以"value"开头的元素。 - `$("tag[attribute$=value]")` 选取属性"attribute"以"value"结尾的元素。 - `$("tag[attribute!=value]")` 选取属性"attribute"不等于"value"的元素。 **5. 子元素选择器** - `$("li:first")` 选取所有匹配元素中的第一个。 - `$("li:first-child")` 选取每个父元素中的第一个li子元素。 这些选择器极大地简化了DOM操作，使得开发者可以更高效地定位和操作网页上的元素。了解并熟练掌握这些选择器对于进行网页动态效果的实现和交互设计至关重要。在实际开发中，结合使用这些选择器，可以实现诸如事件绑定、元素增删改查等各种功能，大大提高开发效率。