jQuery 基础语法使用指南

news2024/11/26 4:50:41

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

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

1. 引入 jQuery

2. jQuery 语法

3. 选择器

4. 事件

5. 效果和动画

6. DOM 操作

7. AJAX

8. 遍历

结语

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

1. 引入 jQuery

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. jQuery 语法

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

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

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

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

3. 选择器

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

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

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，隐藏所有 class 为 "intro" 的 <p> 元素
    $("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(){
    // 当 <p> 元素被点击后，隐藏被点击的这个 <p> 元素
    $(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 <b>world</b>!")
修改文本：$("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"});
  });
});