前端（Jquery,JS篇）

# jQuery是JavaScript的一个库，因为但随着现代浏览器对原生JavaScript的支持不断增强，以及React, Vue, Angular等前端框架的兴起，很多开发者开始倾向于直接使用JavaScript及其新特性，减少了对jQuery这样的库的依赖。所以世面上对于jQuery的使用已经很少了，我们会着重讲述js

文章目录

前端（Jquery,JS篇）
- 1.什么是js，什么是jquery
- 2.js和jquery有什么特点
- 3.js的基本知识
- - 1.的变量声明
  - 2.基本数据类型
  - 3. 运算符
  - 4. 控制结构
  - 5. 函数
- 4.js 基本使用
- 5. DOM（文档对象模型）操作
- 6. 事件处理
- 7.AJAX请求

1.什么是js，什么是jquery

# JavaScript (简称JS) 是一种广泛使用的编程语言，它主要用于网页开发，为网站添加交互性。JavaScript是一种解释型语言，可以直接嵌入HTML页面中，并在用户的浏览器上运行。它支持事件驱动、函数式以及基于原型的编程风格。JavaScript可以用来改变HTML内容、响应用户操作、执行动画等。
# jQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。jQuery的设计目的是让开发者能够用更少的代码做更多的事情，使得网页开发更加容易。通过提供一系列易于使用的方法，jQuery可以帮助开发者高效地处理DOM元素、实现页面特效以及进行异步数据加载等。

2.js和jquery有什么特点

# JavaScript:
# 核心语言特性：变量、数据类型、运算符、控制结构（if/else, switch, for, while等）、函数、对象。
# DOM操作：直接使用原生JavaScript API来查询和修改文档对象模型。
# 事件处理：监听并响应用户触发的各种事件，如点击、键盘输入等。
# 异步编程：通过回调函数、Promises或async/await来进行非阻塞式的网络请求或其他耗时任务。
# 模块化：ES6引入了模块系统，允许将代码分割成多个文件以便管理和复用。

# Query:
# 简化的选择器：类似于CSS的选择器语法，可以方便地选取DOM元素。
# 链式调用：方法通常返回jQuery对象，因此可以连续调用多个方法。
# 动画效果：内置了大量的动画方法，可以轻松创建平滑过渡效果。
# Ajax支持：提供了简单的方式来执行异步HTTP请求。
# 插件扩展：拥有庞大的社区支持，可以通过插件机制很容易地扩展其功能。

3.js的基本知识

1.的变量声明

# 在JavaScript中，变量可以通过 `var`, `let` 和 `const` 来声明。

# `var` 是较旧的声明方式，具有函数作用域或全局作用域。
# `let` 提供块级作用域。
# `const` 用于声明常量，一旦赋值就不能改变。

# 举例
var x = 10; // 全局或函数作用域
let y = 20; // 块级作用域
const PI = 3.14; // 常量

2.基本数据类型

JavaScript有几种基本数据类型：

字符串 (String)
数字 (Number)：包括整数和浮点数
布尔值 (Boolean)：true 或 false
空值 (null)
未定义 (undefined)
对象 (Object)
符号 (Symbol) (ES6新增)
大整数 (BigInt) (ES11新增)

let name = "Alice"; // 字符串
let age = 30;       // 数字
let isAdult = true; // 布尔值
let car = null;     // 空值
let city;           // 未定义
let person = {name: "Bob", age: 25}; // 对象
let id = Symbol('id'); // 符号
let bigInt = 1234567890123456789012345678901234567890n; // 大整数

3. 运算符

JavaScript支持多种运算符，包括但不限于：

算术运算符：+, -, *, /, %, **
比较运算符：==, ===, !=, !==, >, <, >=, <=
逻辑运算符：&&, ||, !
赋值运算符：=, +=, -=, *=, /=, %=, **=
条件（三元）运算符：condition ? value_if_true : value_if_false

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a > b); // true
console.log(a == b); // false
console.log(a === b); // false
console.log(!a); // false
console.log(a > b ? "A is greater" : "B is greater"); // A is greater

4. 控制结构

JavaScript提供了多种控制流程语句：

if...else 语句
switch 语句
循环：for, while, do...while, for...in, for...of

// if...else
let num = 10;
if (num > 0) {
    console.log("Positive");
} else if (num < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

// switch
let day = 3;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Other day");
}

// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

5. 函数

函数是可重用的一段代码块。JavaScript支持命名函数和匿名函数。

// 命名函数
function greet(name) {
    return "Hello, " + name + "!";
}

// 匿名函数
let sayHi = function() {
    return "Hi!";
};

// 箭头函数
let double = (x) => x * 2;

console.log(greet("Alice")); // Hello, Alice!
console.log(sayHi()); // Hi!
console.log(double(5)); // 10

4.js 基本使用

## 1. 在HTML中嵌入JavaScript
JavaScript可以直接嵌入到HTML页面中，通过`<script>`标签来实现。有三种主要方式：

- 内联脚本：直接写在HTML元素的事件属性中。
- 内部脚本：写在HTML文档中的`<script>`标签里。
- 外部脚本：链接一个外部的`.js`文件。 这也就是js文件的由来

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 示例</title>
</head>
<body>

<h1 id="greeting">你好，世界！</h1>
<button onclick="changeGreeting()">点击我</button>

<script>
    // 内部脚本
    function changeGreeting() {
        document.getElementById('greeting').textContent = '欢迎来到JavaScript!';
    }
</script>

<!-- 外部脚本 -->
<script src="./js/external.js"></script>

</body>
</html>

// 当文档加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
    console.log("外部脚本已加载并执行。");
});

5. DOM（文档对象模型）操作

DOM是HTML和XML文档的编程接口。它表示为节点和对象的树形结构。可以通过JavaScript来访问和修改这个结构

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作示例</title>
</head>
<body>

<div id="content">
    <p>这是一个段落。</p>
</div>
<button onclick="addParagraph()">添加段落</button>

<script>
    function addParagraph() {
        const newPara = document.createElement('p');
        newPara.textContent = '这是一个新段落。';
        document.getElementById('content').appendChild(newPara);
    }
</script>

</body>
</html>

6. 事件处理

JavaScript可以用来响应用户的交互，比如点击按钮或输入文本等。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件处理示例</title>
</head>
<body>

<input type="text" id="inputField" placeholder="输入一些内容...">
<p id="output"></p>

<script>
    document.getElementById('inputField').addEventListener('input', function(event) {
        document.getElementById('output').textContent = event.target.value;
    });
</script>

</body>
</html>

7.AJAX请求

AJAX (Asynchronous JavaScript and XML) 允许网页异步地更新部分内容而不必重新加载整个页面。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AJAX 请求示例</title>
</head>
<body>

<button id="fetchData">获取数据</button>
<div id="dataContainer"></div>

<script>
    document.getElementById('fetchData').addEventListener('click', function() {
        fetch('https://api.example.com/data') //这里是示例，并不可用，需要自己切换
            .then(response => response.json())
            .then(data => {
                document.getElementById('dataContainer').innerHTML = JSON.stringify(data, null, 2);
            })
            .catch(error => console.error('错误:', error));
    });
</script>

</body>
</html>