# 24级2班课堂笔记-JavaScript

**Repository Path**: grade24-fullstack-class2/grade24-class2-note-javascript

## Basic Information

- **Project Name**: 24级2班课堂笔记-JavaScript
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 44
- **Created**: 2025-11-10
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 24级软件2班 JavaScript笔记

上课录屏地址：https://www.alipan.com/s/N1FfgZbvgrP

"天行健，君子以自强不息。" —— 《周易》




# Javascript技术及应用

## Javascript基础

### 开发环境与初体验
- 编辑器
    - 记事本
    - vi/vim
    - Emac
    - Sublime Text4
    - Visual Studio Code
    - Visual Studio
    - dreaveweave
- 我们选定的编辑器是vscode

### 变量、常量和基础数据类型
- 使用var和let定义变量，后续让我们忘记var，只使用let
- const定义常量，常量名全大写
- 基础数据类型
    - 字符串
    - 数字
    - null
    - undefined
    - boolean
- 进阶类型
    - 数组
    - 对象
    - 函数

### 运算符和数据类型转换
- 算数运算符
    - `+ - * / %`
    - `++ --`
- 逻辑运算符
    - `&&`
    - `||`
    - `！`
- 条件运算符
    - `let x=表达式？"值1":"值2"`
- 赋值运算符
    - `= =+ -=`
- 比较运算
    - `== 相对等于`
    - `=== 绝对等于`
- 短路运算
    - `true || 表达式 `
    - `false && 表达式`
- 数据类型
    - `parseInt parseFloat`
    - `将一个字符串*1转换为数值，将一个数字+空字符串则最后得到字符`

### 流程控制
- 判断
    - `if(){}`
    - `if(){}else{}`
    - `if(){}else if(){}else{}`
    - `switch`
- 循环
    - `for 具体形式for(let i=0;i<10;i++)`
    - `while`
    - `do...while`
- 循环控制
    - `continue`
    - `break`

## 核心数据结构及用法
### 数组
- 高阶函数
    - 数组中的一个函数f,它本身接受函数作为参数，就称这个函数f是个高阶函数
- 不改变原数组
    - concat 合并数组
    - forEach 遍历
    - indexOf 查找元素，找到返回下标，找不到返回-1
    - map 补充
    - reduce 补充
    - every 补充 数组中所有元素只有一个不符合函数要求，就返回false，全部符合才返回true
    - some 补充 数组中所有元素只要有一个符合函数要求，就返回true，全部不符合才返回false
    - find 补充 返回符合条件的第一个元素，如果没有符合则返回undefined
    - findIndex 补充 返回符合条件的第一个元素下标，如果没有符合则返回-1
    - filter 补充 给一个函数作为参数，这个函数返回true或者false，如果在当前元素上返回true，则将这个元素放入新数组返回
- 改变原数组
    - sort 排序
    - reverse 颠倒
    - push 在数组尾部添加元素
    - pop 在数组尾部“弹出”元素
    - unshift 在数组头部添加元素
    - shift 在数组头部“弹出”元素
    - splice 可删除、可添加，可编辑
### 对象
- 键值对
- 大括号包裹
- 访问属性和值
- 遍历

### 函数
- 函数名 小驼峰命名
- 参数 可传可不传（不会因为不传参数而出错）
- 返回值 如果没有返回内容，默认返回undefined
- 函数定义三种方式
    - `function fn(){}` 传统函数定义
    - `function(){}` 匿名函数函数
    - `(a,b)=>{}` 箭头函数


## Dom操作

### Dom基础

### 操作元素内容与属性

### 处理用户交互-事件

### 动态创建与修改Dom元素

## 数据交互与异步操作

### 异步编程入门

### Promise

### Fetch Api

### Json

- json是一种数据传输格式，其本质是一个字符串，只这个字符串的组织形式是json结构的
- 其支持几种基本的数据类型或结构
    - 字符串
    - 数字
    - bool
    - null
    - 对象
    - 数组
- json中除了数字，bool值，对象和数组，其它全部都是使用双引号括起来的

## jQuery基础

### jQuery 基础
- jQuery是一种js库，用于提升dom操作和应用的体验
- 在js中使用jQuery，一定要保证jQuery的引入顺序要在js之前
- jQuery对象
- dom对象
### jQuery 选择器与操作
- 基础选择器
    - 标签选择器
    - 类型选择器
    - id选择器
- 关系选择器
    - 子代选择器 ` `
    - 直接子代选择器 `>`
    - 兄弟选择器 `~`
    - 相邻兄弟选择器 `+`
- 属性选择器
    - `[class]` 选择包含属性带`class`的元素
    - `[class=XXX]` 选择属性是class并且其值是XXX的元素
    - `[class^=abc]` 选择属性是class，并且其值是XXX开关的元素
    - `[class$=abc]` 选择属性是class，并且值是XXX结尾的元素
- 伪类选择器
    - 和状态有关:
- 伪元素选择器
    - 和元素的部分有关::
### jQuery 事件处理
- 直接绑定事件如jQuery.click(function(){})
- 使用on绑定函数jQuery.on('click',function(){})
- 使用trigger手动去触发某一些事件jQuery.trigger('click',function(){})
- 文档元素都初始化完成后触发一个ready事件，其常用用法：$(function () {console.log('我是jQuery');})
- 注意：无论是直接绑定，还是使用on绑定，其效果都相当于给这个事件`添加`绑定了一个函数
### jQuery 动画与效果
- 基础应用：隐藏和显示 show() hide()
- 进阶应用：fadeIn() fadeOut()
- 高级应用：animate()
### jQuery DOM 操作
- 新增
    - append()
        - 这个函数可以接受字符串、Node节点或者函数（要求函数必须返回字符串或者Node节点）
- 移除
    - remove()
- 修改
    - text('XXXX')
    - html('XXXX')
- 查询
    - text()
    - html()
- 对样式的操作
    - 使用css()直接操作样式
    - 通过addClass()、removeClass()来新增或者移除class来影响样式

## 综合应用与进阶

### 本地存储
### 错误处理
### 模块化（选修）
### 综合实战项目