bestvike--study7之进项目-CSDN博客

本文链接：https://blog.csdn.net/qq_51186720/article/details/138492957

自学

1.Ajax

Ajax (Asynchronous JavaScript and XML) 是一种用于创建动态网页的技术。通过使用 HTML、JavaScript 与服务器端编程语言，Ajax 能够在不需要重新加载整个页面的情况下，更新网页的某部分内容。这使得网页能够更快地响应用户的操作，并提高用户体验。
Ajax 的工作原理是通过发送一个异步请求到服务器，然后处理服务器返回的数据，并将其更新到网页上。这种技术的好处是可以减少服务器和客户端之间的数据传输量，因为只有发生变化的部分才会被更新，而不是整个页面。
以下是一个简单的 Ajax 示例：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'data.json', true);
// 设置请求完成的回调函数
xhr.onreadystatechange = function() {
  // 检查请求是否完成
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 解析返回的数据
    var data = JSON.parse(xhr.responseText);
    // 使用数据更新页面
    document.getElementById('output').innerHTML = data.message;
  }
};
// 发送请求
xhr.send();

在这个示例中，我们创建了一个 XMLHttpRequest 对象，并使用它向服务器发送了一个 GET 请求。然后，我们设置了一个回调函数来处理请求完成时的情况。如果请求成功，我们解析返回的数据，并使用它来更新页面的内容。
需要注意的是，虽然 Ajax 技术经常与 XML 一起使用，但它也可以与 JSON 或其他数据格式一起使用。

2.grid

CSS Grid Layout（网格布局）是一种用于布局网页的二维方法，它允许开发者以前所未有的精度和灵活性来安排页面上的元素。<grid>元素是网格布局的核心，它是创建网格容器的起点。

网格容器（Grid Container）

任何元素都可以被设定为网格容器，只需给它应用display: grid;或display: inline-grid;样式。一旦一个元素被设定为网格容器，它的子元素就会自动成为网格项（grid items）。

网格轨道（Grid Tracks）

网格轨道是指网格中的列和行。你可以使用grid-template-columns和grid-template-rows属性来定义列和行的大小，以及使用grid-template-areas来创建命名区域。

网格项（Grid Items）

网格项是放置在网格容器中的子元素。你可以使用grid-column-start、grid-column-end、grid-row-start和grid-row-end属性来指定网格项的起始和结束位置。

间距（Spacing）

网格间距是指列与列之间以及行与行之间的空间。你可以使用grid-column-gap、grid-row-gap和grid-gap属性来设置间距。

对齐（Alignment）

网格对齐是指网格项在网格中的位置。你可以使用justify-items、align-items和place-items属性来设置对齐方式。

例子

假设你想创建一个简单的网格布局，其中包含四个网格项，它们分布在两列中。这里是HTML和CSS的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列，每列占一半宽度 */
    gap: 10px; /* 列与列之间的间隔 */
    padding: 10px; /* 容器内边距 */
  }
  .grid-item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
    border: 1px solid black;
  }
  .item1 {
    grid-column-start: 1;
    grid-column-end: 3; /* 跨越两列 */
    grid-row-start: 1;
    grid-row-end: 3; /* 跨越两行 */
  }
  .item2 {
    grid-column-start: 2;
    grid-column-end: 4; /* 跨越两列 */
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .item3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .item4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
</div>
</body>
</html>

在这个例子中，我们创建了一个grid-container，它有两条列轨道，每条轨道占一半的宽度。我们还在CSS中定义了四个网格项的位置和大小。结果是一个包含四个方块的网格布局，其中两个方块跨越了两列，另外两个方块分别位于单独的列中。

3.jQuery

jQuery是一个快速、小巧且功能丰富的JavaScript库。它的主要目的是简化JavaScript编程，让你能够更简单地编写JavaScript代码。jQuery在网页开发中广泛使用，可以用来操作HTML文档、处理事件、实现动画效果以及与服务器进行AJAX通信等。

为什么要使用jQuery？

在原始的JavaScript中，操作DOM（文档对象模型）元素、编写事件处理程序和动画等操作可能会非常繁琐。jQuery提供了一种更简洁、更易读的方式来完成这些任务。它封装了很多常用的JavaScript代码，让你可以一行代码就完成很多复杂的操作。

通俗例子解释

选择元素

在原始JavaScript中，选择页面上的元素可能需要使用复杂的DOM路径。而在jQuery中，你可以简单地用一个符号来实现：

// 原始JavaScript
var element = document.getElementById("myId");
// jQuery
var element = $("#myId");

修改内容

如果你想修改某个元素的文本内容，jQuery同样可以让你用更少的代码实现：

// 原始JavaScript
document.getElementById("myId").innerHTML = "新内容";
// jQuery
$("#myId").html("新内容");

绑定事件

处理点击事件也是类似：

// 原始JavaScript
document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了");
});
// jQuery
$("#myButton").click(function() {
  alert("按钮被点击了");
});

AJAX操作

jQuery的$.ajax()方法让你可以很容易地实现AJAX请求：

// jQuery AJAX
$.ajax({
  url: "some-url",
  type: "GET",
  success: function(response) {
    // 处理响应
  },
  error: function(error) {
    // 处理错误
  }
});

以上就是jQuery的一些基础用法，它极大地简化了JavaScript编程，让开发者能更专注于实现功能本身，而不是繁琐的底层操作。

外网协同

外网协同，简单来说，就是不同的人或者组织在互联网上通过各种工具和平台，共同完成某个任务或者项目。这个概念其实和现实中的协同工作类似，只不过是在网络环境下进行。
比如，一个公司里的不同部门，可能需要共同完成一个项目。在现实世界中，他们可能会在同一个办公室里开会、讨论、分工和合作。而在网络世界中，他们可以通过在线会议软件、共享文档工具、项目管理平台等方式进行沟通和协作。
外网协同的关键在于“协同”，也就是大家需要一起配合，互相协调，确保任务顺利进行。而“外网”则强调的是这种协同工作是在互联网上进行的，不受地理位置的限制。
外网协同的优点很多，比如可以提高工作效率，节省时间和成本，促进信息共享，增加团队合作等等。现在，随着技术的发展，外网协同已经成为了很多企业和组织日常工作的重要组成部分。