首页 前端知识 前端(Jquery,JS篇)

前端(Jquery,JS篇)

2024-11-02 10:11:11 前端知识 前端哥 395 517 我要收藏

前端(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):truefalse
  • 空值 (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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19752.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!