JQuery教程自学笔记

### JQuery教程自学笔记知识点梳理 #### 一、概述 **JQuery** 是一款跨浏览器的 JavaScript 函式库，它的核心理念在于简化 HTML 和 JavaScript 的交互。通过提供一系列的便捷函数，它使得开发者能更容易地操作文档对象模型（DOM）、处理事件、执行动画等。 - **开放源代码**: JQuery 是开源的，遵循 MIT 许可证，这意味着开发者可以自由地使用、复制、修改和分发 JQuery 的源代码。 - **特性**: - 跨浏览器的 DOM 元素选择 - 支持 CSS1-3 与基本的 XPath（JQuery 1.2 版本之后默认不再支持 XPath，但可通过插件支持） - 事件处理 - CSS 操纵 - 动画效果（如移动显示位置、淡入、淡出） - AJAX 支持 - 可扩展性 - 工具函数（如浏览器版本检测、each 函数等） - JavaScript 插件支持 #### 二、JQuery技术综述 ##### 2.1 JQuery基本语法 JQuery 的基本语法格式为 `$(selector).action()`: - **$** 符号表示这是一个 JQuery 表达式。 - **selector** 用于选取文档中的元素，其语法类似于 CSS 选择器。 - **action** 定义了对所选元素的操作。 例如： - `$(this).hide()` 隐藏当前元素。 - `$("p").hide()` 隐藏所有 `<p>` 元素。 - `$(".test").hide()` 隐藏所有类名为 `test` 的元素。 - `$("#test").hide()` 隐藏具有 ID 为 `test` 的元素。 ##### 2.1.1 JQuery选择器 JQuery 提供了多种选择器来方便地选取元素： - **基本选择器**: - `#id`: 选取具有指定 ID 的元素。 - `.class`: 选取具有指定类名的所有元素。 - `element`: 选取所有的指定元素类型。 - **层次选择器**: - `parent > child`: 选取 parent 的直接子元素。 - `prev + next`: 选取紧接在 prev 后面的 next 元素。 - **属性选择器**: - `[attribute]`: 选取具有指定属性的元素。 - `[attribute=value]`: 选取具有指定属性且值等于 value 的元素。 - **过滤选择器**: - `:first`: 选取第一个元素。 - `:last`: 选取最后一个元素。 - `:even`: 选取索引为偶数的元素。 - `:odd`: 选取索引为奇数的元素。 ##### 2.2 JQuery事件响应 JQuery 提供了一种简单的方式来绑定事件处理器到元素，支持各种常见的事件类型： - **常见的 JQuery 事件** 包括但不限于： - `click()`: 单击事件。 - `dblclick()`: 双击事件。 - `hover()`: 鼠标悬停事件。 - `focus()`: 获取焦点事件。 - `blur()`: 失去焦点事件。 ##### 2.2.1 淡入淡出效果 - **`fadeIn()`**: 逐渐显示隐藏的元素。 - **`fadeOut()`**: 逐渐隐藏已显示的元素。 - **`fadeTo()`**: 逐渐改变元素的透明度。 ##### 2.2.2 滑动效果 - **`slideUp()`**: 将元素向上滑动隐藏。 - **`slideDown()`**: 将元素向下滑动显示。 - **`slideToggle()`**: 在元素显示和隐藏之间切换。 ##### 2.2.3 动画效果 - **`animate()`**: 执行自定义动画。 - **`stop()`**: 停止正在运行的动画。 ##### 2.2.4 回调函数 - **回调函数** 是在动画完成后执行的函数，通常作为动画方法的参数传递。 ##### 2.2.5 方法链 - **方法链** 是一种将多个操作组合在一起执行的技术，通过连续调用 JQuery 方法来实现。 ##### 2.3 HTML操作 - **HTML取值**: 使用 `html()` 方法获取元素的 HTML 内容。 - **HTML赋值**: 使用 `html()` 方法设置元素的 HTML 内容。 - **添加 HTML 元素**: 使用 `append()`, `prepend()`, `after()`, `before()` 等方法添加新的 HTML 元素。 - **设置或取得元素的 CSS class**: 使用 `addClass()`, `removeClass()`, `toggleClass()`, `hasClass()` 等方法来操作元素的 CSS 类。 - **读写 HTML 元素的 CSS 属性**: 使用 `css()` 方法来读取或设置元素的 CSS 属性。 - **操作 HTML 元素的长宽大小**: 使用 `width()` 和 `height()` 方法来读取或设置元素的尺寸。 #### 三、JQuery UI JQuery UI 是基于 JQuery 的用户界面组件库，它提供了一系列预定义的用户界面组件，如拖放、排序、对话框等，以帮助开发者快速构建丰富的交互式用户界面。 - **初始化**: 设置组件的基本配置。 - **方法**: 用于操作组件的状态或行为。 - **通用方法**: 所有组件都支持的方法，如 `destroy()` 用于销毁组件。 - **事件**: 用户与组件交互时触发的事件，如点击、拖动等。 - **组件示例**: - **Accordion 组件** (手风琴式折叠面板) - **Autocomplete 组件** (自动完成建议) - **Button 组件** (按钮) - **Datepicker 组件** (日期选择器) - **Dialog 组件** (对话框) - **Menu 组件** (菜单) - **Progressbar 组件** (进度条) - **Slider 组件** (滑块) - **Spinner 组件** (数值微调框) - **Tab 组件** (选项卡) - **Tooltip 组件** (提示框) 以上是对 JQuery 教程自学笔记的主要知识点总结，涵盖了从基础语法到高级组件的应用。这些内容不仅为初学者提供了学习的起点，也为进阶用户提供了深入探索的方向。