JQuery基础教程：选择器、DOM操作与事件

"JQuery基础.docx" jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。以下是对标题和描述中所述的jQuery基础知识的详细说明： 1. 基本事项 - 引用文件：在网页中使用jQuery，首先需要引入jQuery库的JS文件，通常通过`<script>`标签来完成，如`<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>`。 - `$()`和`$(document).ready()`：jQuery的核心是`$`函数，它可以用于选择DOM元素。`$(document).ready()`确保在DOM完全加载和解析后执行回调函数。`$(function(){});`是`$(document).ready()`的简写形式。 2. 选择器 - 基本选择器：如`$("#id")`用于选取ID为指定值的元素。 - 层次选择器：如`$("div p")`选取所有在`div`元素内的`p`元素。 - 过滤选择器：`eq(index)`选取指定索引位置的元素，`:contains(text)`选取包含指定文本的元素，`[name='attrName']`选取具有指定属性名的元素。 - 子元素过滤器：`:nth-child(index)`选取父元素的第n个子元素。 - 表单选择器：`:select`选取所有的`<select>`元素。 - 表单对象属性过滤器：`:selected`选取被选中的元素，如`$("option:selected")`选取选中的`<option>`元素。 3. DOM操作 - 创建元素：`$("<li title='...'>文本</li>")`动态创建新的HTML元素并将其添加到页面。 - 插入节点：`$("h3").append("<b>文本</b>")`将文本追加到所有`<h3>`元素的末尾，`prepend`则在开头插入，`appendTo`和`prependTo`类似，但接受一个容器元素作为参数。 - 删除节点：`$("ol li").eq(index).remove();`删除指定索引的`<li>`元素。 - 复制节点：`$(this).clone(true).appendTo("标签类别");`复制当前元素并将其添加到指定的标签类别下，`true`表示保留事件绑定。 - 替换节点：`$("h3").replaceWith("<b>文本</b>");`将所有`<h3>`替换为`<b>`元素。 - 包裹节点：`$("li").wrapAll("<b></b>");`将所有`<li>`元素包裹在一个`<b>`元素内。 4. 事件 - `click`事件：当用户点击元素时触发。 - `change`事件：当表单元素的值改变时触发，如`input`或`select`。 - `trigger("event")`：手动触发指定的事件，如`$("input").trigger("change");`。 - 鼠标事件： - `mouseover`：当鼠标进入元素区域时触发。 - `mouseout`：当鼠标离开元素或其子元素时触发。 - `mouseleave`：仅当鼠标离开元素本身时触发，不包括子元素。 jQuery的这些基础知识构成了其强大的功能，使开发者能够高效地处理DOM操作、创建复杂的用户交互和流畅的动画效果。通过熟练掌握这些概念，开发者可以编写出更加简洁和高效的JavaScript代码。