jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 变得简单易行,以下是一些常用的 jQuery 方法:
1. **选择元素**
* `$`: 通过 CSS 选择器获取元素,`$('p')` 获取所有的段落。
* `$('#id')`: 通过 ID 选择器获取元素,`$('#myId')` 获取 ID 为 "myId" 的元素。
* `$('.class')`: 通过类选择器获取元素,`$('.myClass')` 获取所有类为 "myClass" 的元素。
* `$('element')`: 通过元素类型选择器获取元素,`$('div')` 获取所有的 div 元素。
2. **DOM 操作**
* `.html()`: 获取或设置元素的 HTML 内容。
* `.text()`: 获取或设置元素的文本内容。
* `.val()`: 获取或设置表单元素的 value 值。
* `.attr()`: 获取或设置元素的属性。
* `.addClass()`, `.removeClass()`, `.toggleClass()`: 分别用于添加、移除或切换元素的类。
3. **事件处理**
* `.click()`, `.mouseover()`, `.keydown()`: 为元素添加点击、鼠标悬停或键盘按键事件。
* `.on()`: 用于绑定事件处理程序,可以同时处理现有和未来元素的事件。
4. **动画和效果**
* `.fadeIn()`, `.slideUp()`: 用于淡入、滑动等动画效果。
* `.animate()`: 自定义动画效果。
5. **Ajax**
* `.ajax()`: 执行各种类型的 Ajax 请求,如 GET、POST 等。
* `.load()`: 从服务器加载数据,并把返回的数据放入匹配的元素中。
6. **其他常用方法**
* `.each()`: 对 jQuery 对象进行迭代。
* `.map()`: 将 jQuery 对象转换为数组。
* `.closest()`: 从当前元素开始向上遍历 DOM,直到找到匹配的元素为止。
* `.next()`, `.prev()`: 获取匹配元素的下一个或上一个同胞元素。
7. **CSS 和维度**
* `.css()`: 获取或设置元素的样式属性。
* `.width()`, `.height()`: 获取或设置元素的宽度和高度。
* `.innerWidth()`, `.innerHeight()`: 获取元素的宽度和高度(包括 padding)。
* `.outerWidth()`, `.outerHeight()`: 获取元素的宽度和高度(包括 padding 和 border)。
8. **遍历 DOM**
* `.children()`: 获取匹配元素的子元素。
* `.parent()`: 获取匹配元素的父元素。
* `.siblings()`: 获取匹配元素的同胞元素。
9. **其他实用方法**
* `.data()`: 存储或检索元素的自定义数据属性。
* `.remove()`: 从 DOM 中移除匹配的元素及其子元素。
* `.empty()`: 清空匹配的元素的内容。
* `.hasClass()`: 检查匹配的元素是否包含特定的类。
* `.append()`, `.prepend()`, `.after()`, `.before()`: 在匹配的元素内部的不同位置添加内容或子元素。