jQuery 基础语法使用指南

点进来你就是我的人了
博主主页：戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔

---

目录

1. 引入 jQuery

2. jQuery 语法

3. 选择器

4. 事件

5. 效果和动画

6. DOM 操作

7. AJAX

8. 遍历

结语

---

---

在编写 Web 应用时，jQuery 是我们不可或缺的工具，它使 JavaScript 变得简洁易用。这篇博文将为你讲述 jQuery 的基础语法，让你能够迅速上手这个强大的库。

1. 引入 jQuery

在使用 jQuery 之前，你需要在 HTML 中引入它。你可以下载 jQuery 库并将其放入项目中，也可以直接使用 CDN。以下是一个示例：

2. jQuery 语法

jQuery 语法设计得非常简洁，基本结构为： $(selector).action()

• $ 符号定义 jQuery
• selector 是 jQuery 的查询表达式，用来查找元素
• action() 是在选中的元素上执行的操作

例如，以下代码会在段落被点击时隐藏该段落：

$("p").click(function(){
  $(this).hide();
});

3. 选择器

jQuery 提供了丰富的选择器，这些选择器基于 CSS 选择器，但比 CSS 选择器更强大：

• 标签选择器：$("p") 选取所有的

  元素。

• ID 选择器：$("#myId") 选取 id 为 "myId" 的元素。
• 类选择器：$(".myClass") 选取 class 为 "myClass" 的所有元素。
• 属性选择器：$("input[name='email']") 选取 name 属性为 'email' 的 input 元素。

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，隐藏所有 class 为 "intro" 的 
 元素
    $("p.intro").hide();
  });
});

4. 事件

jQuery 提供了处理事件的强大机制。例如：

• 点击事件：$('div').click(function(){ /* code */ })
• 鼠标进入事件：$('div').mouseenter(function(){ /* code */ })
• 鼠标离开事件：$('div').mouseleave(function(){ /* code */ })
• 文档加载完成事件：$(document).ready(function(){ /* code */ })

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("p").click(function(){
    // 当 
 元素被点击后，隐藏被点击的这个 
 元素
    $(this).hide();
  });
});

5. 效果和动画

jQuery 也提供了一些用于创建动画和特效的方法，例如：

• 隐藏元素：$("p").hide()
• 显示元素：$("p").show()
• 淡入元素：$("p").fadeIn()
• 淡出元素：$("p").fadeOut()

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，使用不同速度淡入三个 div，分别为默认速度，慢速，和3秒
    $("#div1").fadeIn(); // 默认速度
    $("#div2").fadeIn("slow"); // 慢速
    $("#div3").fadeIn(3000); // 3秒
  });
});

6. DOM 操作

jQuery 提供了修改 HTML 文档的方法，例如：

• 修改 HTML：$("p").html("Hello world!")
• 修改文本：$("p").text("Hello world!")
• 修改属性：$("img").attr("src", "myimage.jpg")
• 添加类：$("p").addClass("highlight")

$("button").click(function(){
  // 当 button 被点击后，修改 #w3s 的 href 属性值为 "https://www.w3schools.com/jquery"
  $("#w3s").attr("href", "https://www.w3schools.com/jquery");
});

7. AJAX

jQuery AJAX 方法让 HTTP 请求变得简单。例如：

• 发送 GET 请求：$.get("demo_test.asp", function(data, status){ /* code */ })
• 发送 POST 请求：$.post("demo_test_post.asp",{name:"Donald",city:"Duck"},function(data,status){ /* code */ });
• 使用 $.ajax() 方法进行完全自定义的 AJAX 请求：$.ajax({url: "demo_test.txt", success: function(result){ /* code */ }});

$(document).ready(function(){
  $("button").click(function(){
    // 当点击按钮时，发送一个自定义的 AJAX 请求
    $.ajax({
      url: "demo_test.asp", // 请求的 URL
      type: "POST", // 请求方法，如 "GET", "POST"
      data: {name: "John", location: "Boston"}, // 要发送的数据
      success: function(result){
        // 请求成功后的回调函数
        alert("Data received: " + result);
      },
      error: function(jqXHR, textStatus, errorThrown){
        // 请求失败后的回调函数
        alert("An error occurred: " + textStatus);
      }
    });
  });
});

8. 遍历

jQuery 提供了强大的遍历功能，例如：

• 遍历所有子元素：$("div").children().css("background-color", "yellow");
• 遍历特定子元素：$("div").children("p.important").css("background-color", "yellow");
• 遍历所有直接和间接子元素：$("div").find("*").css("background-color", "yellow");
• 遍历特定的直接和间接子元素：$("div").find("p").css("background-color", "yellow");

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，将 div 的所有子元素的文本颜色设置为红色，边框设置为2像素的红色实线
    $("div").children().css({"color": "red", "border": "2px solid red"});
  });
});

结语

以上便是 jQuery 的基础语法和使用，只要掌握了这些内容，你就能够在实际项目中熟练应用 jQuery 了。当然，jQuery 还有很多更深入的知识等待你去探索，你可以访问 jQuery 的官方文档，或者查阅更多的相关教程。jQuery 教程 | 菜鸟教程

希望这篇文章能帮助你在 Web 开发的道路上更进一步。如果你有任何问题或者想要讨论更多关于 jQuery 的话题，欢迎在评论区留言！