JS 教程

本教程由沈阳农业大学大学生网络信息中心运行部提供，适用于校园网站开发

关键字	说明
var	最早的变量声明方式，作用域为函数作用域或全局作用域，容易引发`变量提升`问题。
let	ES6 引入的，具有块级作用域，避免了 var 的变量提升问题，更推荐使用。
const	用于定义常量，值一旦赋予就不能更改，同样具有块级作用域。

在JavaScript中，变量提升（Hoisting）是一种特殊的现象，它指的是变量和函数声明在代码执行之前就被提升到当前作用域的顶部。这意味着无论声明在何处，都会被视为在当前作用域的开始处声明。这个概念对于理解JavaScript代码的执行顺序非常重要。变量提升的工作原理：变量提升的背后机制与JavaScript的编译过程密切相关。在代码执行之前，JavaScript引擎会进行编译阶段，在这个阶段，所有的变量和函数声明会被读取并添加到内存中。这就是为什么我们可以在变量被声明之前引用它们，而它们的值为undefined 例如，以下代码片段中的console.log(num)会输出undefined，而不是抛出错误，因为变量num的声明被提升了：

console.log(num); // 输出 undefined
var num = 1;

这段代码在执行时相当于：

var num;
console.log(num); // 输出 undefined
num = 1;

示例：

// 变量声明
var name = "张三";
let age = 25;
const height = 1.8;

// 输出变量
console.log(name);
console.log(age);

// 变量类型（常用类型）
var name = "张三";
console.log(typeof name); // string

var age = 25;
console.log(typeof age); // number

var isMarried = true;
console.log(typeof isMarried); // boolean

变量命名规则：

必须以字母、下划线（_）或美元符号（$）开头。
不能以数字开头。
对大小写敏感。

1.4.4 逻辑语句与函数

// 条件语句
if (age >= 18) {
  console.log("你已满18周岁！");
} else {
  console.log("你还未满18周岁！");
}

// 循环语句
for (var i = 0; i < 5; i++) {
  console.log(i);
}

// 函数声明
function sayHello() {
  console.log("Hello, world!");
}

// 函数调用
sayHello();

1.5 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写。它基于ECMAScript的一个子集。

JSON 格式的数据在传递过程中只包含简单类型的数据（字符串、数值、布尔值、数组、对象），不包含函数、正则表达式、日期对象等复杂类型。

JSON 格式的数据可以被所有语言读取和解析，包括 JavaScript。

// JSON 格式数据
{
  "name": "康浩焜",
  "age": 20,
  "birthday": "2005-09-12",
  "isPeople": true,
  "hobbies": ["Table tennis", "swimming", "running"],
  "address": {
    "school": "SYAU",
    "city": "ShenYang"
  }
}

实现复杂的交互效果
节省服务器资源
改善用户体验

2.3 动态渲染的步骤

定位 DOM 元素
操作 DOM 元素
页面重渲染

// 获取当前页面的全部HTML内容
var html = document.documentElement.innerHTML;
console.log(html);

（2）再通过id、class、标签名等定位元素

// 通过id定位元素 
var IDDiv = document.getElementById('div');

// 通过class定位元素
var ClassDiv = document.getElementsByClassName('div');

// 通过标签名定位元素
var TagNameDiv = document.getElementsByTagName('div');

2.4.2 操作 DOM 元素

（1）修改元素内容

IDDiv.innerHTML = '新内容';

（2）增加元素

const p = document.createElement('p');
p.innerHTML = '新元素';
// 将新元素添加到 div 元素中
div.appendChild(p);

注意：

appendChild() 方法在 DOM 树中添加一个元素，并将其放在最后一个子节点之后。使用这个方法的是父元素，，括号内的元素是子元素。

（3）删除元素

div.removeChild(p);

（4）添加元素的属性和样式

// 添加一个div元素，并此行为赋值给divAction变量
const divAction = document.createElement('div');
// 给这个div元素添加一个class属性
divAction.classList.add('radio-item');
// 给这个div元素添加一个id属性
divAction.id = 'radio-item';
// 给这个div添加文本内容textContent
divAction.textContent = '选项1';
// 给这个div元素添加一个style属性
divAction.style.color = 'blue';

扩展：

更多详细HTML DOM 元素对象请参考 HTML DOM 元素对象。

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

本地引用：

给你们一个jquery-3.7.1.js文件，把它放在你的项目目录下，然后在HTML文件中引用：
自己新建一个jquery.js文件，把CDN链接中的内容复制进去，然后在HTML文件中引用：

  <script src="./jquery-3.7.1.js"></script>

3.2 选择器

jQuery 提供了丰富的选择器，可以快速定位 DOM 元素，常用的有：

$('#id')：根据元素的 id 选择器定位元素
$('.class')：根据元素的 class 选择器定位元素
$('tag')：根据元素的标签名选择器定位元素

示例：

// 选择器示例
$('#id'); // 选择 id 为 id 的元素
$('.class'); // 选择 class 为 class 的元素
$('tag'); // 选择标签名为 tag 的元素

3.3 事件

jQuery 提供了丰富的事件处理函数，可以绑定到 DOM 元素的各种事件上，常用的有：

click()：点击事件
dblclick()：双击事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件
keydown()：键盘按下事件
keyup()：键盘松开事件
submit()：表单提交事件
focus()：元素获得焦点事件
blur()：元素失去焦点事件

示例：

// 事件示例
$('#btn').click(function() {
  console.log('按钮被点击了！');
});

3.4 动画

jQuery 提供了丰富的动画效果函数，可以实现元素的淡入、淡出、滑动、缩放等效果，常用的有：

fadeIn()：淡入效果
fadeOut()：淡出效果
slideUp()：向上滑动效果
slideDown()：向下滑动效果
animate()：自定义动画效果

示例：

点击跳转至演示页面


<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

3.5 AJAX ⭐️⭐️⭐️⭐️⭐️

jQuery 提供了简洁的 AJAX 接口，可以方便地实现与服务器的交互，常用的有：

$.get()：发送 GET 请求
$.post()：发送 POST 请求
$.ajax()：发送自定义请求

$.ajax({
  // 配置参数
  url: '请求地址',
  type: '请求方法',
  data: '发送数据',
  // ... 其他参数
})
success: function (response) {
  // 成功回调
})
error: function () {
  // 失败回调
  alert("请求失败，请检查网络连接或服务器状态！");
}

主要配置参数

参数	类型	说明
`url`	String	请求发送的URL地址（必需）
`type`	String	请求方法：'GET', 'POST'等（默认：'GET'）
`data`	Object/String	请求包体，发送到服务器的数据
`dataType`	String	预期服务器返回的数据类型：'json', 'xml', 'html', 'text', 'script'
`contentType`	String	发送信息至服务器时的内容编码类型（默认：'application/x-www-form-urlencoded; charset=UTF-8'）
`headers`	Object	额外的请求头
`timeout`	Number	设置请求超时时间（毫秒）
`cache`	Boolean	是否缓存请求（默认：true, 对于dataType为'script'和'jsonp'时 false）
`async`	Boolean	是否异步执行请求（默认：true）

回调函数参数

回调函数	参数	说明
`beforeSend`	`jqXHR`, `settings`	发送请求前调用的函数
`success`	`data`, `textStatus`, `jqXHR`	请求成功后的回调函数
`error`	`jqXHR`, `textStatus`, `errorThrown`	请求失败时调用的函数
`complete`	`jqXHR`, `textStatus`	请求完成后回调函数（无论成功与否）

完整示例

// 完整的 $.ajax() 使用示例
$.ajax({ 
    url: '/api/data',
    type: 'POST',
    data: { name: 'John', age: 30 },
    dataType: 'json',
    success: function (response) {
        // 可以在这里添加成功处理逻辑
        console.log(response);
    },
    error: function (err) {
        // 可以在这里添加失败处理逻辑
        console.log(err);
    }
});

开发效率大幅提升
维护性与可扩展性
安全性与稳定性

4.3 前后端分离的实现方式

纯前端开发
纯后端开发
前后端互联

4.5 前后端分离的技术栈

我们目前使用的技术栈：

后端：PHP
前端：HTML、CSS、JavaScript、jQuery、Bootstrap、Vue.js

4.6 前后端分离大致流程

前端页面 -> 后端接口 -> 后端处理数据 -> 后端返回数据 -> 前端渲染页面

4.7 前后端分离示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前后端分离示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    $.ajax({
      url: './getUserInfo.php',
      type: 'GET',
      dataType: 'json',
      success: function (response) {
        console.log(response);
        const name = response.name;
        const age = response.age;
        addUser(name, age);
      },
      error: function (err) {
        console.log(err);
      }
    });

    function addUser(name, age) {
      const nameDiv = document.createElement('div');
      nameDiv.textContent = name;
      const ageDiv = document.createElement('div');
      ageDiv.textContent = age;
      const container = document.getElementById('container');
      container.appendChild(nameDiv);
      container.appendChild(ageDiv);
    }
  </script>
</body>
</html>

getUserInfo.php文件内容：

<?php
// getUserInfo.php

$name = '张三';
$age = 25;

$result = array(
  'name' => $name,
  'age' => $age
);

echo json_encode($result);

总结

本章主要介绍了 JavaScript 动态渲染页面、jQuery 简介、前后端分离相关知识。

由于篇幅与本人技术有限，所以本教程内知识点并不全面，如有遗漏，欢迎自行前往菜鸟教程或其它资料学习。

参考

菜鸟教程 - JavaScript 教程：https://www.runoob.com/js/js-tutorial.html