[阶段3 企业开发基础] 10. 前端基础 JS篇_index.html中在script中的请求什么时候会发送-CSDN博客

本文链接：https://blog.csdn.net/ChiYoun/article/details/127262042

文章目录

2 DOM
3 事件
4 面向对象
- 4.1 定义类的方式
- 4.2 继承
5 内置对象
6 BOM
7 jQuery
8 Ajax

1 基本语法

1.1 引入方式

<script>
    js代码
</script>

<script src="js文件"></script>

1.2 输入输出语句

prompt()

prompt("请输入:");
//该语句在页面弹出一个输入框，并且带有提示

alert()
```
alert("提示");
```

console.log()

console.log("控制台输出的内容");

document.write()

document.write("向页面输出内容");

1.3 变量和常量

JavaScript是弱类型语言，定义变量时不用区分具体数据类型
定义局部变量

语法：let 变量名 = 值;
定义全局变量

语法：变量名 = 值;
定义常量

语法：const 常量名 = 值;

1.4 原始数据类型

类型	说明
boolean	布尔类型，true或false
undefined	未定义，即定义变量时没有赋值
null	声明null为变量值
number	整数或浮点数
string	字符串
bigint	大整数，例如bigint num = 10n;需要在数字后加上n

判断原始数据类型的方法：

使用typeof()函数

let l1 = true;
document.write(typeof(l1)+"<br/>"); //输出boolean

let l2;
document.write(typeof(l2)+"<br/>"); //输出undefined

let l3 = null;
document.write(typeof(l3)+"<br/>"); //输出Object，null被认为是对象占位符

let l4 = 123;
document.write(typeof(l4)+"<br/>"); //输出number

let l5 = "abc";
document.write(typeof(l5)+"<br/>"); //输出string

let l6 = 10n;
document.write(typeof(l6)+"<br/>"); //输出bigint

1.5 运算符

JavaScript中运算符和Java的大致相同
不同点：
1. ==号比较的是变量的值是否相同，如字符串的"10"跟数字的10比较返回true
2. === 号比较类型和值，则字符串的"10"跟数字的10比较返回false
3. 字符串类型的数字计算时会发生类型转换

1.6 数组

JavaScript数组长度和类型没有限制

定义一个数组的语法是：let 数组名 = [元素];
获取数组长度

使用函数：数组名.length

数组复制

语法：数组1 = [...数组2];

let a = [1,2,3];
let b = [...a];//数组b内容也是1,2,3

数组合并

语法：数组1 = [...数组2,数组3];将数组2和3合并到1

let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b];//数组c内容是1,2,3,4,5,6

字符串转数组

语法：数组 = [...字符串];

let s = "lxq";
let a = [...s];a数组内容是l,x,q

1.7 函数

JavaScript中的函数类似于Java中的方法
普通函数
```
function 方法名(参数){
    方法体;
    return 返回值;
}
```
注意：如果不需要返回值则不用写return语句，参数不用写类型

可变参数

function 方法名(...参数){
    方法体;
    return 返回值;
}

匿名函数

function(参数){
    方法体;
    return 返回值;
}

2 DOM

2.1 概述

DOM指document object model，即文档对象模型
将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作
相关对象：
1. Document，表示文档对象
2. Element，元素对象
3. Attribute，属性对象
4. Text，文本对象

2.2 元素对象的操作

根据document文档对象来获取元素对象

方法	说明
getElementById(id属性值)	根据id属性获取元素对象
getElementsByTagName(标签名)	根据标签名获取元素对象
getElementsByName(name属性值)	根据name属性获取元素对象
getElementsByClassName(class属性值)	根据class属性获取元素对象

根据当前元素对象获取父元素对象

子元素对象.parentElement
通过文档对象创建新元素对象

document.createElement(标签名);
将指定子元素对象添加到父元素中

父元素对象.appendChild(子元素对象);
父元素删除指定的子元素

父元素对象.removeChild(子元素对象);
父元素用新子元素替换旧子元素

父元素对象.replace(新元素,旧元素);

2.3 元素内属性操作

给元素设置属性

setAttribute(属性名,属性值);
根据属性名获取属性值

getAttribute(属性名);
根据属性名移除属性

removeAttribute(属性名);
为元素添加样式

元素对象.style.样式=值;
```
let ele = document.getElementById("a");
ele.style.color = "red";
```
元素对象.className = "类选择器名";

2.4 元素内文本操作

设置文本内容，不解析标签

元素对象.innerText="文本内容";

注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本
设置文本内容，解析标签

元素对象.innerHTML="文本内容";

注意：这里的文本内容会被解析标签

3 事件

事件是某些组件完成某些操作时会触发的代码

常用事件

事件	说明
onload	某个页面或图像被加载完成
onsubmit	表单提交时
onclick	鼠标点击事件
ondblclick	鼠标双击
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用于改变域的内容

绑定事件的方式

通过标签中事件属性进行绑定

<button onclick="触发的操作"></button>

通过DOM元素进行绑定

let b = document.getElementById("btn");
b.onclick=function(){//使用匿名方法
    触发的操作;
}

4 面向对象

4.1 定义类的方式

方式1

class 类名{
    //构造方法
    constructor(变量列表){
        变量赋值;
    }
    //普通方法
    方法名(参数列表){
        方法体;
        return 返回值;
    }
}

let 对象名 = new 类名(实际变量值);
对象名.变量名;
对象名.方法名();

方式2

//在定义类的时候已经创建了对象
let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    },
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    }
};

对象名.变量名;
对象名.方法名();

4.2 继承

JS中顶级父类是Object
继承需要使用extends关键字
```
class 子类 extend 父类{}
```

继承范例

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    show(){
        document.write(this.name+","+this.age+"<br/>");
    }
}

class Worker extends Person{
   constructor(name,age,salary){
       //使用super()调用父类构造方法
        super(name,age);
        this.salary = salary;
   }

   show(){
        document.write(this.name+","+this.age+","+this.salary);
   }
}

let worker = new Worker("张三",23,15000);
worker.show();

5 内置对象

5.1 Number对象

parseFloat(s)方法，将字符串浮点数转为浮点数
parseInt(s)方法，将字符串整数转为整数

5.2 Math对象

ceil(x)方法，向上取整
floor(x)方法，向下取整
round(x)方法，四舍五入
random()方法，返回0到1之间的随机数，不含1
pow(x,y)方法，x的y次方

5.3 Data对象

构造方法

方法说明
Date() 根据当前事件创建对象
Date(value) 指定毫秒值创建对象
Date(year,month[,day,hour,min,sec,mill]) 指定字段创建对象，月份是0到11

方法	说明
Date()	根据当前事件创建对象
Date(value)	指定毫秒值创建对象
Date(year,month[,day,hour,min,sec,mill])	指定字段创建对象，月份是0到11

常用方法

方法	说明
getFullYear()	获取年份
getMonth()	获取月份
getDate()	获取天数
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒
getTime()	返回时间原点至今毫秒数
toLocalString()	返回本地日期格式的字符串

5.4 String对象

构造方法

方法说明
String(value) 根据指定字符串创建对象
let s = “字符串” 直接赋值

方法	说明
String(value)	根据指定字符串创建对象
let s = “字符串”	直接赋值

常用方法

方法	说明
length属性	获取字符串长度
charAt(index)	获取指定索引处字符
indexOf(value)	获取指定字符串出现的索引位置，不存在返回-1
substring(start,end)	根据给出范围截取字符串，含头不含尾
split(value)	根据指定规则切割字符串，返回数组
replace(old,new)	使用新字符替换旧字符

5.5 RegExp对象

构造方法

方法说明
RegExp(规则) 根据制定规则创建对象
let reg = /^规则$/ 直接赋值
匹配方法：test(字符串)方法，用于查看字符串是否符合匹配规则

方法	说明
RegExp(规则)	根据制定规则创建对象
let reg = /^规则$/	直接赋值

5.6 Array对象

常用方法

方法	说明
push(元素)	添加元素到数组末尾
pop()	删除数组末尾元素
shift()	删除数组最前面元素
includes(元素)	判断数组是否包含指定的元素
reverse()	反转数组中的元素
sort()	对数组元素排序

5.7 Set对象

元素唯一，存取顺序一致
构造方法：Set()
常用方法

方法说明
add(元素) 添加元素
size属性获取集合长度
keys() 获取迭代器对象
delete(元素) 删除指定元素

方法	说明
add(元素)	添加元素
size属性	获取集合长度
keys()	获取迭代器对象
delete(元素)	删除指定元素

Set集合遍历范例

let set = new Set();
set.add("a");
set.add("b");
let st = set.keys();
for(let i = 0;i < set.size;i++){
    document.write(st.next().value);
}

5.8 Map对象

key唯一，存取顺序一致
构造方法：Map()
常用方法

方法说明
set(key,value) 向集合添加元素
size属性获取集合长度
get(key) 根据key获取value
entries() 获取迭代器对象
delete(key) 根据key删除键值对

方法	说明
set(key,value)	向集合添加元素
size属性	获取集合长度
get(key)	根据key获取value
entries()	获取迭代器对象
delete(key)	根据key删除键值对

Map集合遍历范例

let map = new Map();
map.set(1,"a");
map.set(2,"b");
let et = map.entries();
for(let i = 0;i < map.size;i++){
    document.write(et.next().value);
}

5.9 JSON对象

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
常用方法

方法说明
stringfy(对象) 将指定对象转换为json格式字符串
parse(字符串) 将指定json格式字符串解析成对象

方法	说明
stringfy(对象)	将指定对象转换为json格式字符串
parse(字符串)	将指定json格式字符串解析成对象

范例

let weather = {
    city : "北京";
    date : "2022-08-08";
    temperature : "10~20";
};
let str = JSON.stringfy(weather);
let weather2 = JSON.parse(str);

6 BOM

BOM(Browser Object Model)，是指浏览器对象模型
将浏览器各个组成部分封装成不同的对象，方便进行操作
具体有如下的对象
1. Navigator，表示浏览器对象
2. Window，窗口对象
3. Location，地址栏对象
4. History，窗口历史对象
5. Screen，显示屏幕对象
Window窗口对象常用功能
- 定时器
  1. 唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识
  2. clearTimeout(标识);方法，根据标识取消一次性定时器
  3. 唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识
  4. clearInterval(标识);方法，根据标识取消循环定时器
- 加载事件：window.onload=触发的事件，用于页面加载完毕时触发的事件
Location地址栏对象常用功能
- 设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容

7 jQuery

7.1 基本语法

7.1.1 对象获取和转换

使用jQuery的属性和方法那么必须保证该对象是jQuery对象，而不是JavaScript方式获得的DOM对象，二者的API方法不能混合使用，如果想要使用那么就要进行对象的转换
JavaScript对象转为jQuery对象

let jQuery对象 = $(JavaScript对象);

jQuery对象转为JavaScript对象

let JavaScript对象 = jQuery对象[索引];
// 或
let JavaScript对象 = jQuery对象.get(索引);

7.1.2 事件

jQuery将事件封装成方法，并且去掉了JavaScript中的.on语法，如

事件说明
load 某个页面或图片加载完成
submit 表单提交
click 鼠标单击
dblclick 鼠标双击
blur 元素失去焦点
focus 元素得到焦点
change 改变域的内容

事件	说明
load	某个页面或图片加载完成
submit	表单提交
click	鼠标单击
dblclick	鼠标双击
blur	元素失去焦点
focus	元素得到焦点
change	改变域的内容

事件的绑定

方法一：jQuery对象.事件名(执行的功能);

let jq = $("#btn");// 根据属性获取jQuery对象
jq.click(function(){
    事件触发时执行的代码;
});// 使用匿名方法指定触发事件时执行的功能

方法二：jQuery对象.on(事件名,执行的功能);如

let jq = $("#btn");// 根据属性获取jQuery对象
jq.on("click",function(){
    事件触发时执行的代码;
});// 给jq对象绑定click事件，注意click需要加上双引号，并且使用匿名方法指定触发事件时执行的功能

事件的解绑
- jQuery对象.off(事件名);
```
jq.off("click"); / /将click事件从该对象解除
```
- 注意：如果不指定需要解除的事件名，会将该对象绑定的所有事件都解除

7.1.3 遍历操作

方式一

for(let i=0;i<容器长度;i++){
    执行功能;
}

方式二

容器对象.each(function(index,ele){
    执行功能;
});

方式三

$.each(容器对象,function(index,ele){
    执行功能;
});

方式四

for(ele of 容器对象){
    执行功能;
}

7.2 选择器

7.2.1 基本选择器

类似于css中的选择器，用于获取元素
jQuery中选择器的语法：$()

基本选择器如下：

选择器	语法	作用
元素选择器	$(“元素名称”)	根据类名获取元素对象数组
id选择器	$(“#+id属性的属性值”)	根据id属性获取元素对象
类选择器	$(“.+class属性的属性值”)	根据类属性获取元素对象数组

7.2.2 层级选择器

选择器	语法	作用
后代选择器	$(“A B”)	获取A下的所有B(包含B的子级)
子选择器	$(“A > B”)	获取A下的所有B(不包含B的子集)
兄弟选择器	$(“A + B”)	A相邻的下一个B
兄弟选择器	$(“A ~ B”)	A相邻的所有B

A和B是指标签名

7.2.3 属性选择器

选择器	语法	作用
属性名选择器	$(“A[属性名]”)	获取含有指定属性名的元素对象数组
属性值选择器	$(“A[属性名=属性值]”)	获取含有指定属性名和对应属性值的元素对象数组

A是指标签名

7.2.4 过滤器选择器

选择器	语法	作用
首元素选择器	$(“A:first”)	获取A中第一个元素对象
尾元素选择器	$(“A:last”)	获取A中最后一个元素对象
非元素选择器	$(“A:not(B)”)	获取A中不包含指定内容的元素对象
偶数选择器	$(“A:even”)	获取A中索引值是偶数的元素对象
奇数选择器	$(“A:odd”)	获取A中索引值是奇数的元素对象
等于索引选择器	$(“A:eq(index)”)	获取A中指定索引值的元素对象
大于索引选择器	$(“A:gt(index)”)	获取A中大于指定索引值的元素对象
小于索引选择器	$(“A:lt(index)”)	获取A中小于指定索引值的元素对象

A表示标签名

7.2.5 表单属性选择器

选择器	语法	作用
可用元素选择器	$(“A:enabled”)	获取A中可用的元素对象
不可用元素选择器	$(“A:disabled”)	获取A中不可用元素对象
单选框/复选框选中选择器	$(“A:checked”)	获取A中被选中元素对象
下拉框选中选择器	$(“A:selected”)	获取A中被选中元素对象

7.3 DOM

7.3.1 操作文本

常用方法

方法作用
html() 获取标签中的文本
html(value) 设置标签的文本内容，如果文本含有html代码也会解析

方法	作用
html()	获取标签中的文本
html(value)	设置标签的文本内容，如果文本含有html代码也会解析

7.3.2 操作对象

常用方法

方法	作用
$(“元素”)	创建一个元素对象
append(element)	将子元素添加为最后一个子元素，由父元素对象调用
appendTo(element)	将子元素添加为最后一个子元素，由子元素调用
prepend(element)	将子元素添加为第一个子元素，由父元素对象调用
prepandTo(element)	将子元素添加为第一个子元素，由子元素调用
before(element)	将元素添加到调用该方法的元素前面
after(element)	将元素添加到调用该方法的元素后面
remove()	删除指定元素（删除自己）
empty()	清空子元素，自己仍然存在

7.3.3 操作样式

常用方法

方法	作用
css(name)	根据样式属性名获取css样式
css(name,value)	设置css样式，name是样式属性名，value是值
addClass(value)	给指定对象添加样式，value是样式的类名
removeClass(value)	给指定对象删除样式，value是样式的类名
toggleClass(value)	如果没有该样式则添加，如果有则删除，value是样式类名

7.3.4 操作属性

常用方法

方法	作用
attr(name)	获取指定属性的值
attr(name,value)	设置指定属性的值
prop(name)	获取指定属性的值（用于checked，selected属性），值为true或false
prop(name,value)	设置指定属性的值（用于checked，selected属性），值为true或false

8 Ajax

8.1 概述

Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML)技术可以实现页面的局部更新
传统请求方式是在页面跳转或页面刷新时发出请求，每次发出请求都会请求一个新的页面，即使刷新也是重新加载本页面
Ajax异步请求方式不同于传统的方式，通过Ajax异步请求方式向服务器发出请求，得到数据后再更新页面（通过DOM操作修改页面），整个过程不发生页面跳转或刷新操作

传统方式与Ajax异步请求的对比

方式	协议	请求发出方式	数据展示方式
传统请求方式	HTTP	页面链接跳转	重新载入新页面
Ajax异步请求方式	HTTP	由XMLHttpRequest实例发出请求	JavaScript和DOM技术把数据更新到页面

Ajax优势：

请求数据量少：只需请求必要数据，对不需更新的数据不做请求
请求分散：按需请求，异步的形式，在任意时刻发出，所以请求不会集中爆发
用户体验优化：响应时间短，速度快

使用JavaScript可以实现Ajax，但是代码复杂需要考虑到浏览器兼容问题
jQuery二次封装了JavaScript，同时对Ajax操作进行了整理和封装，简化了Ajax操作

8.2 实现方式

8.2.1 使用GET方式实现Ajax

语法

$.get(url,data,function(data,status,xhr),datatype)

该方法由jQuery提供，其中参数含义如下

参数	说明
url	必选，规定加载资源的路径
data	可选，发送至服务器的数据
function(data,status,xhr)	可选，请求成功时执行的函数，data表示从服务器返回的数据，status表示请求的状态值，xhr表示当前请求相关的XMLHttpRequest对象
datatype	可选，预期的服务器响应的数据类型（xml,html,text,script,json,jsonp）

范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username">
    <label for="password">密码</label>
    <input type="password" id="password">
    <input type="button" id="btn" value="登录">
    <div id="div"></div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#btn").on("click",function(){
        let username = $("#username").val();
        let password = $("#password").val();
        $.get(
            "AjaxServlet",
            {"username":username,"password":password},
            function(data){
                $("#div").html(data);
            },
            "html"
        );
    });
</script>
</html>

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().write("<h1>"+username+"</h1>");
        resp.getWriter().write("<h1>"+password+"</h1>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

8.2.2 使用POST方式实现Ajax

POST方式实现的Ajax与GET方式类似，只是方法名不同，为$.post()

8.2.3 使用通用方式实现Ajax

通用的方式是使用$.ajax()方法来实现Ajax
上述的GET和POST方式使用到的方法都是通过封装了这个$.ajax()方法来实现
语法
```
$.ajax({name:value,name:value....})
```
- ajax方法的参数是一对{}包起来的键值对

该方法的常用参数（键）如下

参数	说明
url	请求的路径
async	是否异步，true或false，默认为true
data	发送到服务器的数据
type	请求的方式，POST或GET，默认是GET
dataType	预期的服务器响应的数据类型（xml,html,text,script,json,jsonp）
success(result,status,xhr)	请求成功是执行的方法
error(xhr,status,error)	请求失败时执行的方法

范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username">
    <label for="password">密码</label>
    <input type="password" id="password">
    <input type="button" id="btn" value="登录">
    <div id="div"></div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#btn").on("click",function(){
        let username = $("#username").val();
        let password = $("#password").val();
        $.ajax({
            url:"AjaxServlet",
            data:{
                "username":username,
                "password":password
            },
            dataType:"text",
            success:function(data){
                $("#div").html(data);
            }
        });
    });
</script>
</html>

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().write("<h1>"+username+"</h1>");
        resp.getWriter().write("<h1>"+password+"</h1>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}