前端（Jquery,JS篇）

前端（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

2.js 和 jquery 有什么特点

3.js 的基本知识

1. 的变量声明

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); 
console.log(a > b); 
console.log(a == b); 
console.log(a === b); 
console.log(!a); 
console.log(a > b ? "A is greater" : "B is greater"); 

4. 控制结构

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

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

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


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 (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")); 
console.log(sayHi()); 
console.log(double(5)); 

4.js 基本使用

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>