本文详细介绍了JavaScript的基础知识，包括语法入门、数据类型、数组、对象、流程控制、函数、作用域、面向对象编程、内置对象、DOM操作和表单处理。深入探讨了JavaScript的核心概念，并提供了实例代码，适合初学者系统学习。
1.什么是JavaScript
JavaScript是一门脚本语言
一个合格的后端人员必须精通JavaScript
2.快速入门
2.1引入JavaScript
1.内部标签使用
<script>
alert("hello world");
</script>
2.外部引入
abc.js
<script src="js/abc.js"></script>
2.2基本语法入门
定义变量：var
条件控制ifelse（和java一样）
console.log()：在浏览器控制台打印变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.定义变量 变量类型 变量名 = 变量值;
var score =1;
//2.条件控制
if(score>60&&score<70){
alert("60-70");
}else if(score>70&&score<80){
alert("70-80");
}else {
alert("other");
}
/* js严格区分大小写
* console.log（score）在浏览器的控制台打印变量
* */
</script>
</head>
<body>
</body>
</html>
2.3数据类型
数值，文本，图形，音频，视频…
变量
var a=1;
number（js不区分小数和整数）
NaN与所有数值都不相等，包括自己
123//整数123
123.1//浮点数123.1
1.23e3//科学计数法
-99//负数
NaN//not a number
Infinity//表示无限大
字符串
'abc'
"abc"
布尔值
true
false
逻辑运算
&&//与
||//或
!//非
比较运算符
===//绝对等于（类型一样，值一样才为true）
= //赋值
==//等于（类型不一样，值一样，也是true）
===//绝对等于（类型一样，值一样才为true）
浮点数问题
尽量避免使用浮点数进行运算，存在精度问题
console.log((1/3)===(1-2/3))
null和undefined
null：空
undefined：未定义
java数组：一系列相同类型的对象/JavaScript中不需要
取数组下标如果越界就会undefined
数组是中括号
var arr =[1,2,3,4,5,'hello',null,true];
对象：大括号
每个属性之间用逗号隔开，最后一个不需要添加
var person={
name:'xuebo',
age:3,
tags:['js','java','...']
}
2.4严格检查模式
’use strict‘；预防JavaScript的随意性导致的一些问题
必须写在第一行
局部变量建议用let定义
<script>
'use strict';
let i=1;
</script>
3.数据类型
3.1字符串
1.正常的字符串用单引号或双引号包裹
2.注意转义字符:
\ '：字符串
\n：换行
\t：table
\u4e2d：unicode字符
3.多行字符串编写
tab上面的键
var mag= `
hello
world
你好呀
`
4.模板字符串
var name = "xuebo";
let age=10;
let msg = `你好呀,${name}`
console.log(msg);
5.字符串长度
console.log(str.length)
6.字符串的可变性
不可变
7.大小写转换
student.toLocaleUpperCase()//大写
student.toLowerCase()//小写
8.indexOf（）
9.substring（1，3）：截取字符串，包括第一个不包含第三个
3.2数组
Array可以包含任意的数据类型
var arr= [1,2,3,4,5,6]
arr[0]//赋值
arr[0]=1;
1.长度：arr.length
假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2.indexOf(某元素出现的下标索引)
arr.indexOf(2)
字符串的1和数字的1不同
3.slice()：截取Array的一部分，返回一个新的数组
slice类似于String中的substring，左开右闭
arr.slice(3)
4.push、pop
push：在数组后面添加元素，压入到尾部
arr.push('a','b')
pop：弹出尾部的一个元素
arr.pop()
5.unshift()、shift()
unshift() ：往头部压入元素
arr.unshift('a','b')
shift()：弹出头部的元素
arr.shift()
6.排序sort()
["B","C","A"]
arr.sort();
["A","B","C"]
7.元素反转
反转排序
arr.reverse()
8.concat（）：数组元素的拼接
注意：concat（）并没有修改数组，只是会返回一个新的数组
9.连接符join
打印拼接数组，使用特定的字符串连接
10.多维数组
arr=[[2,3] ,[4,5],["a","b"]]
arr[1][1]
3.3对象
若干个键值对
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
js中的对象{。。。。。}表示一个对象，键值对表示属性：xxxx：xxxx，使用多个属性之间用逗号隔开，最后一个属性不加逗号
JavaScript中所有键都是字符串，值是任意对象
1.对象赋值
person.name="xuebo"
2.使用不存在的对象属性不会报错
3.动态删减属性
delete person.name
4.动态添加属性,直接给新的属性添加值即可
person.haha="haha"
5.判断属性值是否在对象中 xxx in xxx
'age' in person
6.判断属性是否为自身拥有的
person.hasOwnPropeerty('age')
3.4流程控制
if判断
var age = 3;
if(age>3)
{
alert("haha")
}else
{
alert("kuwa")
}
while循环：避免死循环
while (age<100){
age=age+1;
console.log(age);
}
for循环
for (let i = 0; i < 100; i++) {
console.log(i)
}
foreach循环
var a =[1,2,3,414,1412,5,353,1];
a.forEach(function (value){
console.log(value)
})
3.5Map和Set
map:
成绩和名字
var map = new Map([['tom',100],['jack',90],['xuebo',99]]);
var name = map.get('xuebo');
map.set('admin',123456);
console.log(name);
set:无序不重复的集合
var set = new Set([3,1,1,1,1])
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
3.6iterator
通过for of 实现 /for in是下标
遍历数组
//通过for of 实现 /for in是下标
var arr = [3,4,5];
for (var x of arr) {
console.log(x)
}
遍历map
var map = new Map([['tom',100],['jack',90],['xuebo',99]]);
for (let x of map) {
console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for (let x of set) {
console.log(x)
}
4.函数
方法：对象（属性，方法）
函数：
4.1定义函数
- 定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}
else {
return -x;
}
}
如果没有执行ruturn，函数执行完也会返回结果
- 定义方式二
var abs = function (x){
if(x>=0){
return x;
}
else {
return -x;
}
}
- 调用函数
abs(10)
参数问题：手动抛出异常
var abs = function (x){
if(typeof x!=="number")
throw "this is not a number"
if(x>=0){
return x;
}
else {
return -x;
}
}
arguments
arguments是js免费赠送的一个关键字
arguments代表传递进来的所有参数，是一个数组
var abs = function (x){
console.log("x-》"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
if(x>=0){
return x;
}
else {
return -x;
}
}
问题：arguments会包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有的参数
rest
获取除了已经定义参数以外的所有参数
rest参数只能写在最后面，必须用…标识
function aaa(a,b,...rest){
console.log(a)
console.log(b)
console.log(rest)
}
4.2变量的作用域
在js中，var定义的变量是有作用域的
在函数体中声明，在函数体外不可以使用（闭包）
两个函数使用相同的变量名，在函数内部就不冲突
内部函数可以访问外部函数的成员，反之不可
内部函数变量和外部函数变量重名，函数查找变量从自身开始，由内向外查找，假设外部存在同名函数变量，内部函数变量会屏蔽外部函数变量
'use strict';
function qj(){
var a=1;
a=a+1;
}
a = a+2;//Uncaught ReferenceError: a is not defined
所有变量定义放在函数头部
全局函数
全局对象window
alert(window.x)：默认所有的全局变量，都会自动绑定在windows对象下
alert（）这个函数本身也是window变量
所有的全局变量都会绑定在window上，不同的js文件使用使用相同的全局变量就会冲突
定义唯一全局变量
把自己的代码放入自己定义的唯一空间内，降低全局命名冲突问题
jQuery：$()
局部作用域let
解决局部作用域冲突
常量const
ES6之前全部大写命名即为常量
ES6引入常量关键字
4.3方法
定义方法
方法就是把函数放在对象中，对象只有属性和方法
var xuebo = {
name:'xue',
birth: 1995,
age : function (){
//今年减去出生年
var now= new Date().getFullYear()
return now - this.birth;
}
}
//属性：xuebo.name
//方法：xuebo.age（）//方法一定要带（）
apply：在js中指定this的指向
getAge.apply(xuebo,[])
5.内部对象
标准对象：
5.1Date
var now = new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime();
5.2JSON
json：计算机的数据交换格式
简洁的层次结构
提升网络传输效率
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key：value
var user = {
name:'xuebo',
age:3,
sex:'男'
}
//对象转换为JSON字符串
var jsonUser= JSON.stringify(user);
//JSON字符串转换为对象
JSON.parse(jsonUser);
5.3Ajax
原生的js写法：xhr异步请求
jQuery封装好的方法：$()
axios 请求
6.面向对象编程
JavaScript；Java；c#：面向对象
JavaScript：原型
class继承
1.定义一个类，属性，方法
//定义学生类
class Student{
constructor(name) {
this.name= name;
}
hello(){
alert('hello')
}
}
var xiaoming = new Student('xiaoming')
xiaoming.hello();
2.继承
class Student{
constructor(name) {
this.name= name;
}
hello(){
alert('hello')
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生')
}
}
var xiaoming = new Student('xiaoming')
var xiaohong = new xiaoStudent('xiaohong',1);
本质：查看对象原型
7.操作BOM对象
- 浏览器介绍
BOM: 浏览器对象模型
IE：6-11
Chrome
Safari
FireFox
window
window代表浏览器窗口
window.alert(1)
Navigator
封装了浏览器的信息
大多数时候不会使用navigator对象，因为会被人为修改
screen
代表屏幕尺寸
screen.width;
screen.height
location*
代表当前页面的url信息
设置新的地址
location.assign('https://www.xxx.com')
document
代表当前的页面
document.title
获取具体的文档树节点
<dl id="app">
<dt>JAVA</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl = document.getElementById('app')
</script>
获取cookie
document.cookie
history
代表浏览器的历史纪录
history.back()//后退
history.forward()//前进
8.操作DOM对象
DOM：文档对象模型
核心：浏览器网页就是一个DOM树型结构
- 更新：更新DOM节点
- 遍历：遍历得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个DOM节点，必须要先获得这个DOM节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css的选择器
var h1= document.getElementsByTagName('h1');
var p1= document.getElementById('p1');
var h1= document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children;//获取父节点下的所有子节点
father.firstChild
father.lastChild
这是原生代码，之后尽量用jQuery
更新节点
操作文本
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
id1.innerText = '123'//修改文本的值
id1.innerHTML= '<strong> 123</strong>> ';//解析HTML文本标签
</script>
操作css
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
id1.innerText = '123'//修改文本的值
id1.style.color = 'red';
id1.style.fontSize = '200px';
id1.style.padding='2em'
删除节点
删除节点的步骤：获取父节点，通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self= document.getElementById('p1')
var father =p1.parentElement;
father.removeChild(self);
删除是一个动态的过程
father.removeChild(father.children[0])
插入节点
1.获得的dom节点是空的，可以通过innerHTML增加一个元素
2.dom节点不是空的，已经存在元素
追加操作
1.在原有节点追加
<p id="js">javascript</p>
<div id="list">
<p id="javase">javaee</p>
<p id="javaee">javase</p>
<p id="javame">javame</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);//追加
2.新建一个标签，实现插入
<p id="js">javascript</p>
<div id="list">
<p id="javase">javaee</p>
<p id="javaee">javase</p>
<p id="javame">javame</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
//通过js创建新的节点
var newP = document.createElement('p')//创建一个p标签
newP.id = 'newP';
newP.innerText='hello';
list.appendChild(newP);
创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
document.getElementByTagName('head')[0].appendchild(myscript)
插到前面
insertBefore
<p id="js">javascript</p>
<div id="list">
<p id="javase">javaee</p>
<p id="javaee">javase</p>
<p id="javame">javame</p>
</div>
<script>
var javaee = document.getElementById('javaee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,javaee);
//list为要包含的节点，
</script>
9.操作表单（验证）
表单：
- 文本框 text
- 下拉框 <select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- 。。。。。
表单的目的：提交信息
获得要提交的信息
<div>
<form action="post"></form>
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</div>
<script>
//得到输入框的值
var username = document.getElementById('username');
//修改输入框的值
username.value =123;
var boy_radio = document.getElementById('boy')
var girl_radio = document.getElementById('girl')
//对于单选框，多选框等等固定的值
boy_radio.checked;//查看返回的结果是否为ture，true则被选中
</script>
提交表单，md5加密密码，表单优化
<form action="#" method="post" onsubmit=" return aaa()">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>登录密码：</span> <input type="password" id="password" name="password">
</p>
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var username = document.getElementById('username')
var password = document.getElementById('password')
console.log(username.value);
console.log(password.value);
//md5算法
password.value=md5(password.value);
console.log(password.value);
return true;
10.jQuery
jQuery库：里面存在大量的JavaScript函数
获取jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
公式：$(selector).action()
<script>
document.getElementById('text-jquery');
//css选择器
$('#text-jquery').click(function (){
alert('hello jquery')
})
</script>
选择器
//原生js，选择器少，麻烦，不好记
//标签选择器
document.getElementsByTagName()
//id选择器
document.getElementById()
//clsaa选择器
document.getElementsByClassName()
//jQuery css中的选择器都能用
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//类选择器
文档工具站：jquery.cuishifeng.cn
事件
- 鼠标事件
- 键盘事件
- 其他事件
鼠标事件
$('.class1').mousemove
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lesson5/lib/jquery-3.5.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse：<span id="move"></span>
<div id="divMove">
在这里移动试试
</div>
<script>
//当网页元素加载完毕后响应事件
// $(document).ready(function (){
//
// })
//简写
$(function (){
$('#divMove').mousemove(function (e){
$('#move').text('X:'+e.pageX+'y:'+e.pageY)
})
})
</script>
</body>
操作dom
节点文本操作
获得值
$('#text-ul li[name=python]').text();
设置值
$('#text-ul li[name=python]').text('设置值');
获得值
$('text-ul').html();
设置值
$('text-ul').html('<strong>123</strong>');
css操作
$('#text-ul li[name=python]').css('color','red');
元素的显示和隐藏 本质：display：none
$('#text-ul li[name=python]').show()
$('#text-ul li[name=python]').hide()
1863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
