[java]30、JavaScript
2022-03-27 本文已影响0人
史记_d5da
1、概述
JavaScript 简称JS，是广泛用于前端开发中的脚本语言。
JavaScript 遵循了Java的表达式语法、命名规范、基础流程控制，这也是JavaScript从LiveScript更名的原因之一。
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
2、基本语法
2.1、基础语法
1、打印方式：alert、console.log（推荐）。
2、每一条语句结束可以加分号、也可以不加。
3、JS中用var、let定义变量（建议用let），const定义常量。
2.2、数据类型
JS中有8种数据类型
number：整数、浮点数，1、-10、8.6
bigint：任意长度的整数（后面跟n）12345678n
string：字符串，"jack"
boolean：真假，true、false
undefined：未分配值，undefined
null：不存在或无效，null
object：对象，{}、[]
symbol：唯一标识符
2.3、typeof运算符（类型运算符）
用法有两种：typeof x、typeof(x)
console.log(typeof 1) // number
console.log(typeof 1n) // bigint
console.log(typeof "Jack") // string
console.log(typeof true) // boolean
console.log(typeof {name: 'Jack', age: 10}) // object
console.log(typeof [1,2]) // object
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof Symbol()) // symbol
console.log(typeof alert) // function
2.4、字符串的遍历
const str = 'cat'
for (const c of str) {
console.log(c);
}
for (let i = 0; i < str.length; i ++) {
console.log(i, str.charAt(i));
// 0 c
// 1 a
// 2 t
}
2.5、数组的遍历
const arr = [22, 'cat']
for (const e of arr) {
console.log(e);
}
for (let i = 0; i < arr.length; i ++) {
console.log(i, arr[i]);
// 0 11
// 1 cat
}
arr.forEach((e, idx) => {
console.log(idx, e);
// 0 11
// 1 22
})
2.6、对象的遍历
const arr = [22, 'cat']
const person = {name 'jack', age: 18}
for (const k in person) {
console.log(k, person[k]);
// name jack
// age 18
}
for (const k of Object.keys(person)) {
console.log(k, person[k]);
}
for (const entry of Object.entries(person)) {
console.log(entry[0], entry[1]);
}
for (const v of Object.values(person)) {
console.log(v);
// jack
// 18
}
2.7、函数
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
3、DOM操作
3.1、点击事件
<span onClick="change=()"> 换一换 </span>
function change() {
console.log('点击了【换一换】');
}
3.2、DOM节点的操作
DOM操作是指对HTML文档中节点的增删改查
参考文档文档对象模型
// 删除id为vv的节点
document.getElementById('vv').remove()
// 删除第一个div的节点
document.getElementByTagName('div')[0].remove()
// 删除第二个class为link的节点
document.getElementByClassName('link')[1].remove()
通过css选择器查找
// 删除id为vv的节点
document.querySelector('#vv').remove()
// 删除第一个div的节点
document.querySelector('div').remove()
// 删除第二个class为link的节点
document.querySelectorAll('.link')[1].remove()
在ul标签后面添加li标签
<body>
<ul></ul>
</body>
// 创建节点
let li = document.createElement('id');
let txt = document.createTextNode('测试标签');
li.append(txt);
document.getElementsByTagName('ul')[0].append(i);
4、jQuery
jQuery是前端开发中非常著名的一个开源框架，文档地址中文、英文
用$函数找到的节点，是jQuery包装后的节点，并非JS原生的DOM节点
操作节点
$('#vv').remove()
$(''div')[0].remove()
$('link')[1].remove()
绑定点击事件
document.querySelector(sel).onclick = function() {
}
$(sel).on('click', function() {
})
$(sel).click(function() {
})
5、BootStrap
BootStrap(https://getbootstrap.com/)是非常强大的前端库，可以帮助开发者快速开发出简洁、美观、响应式的前端页面
7、AJAX
AJAX是Asynchronous JavaScript and XML的简写
它能够以异步的方式向服务器提交请求，促进前后端的分离
1、原生GET
function get() {
const xhr = new XMLHttpRequest();
// 配置请求方法和url,(第三个参数如果是true代表异步，false代表同步，默认是true)
xhr.open('GET', 'http://localhost:8080', false);
// 服务器返回的数据格式
xhr.responseType = 'json';
xhr.send();
xhr.onload = function () {
if (xhr.status != 200) return;
console.log(xhr.response)
}
}
2、原生POST，表单的形式提交
function post() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080');
xhr.responseType = 'json';
// 请求头，以表单的形式提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send('name=mj');
xhr.onload = function () {
if (xhr.status != 200) return;
console.log(xhr.response)
}
}
3、原生POST，文件的形式提交
function post() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080');
xhr.responseType = 'json';
const body = new FormData(); // 以文件的形式上传
body.append('name', 'mj');
xhr.send(body);
xhr.onload = function () {
if (xhr.status != 200) return;
console.log(xhr.response)
}
}
4、AJAX的GET请求
function j_get() {
$.ajax({
method: 'GET',
url: 'http://localhost:8080',
data: {name: 'mj'},
dataType: 'json',
success: function (data) {
console.log(data);
}
})
$.get('http://localhost:8080', {name: 'mj'}, function (data) {
console.log(data);
}, 'json')
$.getJSON('http://localhost:8080', {name: 'mj'}, function (data) {
console.log(data);
})
}
5、AJAX的POST请求
function j_post() {
$.post('http://localhost:8080', {name: 'mj'}, function (data) {
console.log(data);
}, 'json')
}
