JS_jQuery_BootStrap

JavaScript
- script 标签
- 基础语法
- 数据类型
- 字符串的遍历
- 数组的遍历
- 对象的遍历
- 常用 API 参考
- 函数
- DOM 操作
jQuery
- 基于 jQuery 的各种插件
BootStrap

Java 从 0 到架构师目录：【Java从0到架构师】学习记录

Gitee 代码：https://gitee.com/szluyu99/mj_java/tree/master/08_js/web/WEB-INF/page

JavaScript

JS 参考资料：Mozilla MDN、javascript.info

Javascript 简称 JS，是广泛应用于前端开发中的脚本语言

Javascript 遵循了 Java 的表达式语法、命名规范、基础流程控制

这也是 Javascript 从 MLiveScript 更名的原因之一

JS 的标准化组织是 ECMA，这种标准化的 JS 被称为 ECMAScript，简称 ES

2011/06，ES5.1
2015/06，ES2015，ES6
2016/06，ES2016，ES7
2017/06，ES2017，ES8
2018/06，ES2018，ES9
2019/06，ES2019，ES10

JavaScript 常见用途：

跟用户进行交互
对标签的增删改查
实现绚丽的动画效果
跟服务器进行交互

script 标签

在 script 标签中编写 JS 代码（标签可以在 head、body 中）

<!-- type 的默认值就是 text/javascript -->
<script type="text/javascript">// 编写JS代码
</script>

可以使用 script 标签引用 js 文件

<script src="js/jquery-3.4.1.min.js"></script>

基础语法

JS 每一条语句结束后可以加分号，也可以不加分号（现在建议不加分号）

如果选择不加分号，那么每一条语句需要独占一行

常见输出方式：alert、console.log

JS 中有两种注释：单行注释、多行注释

<scipt>// 单行注释/*多行注释多行注释*/
</script>

JS 中用 var、let 定义变量（建议用 let），const 定义常量

let score = 10
score += 20
console.log(score) // 30const age = 10
consle.log(age) // 10

字符串的拼接：

const name = "jack"
const age = 20// my name is jack, age is 20
console.log('my name is ' + name + ", age is " + age)
console.log(`my name is ${name}, age is ${age}`)
console.log(`my name is ${'ja' + 'ck'}, age is ${19 + 1}`)

监听标签的点击事件：

<span onclik="change()">换一换</span>

function change() {console.log("点击了【换一换】")
}

数据类型

JS 中有 8 种数据类型：

number：整数、浮点数

1
-10
8.6

bigint：任意长度的整数

12345678987654321n

string：字符串

"jack"
'jack'
`jack`

boolean：真假

true
false

undefined：未分配的值\

undefined

null：不存在或无效

null

object：对象

{}
[]

symbol：唯一标识符

typeof 运算符（类型运算符）：返回 x 的类型，返回值是字符串类型

typeof x
typeof (x)

使用示例：

console.log(typeof 1) // number
console.log(typeof 1.0) // number
console.log(typeof 1n) // bigint
console.log(typeof 'jack') // string
console.log(typeof "jack") // string
console.log(typeof true) // boolean
console.log(typeof {name: 'jack',age: 10
}) // object
console.log(typeof [1, '2', true]) // object
console.log(typeof undefined) // undefined
console.log(typeof Symbol()) // symbol
console.log(typeof alert) // function

有一个比较特殊的，可以视为 javascript 早期的设计缺陷：

console.log(typeof null) // object

字符串的遍历

for (let ... of ...) 遍历时获取元素内容：

const str = 'cat'
for (const c of str) {console.log(c)
}
// c
// a
// t

for (let ... in ...) 遍历时获取元素下标：

for (let i in str) {console.log(i, str.charAt(i))
}
// 0 c
// 1 a
// 2 t

常规的 for 循环遍历方式：

for (let i = 0; i < str.length; i++) {console.log(i, str.charAt(i))
}
// 0 c
// 1 a
// 2 t

数组的遍历

const arr = [11, '22']

for (let ... of...) 遍历时获取元素内容：

for (const e of arr) {console.log(e)
}
// 11
// 22

数组的 forEach 方法遍历：

arr.forEach((e, idx) => {console.log(idx, e);
});
// 0 11
// 1 22

for (let ... in ...) 遍历时获取元素下标：

for (let i in arr) {console.log(i, arr[i])
}
// 0 11
// 1 22

常规的 for 循环遍历：

for (let i = 0; i < arr.length; i++) {console.log(i, arr[i])
}
// 0 11
// 1 22

对象的遍历

const person = {name: 'jack', age: 20};

for (let ... in...) 遍历时获取元素内容：

for (const k in person) {console.log(k, person[k])
}
// name jack
// age 20

注意：for (let ... of ...) 无法直接遍历对象，会提示 person is not iterable

for (let ... of ...) 结合 Object.keys 方式遍历：

for (const k of Object.keys(peson)) {console.log(k, person[k])
}
// name jack
// age 20

for (let ... of ...) 结合 Object.entries(person) 方式遍历：

for (const entry of Object.entries(person)) {console.log(entry[0], entry[1])
}
// name jack
// age 20

for (let ... of ...) 结合 Object.values 方式遍历：只能遍历出对象的属性的值

for (const v of Object.values(person)) {console.log(v)
}
// jack
// 20

常用 API 参考

数字：https://zh.javascript.info/number

字符串：https://zh.javascript.info/string

数组：https://zh.javascript.info/array、https://zh.javascript.info/array-methods

函数

function sum(a, b, c=10) {return a + b + c
}console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2)) // 13
console.log(sum(1)) // NaN
console.log(sum()) // NaN

JS 中，函数可以作为参数、返回值

ES6 开始，推出了箭头函数

function execute(fn, a, b) {console.log(fn(a, b))
}// 30
execute(function(a, b) {return a + b
}, 10, 20)// 30
execute((a, b) => {return a + b
}, 10, 20)// 30
execute((a, b) => a + b, 10, 20)

DOM 操作

参考文档：文档对象类型（DOM）

DOM 操作就是指对 HTML 文档中节点的增删改查操作

// 删除id为vv的节点
document.getElementById('vv').remove()// 删除第一个div节点
document.getElementByTagName('div')[0].remove()// 删除第二个class为link的节点
document.getElementByClassName('link')[1].remove()

更建议使用 querySelector 根据 CSS 选择器获取节点，再进行操作

// 删除id为vv的节点
document.querySelector('#vv').remove()// 删除第一个div节点
document.querySelector('div').remove()// 删除第二个class为link的节点
document.querySelector('.link')[1].remove()

jQuery

参考文档：中文文档、英文文档

jQuery 前端开发中非常著名的一个开源框架

使用 jQuery 来操作 DOM 节点能够大大提高开发效率：

$('#vv').remove()
$('div').remove()
$('.link')[1].remove()

绑定点击事件：

document.querySelector(sel).onclick = function() {}

$(sel).on('click', function() {})

$(sel).click(function() {})

基于 jQuery 的各种插件

jQuery UI：https://jqueryui.com/、https://www.jqueryui.org.cn/

jQuery Validation Plugin：https://jqueryvalidation.org/

BootStrap

Bootstrap 是非常强大的前端库，可以帮助开发者快速开发出简洁美观、响应式的前端页面

BootStrap 由 Twitter 公司出品：https://getbootstrap.com/、https://www.bootcss.com/

加深对 col、col-sm、col-md、col-lg 的理解：

col 会将内容进行调整，来强制满足栅格布局
col-sm、col-md、col-lg 会根据缩放的尺度，来动态调整内容，从而实现效果较好的响应式

【Java从0到架构师】JS_jQuery_BootStrap相关推荐

【Java从0到架构师(1)，Java中高级面试题总结(全面)
JSP 九大内置对象 MySQL 基础 + 多表查询 [Java从0到架构师]MySQL 基础 MySQL MySQL 的使用步骤数据库的内部存储细节 GUI 工具 SQL 语句 DDL 语句 DD ...
【Java从0到架构师】SpringCloud - Sleuth、Zipkin、Config
SpringCloud 链路追踪组件 Sleuth Zipkin 分布式配置中心 - Config Git + Config 分布式配置中心 Java 从 0 到架构师目录:[Java从0到架构师]学 ...
【Java从0到架构师】SpringCloud - Hystrix、Zuul
SpringCloud 基本概念熔断和降级服务雪崩效应服务熔断与降级 - Hystrix SpringBoot 集成 Hystrix 熔断降级服务异常报警通知重点属性 - 熔断隔离策略.超时时 ...
【Java从0到架构师】SpringCloud - Eureka、Ribbon、Feign
SpringCloud 分布式.微服务相关概念微服务框架构选型 SpringCloud 概述服务注册与发现 - Eureka 案例项目 Eureka 自我保护机制微服务调用方式 - Ribbon ...
【Java从0到架构师】RocketMQ 使用 - 集成 SpringBoot
RocketMQ 消息中间件集成 SpringBoot 入门案例生产消息类型 - 同步.异步.一次性消费模式 - 集群.广播延时消息设置消息标签设置消息的 Key 自定义属性设置消息过滤 ...
【Java从0到架构师】RocketMQ 使用 - 发送消息、接收消息、特殊消息
RocketMQ 消息中间件入门案例 NameServer 地址发送消息同步发送消息异步发送消息一次性发送消息生产者组.消息封装接收消息消费方式:推式消费.拉式消费消息方式:集群模式 ...
【Java从0到架构师】RocketMQ 基础 - 应用、核心组件、安装
RocketMQ 消息中间件基础知识消息中间件的应用异步解耦削峰填谷消息分发 RocketMQ 核心组件 RocketMQ 安装源码安装修改配置参数启动管理控制台安装测试项目 Ja ...
【Java从0到架构师】Dubbo 基础 - 设置启动时检查、直接提供者、线程模型、负载均衡、集群容错、服务降级
Dubbo 分布式 RPC 分布式核心基础分布式概述 RPC Dubbo Dubbo 入门程序 - XML.注解部署管理控制台 Dubbo Admin 修改绑定的注册 IP 地址设置启动时检查 ...
【Java从0到架构师】分布式框架通信核心基础 - 序列化（JDK、Protobuf）、远程过程调用 RMI
分布式框架通信核心基础序列化 JDK 的序列化 JDK 序列化的一些细节 Protobuf 序列化 Protobuf 环境搭建与操作 Protobuf 原理分析实际数据传输序列化技术选型远程过 ...

【Java从0到架构师】JS_jQuery_BootStrap