## jQuery语法

简介

jQuery是一个快速、简洁的JavaScript框架，旨在简化HTML文档遍历、事件处理、动画效果和Ajax交互。它通过提供易于使用的API来实现这些功能，从而减少了开发者编写JavaScript代码的工作量，并提高了代码的可读性和可维护性。 学习jQuery的核心在于理解它的选择器和方法。### 一、 选择器jQuery 的核心功能是基于其强大的选择器，它允许你使用 CSS 选择器语法来选择 HTML 元素。 这使得操作DOM元素变得非常便捷。#### 1.1 基本选择器

`$(selector)`: 这是 jQuery 的核心函数，它接收一个 CSS 选择器作为参数，并返回包含匹配元素的 jQuery 对象。

`$("#myElement")`: 选择ID为 "myElement" 的元素。

`$(".myClass")`: 选择所有 class 为 "myClass" 的元素。

`$("element")`: 选择所有指定类型的元素 (例如: `$("p")`, `$("div")`)

`$("

")`: 选择所有元素。#### 1.2 层次选择器

`$("ancestor descendant")`: 选择 ancestor 元素下的所有 descendant 元素。

`$("parent > child")`: 选择 parent 元素的直接子元素 child。

`$("prev + next")`: 选择紧跟在 prev 元素后的 next 元素。

`$("prev ~ siblings")`: 选择 prev 元素之后的所有 siblings 元素。#### 1.3 过滤选择器

``:first`: 选择第一个元素。

``:last`: 选择最后一个元素。

``:even`: 选择偶数索引的元素。

``:odd`: 选择奇数索引的元素。

``:eq(index)`: 选择索引为 index 的元素。

``:gt(index)`: 选择索引大于 index 的元素。

``:lt(index)`: 选择索引小于 index 的元素。

``:header`: 选择所有标题元素 (

到

)。

``:animated`: 选择正在执行动画的元素。

``:contains(text)`: 选择包含指定文本的元素。#### 1.4 属性选择器

`$[attribute]`: 选择拥有指定属性的元素。

`$[attribute=value]`: 选择属性值为 value 的元素。

`$[attribute!=value]`: 选择属性值不等于 value 的元素。

`$[attribute^=value]`: 选择属性值以 value 开头的元素。

`$[attribute$=value]`: 选择属性值以 value 结尾的元素。

`$[attribute

=value]`: 选择属性值包含 value 的元素。#### 1.5 表单选择器

`:input`: 选择所有表单元素。

`:text`: 选择文本输入框。

`:password`: 选择密码输入框。

`:radio`: 选择单选按钮。

`:checkbox`: 选择复选框。

`:submit`: 选择提交按钮。

`:reset`: 选择重置按钮。

`:button`: 选择按钮。### 二、 jQuery 方法jQuery 提供了丰富的操作 DOM 元素和处理事件的方法。 下面列举一些常用的方法：#### 2.1 DOM 操作

`text()`：获取或设置元素的文本内容。

`html()`：获取或设置元素的 HTML 内容。

`val()`：获取或设置表单元素的值。

`attr()`：获取或设置元素的属性。

`css()`：获取或设置元素的样式。

`addClass()`：为元素添加 class。

`removeClass()`：从元素移除 class。

`toggleClass()`：切换元素的 class。

`append()`：在元素内部末尾添加内容。

`prepend()`：在元素内部开头添加内容。

`after()`：在元素之后添加内容。

`before()`：在元素之前添加内容。

`remove()`：移除元素。

`empty()`：清空元素内容。#### 2.2 事件处理

`click()`：绑定 click 事件。

`hover()`：绑定鼠标悬停事件。

`focus()`：绑定获得焦点事件。

`blur()`：绑定失去焦点事件。

`submit()`：绑定表单提交事件。

`on()`：绑定多个事件。

`off()`：解除事件绑定。#### 2.3 动画效果

`show()`：显示元素。

`hide()`：隐藏元素。

`fadeIn()`：淡入显示元素。

`fadeOut()`：淡出隐藏元素。

`slideUp()`：向上滑动隐藏元素。

`slideDown()`：向下滑动显示元素。

`animate()`：自定义动画效果。#### 2.4 AJAX

`$.ajax()`：执行 AJAX 请求。

`$.get()`：执行 GET 请求。

`$.post()`：执行 POST 请求。### 三、 示例以下是一个简单的示例，展示如何使用 jQuery 选择元素并修改其文本内容：```javascript $(document).ready(function(){$("#myParagraph").text("This text has been changed by jQuery!"); }); ```这个代码片段会在文档加载完成后，找到 ID 为 "myParagraph" 的段落元素，并将它的文本内容更改为 "This text has been changed by jQuery!"。

总结

jQuery 提供了一个简洁而强大的 API，极大地简化了 JavaScript 开发。 熟练掌握其选择器和常用方法，能够显著提高前端开发效率。 本文仅涵盖了 jQuery 的一部分语法和功能，建议读者参考官方文档了解更多详细信息。

jQuery语法**简介**jQuery是一个快速、简洁的JavaScript框架，旨在简化HTML文档遍历、事件处理、动画效果和Ajax交互。它通过提供易于使用的API来实现这些功能，从而减少了开发者编写JavaScript代码的工作量，并提高了代码的可读性和可维护性。 学习jQuery的核心在于理解它的选择器和方法。

一、 选择器jQuery 的核心功能是基于其强大的选择器，它允许你使用 CSS 选择器语法来选择 HTML 元素。 这使得操作DOM元素变得非常便捷。

1.1 基本选择器* `$(selector)`: 这是 jQuery 的核心函数，它接收一个 CSS 选择器作为参数，并返回包含匹配元素的 jQuery 对象。* `$("

myElement")`: 选择ID为 "myElement" 的元素。* `$(".myClass")`: 选择所有 class 为 "myClass" 的元素。* `$("element")`: 选择所有指定类型的元素 (例如: `$("p")`, `$("div")`)* `$("*")`: 选择所有元素。

1.2 层次选择器* `$("ancestor descendant")`: 选择 ancestor 元素下的所有 descendant 元素。 * `$("parent > child")`: 选择 parent 元素的直接子元素 child。 * `$("prev + next")`: 选择紧跟在 prev 元素后的 next 元素。 * `$("prev ~ siblings")`: 选择 prev 元素之后的所有 siblings 元素。

1.3 过滤选择器* ``:first`: 选择第一个元素。 * ``:last`: 选择最后一个元素。 * ``:even`: 选择偶数索引的元素。 * ``:odd`: 选择奇数索引的元素。 * ``:eq(index)`: 选择索引为 index 的元素。 * ``:gt(index)`: 选择索引大于 index 的元素。 * ``:lt(index)`: 选择索引小于 index 的元素。 * ``:header`: 选择所有标题元素 (

到

)。 * ``:animated`: 选择正在执行动画的元素。 * ``:contains(text)`: 选择包含指定文本的元素。

1.4 属性选择器* `$[attribute]`: 选择拥有指定属性的元素。 * `$[attribute=value]`: 选择属性值为 value 的元素。 * `$[attribute!=value]`: 选择属性值不等于 value 的元素。 * `$[attribute^=value]`: 选择属性值以 value 开头的元素。 * `$[attribute$=value]`: 选择属性值以 value 结尾的元素。 * `$[attribute*=value]`: 选择属性值包含 value 的元素。

1.5 表单选择器* `:input`: 选择所有表单元素。 * `:text`: 选择文本输入框。 * `:password`: 选择密码输入框。 * `:radio`: 选择单选按钮。 * `:checkbox`: 选择复选框。 * `:submit`: 选择提交按钮。 * `:reset`: 选择重置按钮。 * `:button`: 选择按钮。

二、 jQuery 方法jQuery 提供了丰富的操作 DOM 元素和处理事件的方法。 下面列举一些常用的方法：

2.1 DOM 操作* `text()`：获取或设置元素的文本内容。 * `html()`：获取或设置元素的 HTML 内容。 * `val()`：获取或设置表单元素的值。 * `attr()`：获取或设置元素的属性。 * `css()`：获取或设置元素的样式。 * `addClass()`：为元素添加 class。 * `removeClass()`：从元素移除 class。 * `toggleClass()`：切换元素的 class。 * `append()`：在元素内部末尾添加内容。 * `prepend()`：在元素内部开头添加内容。 * `after()`：在元素之后添加内容。 * `before()`：在元素之前添加内容。 * `remove()`：移除元素。 * `empty()`：清空元素内容。

2.2 事件处理* `click()`：绑定 click 事件。 * `hover()`：绑定鼠标悬停事件。 * `focus()`：绑定获得焦点事件。 * `blur()`：绑定失去焦点事件。 * `submit()`：绑定表单提交事件。 * `on()`：绑定多个事件。 * `off()`：解除事件绑定。

2.3 动画效果* `show()`：显示元素。 * `hide()`：隐藏元素。 * `fadeIn()`：淡入显示元素。 * `fadeOut()`：淡出隐藏元素。 * `slideUp()`：向上滑动隐藏元素。 * `slideDown()`：向下滑动显示元素。 * `animate()`：自定义动画效果。

2.4 AJAX* `$.ajax()`：执行 AJAX 请求。 * `$.get()`：执行 GET 请求。 * `$.post()`：执行 POST 请求。

三、 示例以下是一个简单的示例，展示如何使用 jQuery 选择元素并修改其文本内容：```javascript $(document).ready(function(){$("

myParagraph").text("This text has been changed by jQuery!"); }); ```这个代码片段会在文档加载完成后，找到 ID 为 "myParagraph" 的段落元素，并将它的文本内容更改为 "This text has been changed by jQuery!"。**总结**jQuery 提供了一个简洁而强大的 API，极大地简化了 JavaScript 开发。 熟练掌握其选择器和常用方法，能够显著提高前端开发效率。 本文仅涵盖了 jQuery 的一部分语法和功能，建议读者参考官方文档了解更多详细信息。