[阶段3 企业开发基础] 10. 前端基础 JS篇
文章目录
-
- 1 基本语法
- 1.1 引入方式
- 1.2 输入输出语句
- 1.3 变量和常量
- 1.4 原始数据类型
- 1.5 运算符
- 1.6 数组
- 1.7 函数
- 2 DOM
-
- 2.1 概述
- 2.2 元素对象的操作
- 2.3 元素内属性操作
- 2.4 元素内文本操作
- 3 事件
- 4 面向对象
-
- 4.1 定义类的方式
- 4.2 继承
- 5 内置对象
-
- 5.1 Number对象
- 5.2 Math对象
- 5.3 Data对象
- 5.4 String对象
- 5.5 RegExp对象
- 5.6 Array对象
- 5.7 Set对象
- 5.8 Map对象
- 5.9 JSON对象
- 6 BOM
- 7 jQuery
-
- 7.1 基本语法
-
- 7.1.1 对象获取和转换
- 7.1.2 事件
- 7.1.3 遍历操作
- 7.2 选择器
-
- 7.2.1 基本选择器
- 7.2.2 层级选择器
- 7.2.3 属性选择器
- 7.2.4 过滤器选择器
- 7.2.5 表单属性选择器
- 7.3 DOM
-
- 7.3.1 操作文本
- 7.3.2 操作对象
- 7.3.3 操作样式
- 7.3.4 操作属性
- 8 Ajax
-
- 8.1 概述
- 8.2 实现方式
-
- 8.2.1 使用GET方式实现Ajax
- 8.2.2 使用POST方式实现Ajax
- 8.2.3 使用通用方式实现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)+"
"); //输出boolean
let l2;
document.write(typeof(l2)+"
"); //输出undefined
let l3 = null;
document.write(typeof(l3)+"
"); //输出Object，null被认为是对象占位符
let l4 = 123;
document.write(typeof(l4)+"
"); //输出number
let l5 = "abc";
document.write(typeof(l5)+"
"); //输出string
let l6 = 10n;
document.write(typeof(l6)+"
"); //输出bigint
1.5 运算符
- JavaScript中运算符和Java的大致相同
- 不同点：
==号比较的是变量的值是否相同，如字符串的"10"跟数字的10比较返回true===号比较类型和值，则字符串的"10"跟数字的10比较返回false- 字符串类型的数字计算时会发生类型转换
1.6 数组
-
JavaScript数组长度和类型没有限制
定义一个数组的语法是：
let 数组名 = [元素]; -
获取数组长度
使用函数：
数组名.length -
数组复制
语法：
数组1 = [...数组2];let a = [1,2,3]; let b = [...a];//数组b内容也是1,2,3 -
数组合并
语法：
数组1 = [...数组2,数组3];将数组2和3合并到1let 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文档进行增删改查的动态操作
- 相关对象：
- Document，表示文档对象
- Element，元素对象
- Attribute，属性对象
- 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+"
"); } } 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之间的随机数，不含1pow(x,y)方法，x的y次方
5.3 Data对象
-
构造方法
方法 说明 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 = “字符串” 直接赋值 -
常用方法
方法 说明 length属性 获取字符串长度 charAt(index) 获取指定索引处字符 indexOf(value) 获取指定字符串出现的索引位置，不存在返回-1 substring(start,end) 根据给出范围截取字符串，含头不含尾 split(value) 根据指定规则切割字符串，返回数组 replace(old,new) 使用新字符替换旧字符
5.5 RegExp对象
-
构造方法
方法 说明 RegExp(规则) 根据制定规则创建对象 let reg = /^规则$/ 直接赋值 -
匹配方法：
test(字符串)方法，用于查看字符串是否符合匹配规则
5.6 Array对象
-
常用方法
方法 说明 push(元素) 添加元素到数组末尾 pop() 删除数组末尾元素 shift() 删除数组最前面元素 includes(元素) 判断数组是否包含指定的元素 reverse() 反转数组中的元素 sort() 对数组元素排序
5.7 Set对象
-
元素唯一，存取顺序一致
-
构造方法：
Set() -
常用方法
方法 说明 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删除键值对 -
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格式字符串解析成对象 -
范例
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)，是指浏览器对象模型
- 将浏览器各个组成部分封装成不同的对象，方便进行操作
- 具体有如下的对象
- Navigator，表示浏览器对象
- Window，窗口对象
- Location，地址栏对象
- History，窗口历史对象
- Screen，显示屏幕对象
- Window窗口对象常用功能
- 定时器
唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识clearTimeout(标识);方法，根据标识取消一次性定时器唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识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 改变域的内容 -
事件的绑定
-
方法一：
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代码也会解析
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(""
+username+""); resp.getWriter().write(""
+password+""); } @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方法的参数是一对
{}包起来的键值对
- 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(""
+username+""); resp.getWriter().write(""
+password+""); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }