JavaScript 测试 jQuery 学习笔记

什么是jQuery?

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使得操作HTML文档、处理事件、创建动画、以及许多其他任务变得更加简单和快速。

jQuery 的引入

为了使用 jQuery 库，我们需要在 HTML 文件中引入它。可以使用以下代码行从官方源引入 jQuery：

htmlCopy Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择器

jQuery 使用选择器来定位 HTML 元素，与 CSS 类似。以下是常见的选择器：

选择器	描述
*	选择所有元素
#id	根据元素 id 选择元素
.class	根据 class 选择元素
element	根据元素名称选择元素
element,element	同时选择多个元素

例如，我们可以使用以下代码行选择带有 "demo" 类名的所有元素：

javascriptCopy Code
$(".demo")

事件处理

在 jQuery 中，可以使用 .click() 或 .on() 函数来添加事件处理程序。以下是一个例子：

javascriptCopy Code
$("button").click(function(){
  $("p").toggle();
});

这将在按钮被点击时切换 <p> 元素显示或隐藏。

DOM 操作

jQuery 使得 HTML 元素的操作变得更加容易。以下是一些例子：

设置文本

javascriptCopy Code
$("#mytext").text("Hello World!");

这将设置具有 id "mytext" 的元素文本为 "Hello World!"。

改变 CSS 样式

javascriptCopy Code
$("p").css("font-size", "20px");

这将改变所有 <p> 元素的字体大小为 20 像素。

添加/删除元素

javascriptCopy Code
$("p").append(" - 追加文本。");
$("p").remove();

第一行代码将在所有 <p> 元素后追加文本。第二行代码将删除所有 <p> 元素。

AJAX 请求

jQuery 可以通过 AJAX 请求从服务器获取数据。以下是一个例子：

javascriptCopy Code
$.ajax({
  url: "demo_test.txt",
  success: function(result){
    $("#mydiv").html(result);
  }
});

这将从 "demo_test.txt" 文件获取数据，并将其插入具有 id "mydiv" 的元素中。

以上是 JavaScript 测试 jQuery 学习笔记的一些基础知识和例子。希望这能帮助你更好地理解 jQuery，并使用它构建更多响应式和交互式的网页。

实例

下面是一个简单的例子，使用 jQuery 从服务器请求JSON数据，并将数据显示在网页上：

javascriptCopy Code
$.getJSON("https://api.myjson.com/bins/1h3vb3", function(json) {
  $.each(json, function(key, value) {
    $("#mytable").append("<tr><td>" + value.name + "</td><td>" + value.age + "</td></tr>");
  });
});

这将从 https://api.myjson.com/bins/1h3vb3 地址获取 JSON 数据，并将每个对象的 name 和 age 展示在一个表格中。