jquery命令汇总,方便使用jquery的朋友

jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了网页中的 DOM 操作、事件处理、动画设计和 AJAX 交互。这个“jQuery 命令汇总”是为那些正在学习或使用 jQuery 的开发者准备的一个实用参考资料。 ### 1. 选择器 jQuery 的选择器功能强大，可以根据不同的规则选择页面中的元素。以下是一些基本的选择器类型： - `*`: 选择所有元素。 - `#id`: 通过 ID 选择元素，如 `$("#lastname")` 选择 ID 为 "lastname" 的元素。 - `.class`: 通过类名选择元素，如 `$(".intro")` 选择所有类名为 "intro" 的元素。 - `element`: 直接通过元素名选择，如 `$("p")` 选择所有 `<p>` 元素。 - `.class.class`: 可以同时选择具有多个类名的元素，如 `$(".intro.demo")` 选择同时包含 "intro" 和 "demo" 类的元素。 - `:first`: 选择第一个匹配的元素，如 `$("p:first")` 选择第一个 `<p>` 元素。 - `:last`: 选择最后一个匹配的元素。 - `:even`: 选择索引为偶数的元素，适用于循环结构。 - `:odd`: 选择索引为奇数的元素。 - `:eq(index)`: 选择索引为指定值的元素，例如 `$("ul li:eq(3)")` 选择列表中的第四个元素（索引从 0 开始）。 - `:gt(no)`: 选择索引大于指定值的元素。 - `:lt(no)`: 选择索引小于指定值的元素。 - `:not(selector)`: 选择不符合指定选择器的元素，如 `$("input:not(:empty)")` 选择所有不为空的输入元素。 - `:header`: 选择所有的标题元素（`<h1>` 至 `<h6>`）。 - `:animated`: 选择当前执行动画的元素。 - `:contains(text)`: 选择包含指定文本的元素，如 `$(":contains('W3School')")` 选择包含 "W3School" 的元素。 - `:empty`: 选择没有子元素（包括文本节点）的元素。 - `:hidden`: 选择所有隐藏的元素。 - `:visible`: 选择所有可见的元素。 - `s1,s2,s3`: 通过逗号分隔的选择器组合，如 `$("th,td,.intro")` 选择匹配任一选择器的元素。 - `[attribute]`: 选择具有指定属性的元素，如 `$("[href]")` 选择所有有 `href` 属性的元素。 - `[attribute=value]`: 选择属性值等于指定值的元素，如 `$("[href='#']")` 选择 `href` 属性值为 "#" 的元素。 - `[attribute!=value]`: 选择属性值不等于指定值的元素。 - `[attribute$=value]`: 选择属性值以指定字符串结尾的元素，如 `$("[href$='.jpg']")` 选择 `href` 属性值以 ".jpg" 结尾的元素。 - `[attribute^=value]`: 选择属性值以指定字符串开头的元素。 - `[attribute*=value]`: 选择属性值中包含指定字符串的元素。 ### 2. 动画与效果 jQuery 提供了丰富的动画效果，如滑动、淡入淡出、显示/隐藏等。常用的方法包括： - `.fadeIn()`, `.fadeOut()`: 使元素淡入或淡出。 - `.slideToggle()`: 通过滑动来切换元素的可见性。 - `.show()`, `.hide()`: 显示或隐藏元素。 - `.toggle()`: 在显示和隐藏之间切换元素。 - `.animate()`: 自定义动画，可以调整元素的 CSS 属性，如宽度、高度、透明度等。 ### 3. DOM 操作 jQuery 提供了操作 DOM 的简便方法： - `.append()`: 在元素内部的末尾添加内容。 - `.prepend()`: 在元素内部的开头添加内容。 - `.before()`: 在元素之前插入内容。 - `.after()`: 在元素之后插入内容。 - `.html()`: 获取或设置元素的 HTML 内容。 - `.text()`: 获取或设置元素的文本内容。 - `.val()`: 获取或设置表单元素的值。 - `.attr()`: 获取或设置元素的属性值。 - `.removeAttr()`: 移除元素的属性。 ### 4. 事件处理 jQuery 的事件处理简化了 JavaScript 中的事件绑定： - `.on()`: 绑定事件监听器，可以用于多种类型的事件。 - `.off()`: 解除事件监听器。 - `.click()`, `.mouseover()`, `.mouseout()`, `.keydown()`: 简化的事件绑定方法，分别对应点击、鼠标悬停、鼠标离开和键盘按键事件。 ### 5. AJAX jQuery 的 AJAX 功能强大，简化了异步数据请求： - `.ajax()`: 发起 AJAX 请求的通用方法，支持 GET 和 POST 等多种请求方式。 - `.get()`, `.post()`: 简化 GET 和 POST 请求的方法。 - `.load()`: 加载指定 URL 的内容到元素中。 - `.getJSON()`: 发送 GET 请求并解析 JSON 数据。 ### 6. 其他 - `.each()`: 遍历集合中的每个元素。 - `.size()`: 返回集合中元素的数量（在 jQuery 3.0 被 `.length` 替代）。 - `.ready()`: 当文档加载完成时执行函数。 - `.extend()`: 合并对象，扩展 jQuery 函数或插件。 jQuery 的这些命令和方法只是其庞大功能的一部分。通过熟练掌握这些基础，开发者可以更高效地编写和维护网页应用，提高开发效率。对于想要深入学习 jQuery 的开发者来说，理解并熟练运用这些命令是非常重要的。