jQuery | 选择器和事件方法

jQuery 是一个快速、简洁的 JavaScript 库，可简化 HTML 文档遍历、事件处理、动画操作和 Ajax 交互等操作。在 jQuery 中，选择器和事件方法非常重要，是使用 jQuery 开发的必备知识。

选择器

在 jQuery 中，选择器用于选择 HTML 中的元素，类似于 CSS 的选择器。下面是一些常见的选择器：

基本选择器

• $(this)：表示当前选中的元素。
• $("element")：表示选择所有名称为 "element" 的元素。
• $(".class")：表示选择所有类名为 "class" 的元素。
• $("#id")：表示选择 ID 为 "id" 的元素。

层级选择器

层级选择器用于选择特定元素下的子元素、后代元素等。例如：

• $("parent>child")：表示选择 parent 元素下的 child 子元素。
• $("ancestor descendant")：表示选择 ancestor 祖先元素下的所有 descendant 后代元素。

过滤选择器

过滤选择器用于根据特定条件筛选元素。例如：

• $("element:first")：表示选择第一个名为 "element" 的元素。
• $("element:last")：表示选择最后一个名为 "element" 的元素。
• $("element:even")：表示选择所有偶数位置的名为 "element" 的元素。
• $("element:odd")：表示选择所有奇数位置的名为 "element" 的元素。
• $("element:eq(n)")：表示选择第 n 个名为 "element" 的元素。
• $("element:contains(text)")：表示选择包含文本 "text" 的名为 "element" 的元素。

事件方法

在 jQuery 中，事件方法用于响应页面中的各种事件，例如点击、鼠标移动等。下面是一些常见的事件方法：

鼠标事件

• .click()：表示点击事件。
• .dblclick()：表示双击事件。
• .mouseover()：表示鼠标移入事件。
• .mouseout()：表示鼠标移出事件。
• .mousemove()：表示鼠标移动事件。
• .mousedown()：表示鼠标按下事件。
• .mouseup()：表示鼠标松开事件。

表单事件

• .submit()：表示表单提交事件。
• .focus()：表示获得焦点事件。
• .blur()：表示失去焦点事件。
• .change()：表示元素值或状态变化事件。

键盘事件

• .keydown()：表示键盘按下事件。
• .keyup()：表示键盘松开事件。
• .keypress()：表示键盘按键事件。

示例代码

// 选择所有类名为 "my-class" 的元素，并给它们添加点击事件
$(".my-class").click(function() {
  // 执行代码
});

// 选择 ID 为 "my-id" 的元素，并给它添加鼠标移入事件
$("#my-id").mouseover(function() {
  // 执行代码
});

// 选择所有标题为 "h1" 的元素，并给它们添加双击事件
$("h1").dblclick(function() {
  // 执行代码
});

以上代码演示了如何使用 jQuery 选择器和事件方法对页面中的元素进行操作。在实际开发中，开发人员可以根据项目需求选择不同的选择器和事件方法，实现不同的交互效果。