jQuery深度笔记：从基础到高级

一、jQuery简介

  jQuery是一个快速、小巧且富有特色的JavaScript库。自2006年诞生以来，它已经成为Web开发中最受欢迎的工具之一。通过简化和统一JavaScript API，jQuery使得开发者能够更高效地编写交互式网页和复杂的前端应用。

二、选择器

  jQuery的选择器是其核心特性之一，它使得定位HTML元素变得非常简单。以下是选择器的一些示例：

1. 基础选择器：

   #id: 选择具有特定ID的元素。
   .class: 选择具有特定类的元素。
   element: 选择特定类型的元素。
   示例代码：

// 改变ID为myId的元素的背景颜色
$("#myId").css("background-color", "red");

// 隐藏所有类为myClass的元素
$(".myClass").hide();

2. 层次选择器：

   ancestor descendant: 选择给定祖先元素的所有后代元素。
   示例代码：

// 选择p元素内的所有span元素
$("p span").css("color", "blue");

3. 过滤选择器：

   :first, :last: 选择第一个或最后一个匹配的元素。
   :even, :odd: 选择偶数或奇数匹配的元素。
   示例代码：

// 选择第一个li元素
$("li:first").css("text-decoration", "underline");

4. 属性选择器：

   [attribute]: 选择带有指定属性的元素。
   示例代码：

// 选择所有带有title属性的元素并改变它们的背景颜色
$("input[title]").css("background-color", "yellow");

5. 表单选择器：

   :input: 选择所有输入元素（如<input>, <textarea>, <select>等）。
   示例代码：

// 为所有输入框添加一个红色边框
$("input:input").css("border-color", "red");

三、DOM操作

jQuery提供了多种方法来操作DOM。例如：

• .text(): 获取或设置匹配元素的文本内容。
• .html(): 获取或设置匹配元素的HTML内容。
• .val(): 获取或设置匹配元素的表单字段值。
• .attr(): 获取或设置匹配元素的属性值。
• .css(): 获取或设置匹配元素的样式属性。
• .addClass(), .removeClass(): 添加或移除匹配元素的类。
• .hide(), .show(): 隐藏或显示匹配元素。
• .toggle(): 切换匹配元素的可见状态。

示例代码：

// 设置文本内容
$("#myId").text("Hello World");

// 获取HTML内容
var htmlContent = $(".myClass").html();
console.log(htmlContent); // 输出：<div>Some content</div>

四、事件处理

jQuery简化了事件处理，使得添加和删除事件监听器更加容易。例如：

• .click(): 绑定点击事件。
• .hover(): 绑定鼠标悬停事件。
• .focus(): 绑定焦点事件。
• .on(): 绑定多种事件。
• .off(): 解绑事件。

示例代码：

// 绑定点击事件并执行函数
$("#myButton").click(function() {
  alert("Button clicked!");
});