本文详细介绍了JavaScript的基础语法、数据类型（包括数值、文本、布尔值等）、流程控制结构、DOM操作、jQuery使用、事件处理、函数、JSON、Ajax、面向对象编程以及DOM操作和表单处理的相关知识，适合初学者快速入门和进阶学习。
概述
是一门弱类型脚本语言
Java、JavaScript
作为一名合格的后端人员，必须精通JavaScript
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript">-->
<!-- alert("hello, world");-->
<!-- </script>-->
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>
基础语法（java类似）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num = 77;
//alert(num);
if (num > 60 && num < 70){
alert("合格")
}else if(num>=70 && num <= 80){
alert("中")
}else {
alert("other");
}
/***
*
*
*/
</script>
</head>
<body>
</body>
</html>
数据类型
数值、文本、图像、音频、视频
number
js不区分小数和整数 Number
123 整数123
123.1 浮点数123.1
1.12e1 科学计数法
-99 复数
NaN not a number
Infinity 无穷大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算
&& 两个真则真
|| 一个真就真
! 真即假，假即真
比较运算符
= 、== 等于（类型不一样，值一样也是true） ==== 绝对等于 类型一样 值一样结果为true
js 的缺陷，坚持不用 == 比较
须知：NaN === NaN与所有的值不等，若要判断使用isNaN(NaN)
浮点数问题
console.log((1/3) === (1-2/3))
避免使用浮点数，存在精度问题
null和undefined
null为空 undefined未定义
数组
var arr = [1,2,3,"hello",true];
new Array(1,2,"tt")
数组下标越界，只会报undefined
对象
对象是大括号，数组是中括号
每个属性之间用逗号隔开，最后一个不需要
//Person person = new Person();
var person = {
name:"ty",
age:12,
tags:["js","css","html","java"]
}
严格检查模式
use strict 必须写在第一行
数据类型
字符串
正常字符串使用单引号、双引号都可以
注意转义字符
’ \n \t \ue2d \u### unicode字符
\x4l ascll字符
多行字符串编写
多行字符串
var msg = `gello
word
ee
ww`
模板字符串
let name = "ty";
let age = 10;
let message = `hello, ${name},今年${age}岁;`;
字符串长度 str.length
长度不可变
let str = "efvbgeSSfQfb";
console.log(str.toUpperCase());
console.log(str.toLocaleLowerCase());
console.log(str.indexOf(`e`));
console.log(str.substring(1));//从1到最后
console.log((str.substring(1,4)));
数组
可以包含任意的数据类型
长度 length
注意：加入给数组的长度赋值，数组大小会发生变化，如果赋值较小，元素会丢失
indexOf 通过元素下标获取元素
slice 截取array的一部分，返回一个新的数组，类似于string中的substring
push 压入到尾部数据 pop 弹出尾部的一个元素
unshift 压入元素到头部 shift 弹出头部的一个元素
sort 排序
reverse 反转
concat 替换 没有修改数组，只是返回一个新的数组
连接符 join 打印拼接数组，使用特定的字符串连接
多维数组
var arr = [[1,2],[2,3],[3,4]];
console.log(arr[1][1]);
对象
键值对的形式出现
对象赋值
使用一个不粗只能的对象属性，不会报错，undefined
动态的删减属性，通过delete删除对象的属性
动态添加 直接给新的属性添加值即可
判断属性值是否在对象中 xxx in xxx
判断是否拥有对象自身的hasOwnProperty
var person = {
name:'ty',
age:12,
score:77,
email: '291120999@11'
}
流程控制
if 、for 、while、do…while 、forEach
//forEach
let arr = [1,25,74,11,4];
for (const arrKey in arr) {
console.log(arr[arrKey]);
}
Map和Set
set无序不重复
//Map Set
var Map = new Map([["tom",11],["ty",99],["rr",30]]);
console.log(Map.get("tom"));
Map.set("admin",123);
console.log(Map);
iterator
遍历数组 for…of 遍历下标for… in
//Map Set
var Map = new Map([["tom",11],["ty",99],["rr",30]]);
console.log(Map.get("tom"));
Map.set("admin",123);
console.log(Map);
for (const x of Map) {
console.log(x);
}
var set = new Set([1,1,3,2,3,6,5,3]);
for (const number of set) {
console.log(number);
}
函数
绝对值函数
function abs(x) {
if (x <= 0){
return -x;
}else {
return x;
}
}
一旦执行了return方法，代表函数执行结束
如果没有执行return，函数执行完会返回结果，结果就是undefined
注意：JS可以传任意个参数，也可以不传
假设没有参数参入，手动抛出异常
var abs =function (x) {
if (typeof x!== 'number'){
throw 'Not a number'
}
if (x <= 0){
return -x;
}else {
return x;
}
}
传入参数过多
argument代表传入进来的参数是一个数组
只获取第一个参数
function ab(y) {
console.log("y==>"+y);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (y <= 0){
return -y;
}else {
return y;
}
}
获取多个参数
function abc(a,b,...c) {
console.log("a==>"+a);
console.log("b==>"+b);
console.log("c==>"+c);
}
变量作用域
在JS中，var定义变量实际有作用域
假设函数体中声明，则在函数体外不可以使用
两个函数使用相同的变量名，只要在函数体内部，不冲突
内部函数可以访问外部函数的成员，反之不可以
假设内部成员变量和外部成员变量重名！！！
假设在js中函数查找变量从自身函数开始，由内向外寻找；假设外部存在同名的函数变量，内部函数会屏蔽外部函数的变量
全局变量
默认所有的全局变量，都会自动绑定在window对象下
alert函数本身也是一个window变量
js实际上就只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错RefrenceError
把代码放入到自己定义的函数中，减少相同函数的重复率
局部作用域 let
ES6，let解决了局部作用域冲突的问题
常量const
只有用全部大写字母命名的变量就是常量，建议不要修改这样的值
方法
方法就是把函数放在对象的里面，对象只有两个对象，属性和方法
var ty = {
name:'ty',
age:15,
birth:1000,
score: function () {
var now = new Date().getFullYear();
return now-this.birth;
}
}
this是无法指向的，是默认指向调用他的那个对象
常用对象
Math
random():生成一个0~1之间的随机数
round(x):把一个数四舍五入接近整数
abs(x):返回值的绝对值
console.log(Math.random())
console.log(Math.abs(-1))
console.log(Math.abs(1))
console.log(Math.round(1.1))
console.log(Math.round(1.5))
Date对象
Date返回当前的日期时间
getDate():返回某月中的一天
getDay：返回一周中的一天
getMonth():返回月份
getYear():对象以两位或者四位返回
getHours():返回小时
getMinutes：返回分钟
getSecondes：返回秒
getTime():返回从1970年到现在的毫秒值
var date = new Date();
var year = date.getFullYear();
var data = date.getDate();
var month = date.getMonth()+1;
//星期
var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var day = date.getDay();
var wk = week[day];
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(year+"年"+month+"月"+data+"日 "+wk+" "+hours+":"+minutes+" "+seconds);
JSON
JavaScript Object Notation 轻量级数据交换格式
层次结构
有效提高玩个够传输效率
任何js支持的类型都可以用json表示
var user = {
name:'ty',
age:18
}
var s = JSON.stringify(user);
var parse = JSON.parse(s);
Ajax
原生的js写法，xhr异步请求
jquery封装好的方法
axios请求
面向对象
JS、Java、c#
JS有些特别
类：模板
对象：具体的实例
name:'ty',
age:18,
run:function () {
console.log(this.name,+"run....")
}
}
function cc() {
name:'cc'
}
cc._proto_ = student;
Class对象
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("study class");
}
}
var student = new Student("ty");
继承
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("study class");
}
}
class bigStudent extends Student{
constructor(name,score) {
super(name);
this.score= score;
}
myScore(){
alert("只考了22分！！！");
}
}
var student = new Student("ty");
var bs = new bigStudent("cc",33);
DOM操作对象
JS诞生就是要在浏览器上运气
DOM就是浏览器对象模型
window
Navigator
location
当前页面的URL信息
host 网址
href 地址
protocol 协议
reload 刷新
assign 设置新的地址
document
代表当前页面，HTML DOM文档树
获取文档树的结点
<dl id="app">
<dd>java</dd>
<dd>js</dd>
<dd>css</dd>
</dl>
<script>
var byId = document.getElementById("app");
</script>
获取cookie document.cookie
history.forward 返回上一页
history.back 跳到下一页
操作DOM对象
核心
浏览器就是一个DOM树形结构
更新、遍历、删除、添加
操作dom节点，先获取节点
获取DOM
<dl id="app">
<dd>java</dd>
<dd>js</dd>
<dd>css</dd>
</dl>
<h1>标题党</h1>
<p id="ap">p1</p>
<p class="score">p2</p>
<script>
var byId = document.getElementById("app");
var className = document.getElementsByClassName("score");
var tagName = document.getElementsByTagName("h1");
var appId = document.getElementById("ap");
var children = byId.children;
console.log(className);
console.log(tagName);
console.log(appId);
console.log(children);
操作文本
app.innerText 修改文本
app.innerHTML=‘11’ 可以解析HTML文本标签
操作JS
app.style.color=‘red’
删除结点
先获取父节点，再从父节点中删除
app.removeChild(d1)
删除多个节点时，注意children是时刻在变化的，删除节点一定要注意
插入
<p id="app"> HTML</p>
<div id="ap">JS
<p id="ee">Java</p>
<p id="me">Java</p>
<p id="se">Java</p>
</div>
<script>
var byId = document.getElementById('app');
var ee = document.getElementById('ap');
//byId.appendChild(ap) 追加
//创建一个节点
var nowP = document.createElement('p');
nowP.id= "nowP";
nowP.innerText="HELLO";
ap.appendChild(nowP);
console.log(ap);
//创建一个style
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css')
myStyle.innerHTML ="body{background: greenyellow;}"
document.getElementsByTagName('head')[0].appendChild(myStyle);
表单操作
表单就是form dom树
文本框 text 下拉框 select 的那选课 radio 多选框 checkbox 隐藏域hidden 密码域 password
表单的目的：提交信息
获得信息、提交信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form id="app" method="post" action="create.html" onsubmit="return OK()">
<p>
<span>用户名：<input type="text" id="username" name="username" value="123" required /></span>
</p>
<p>
<span>密码：<input type="password" id="input-password" name="password" value="123" required/></span>
</p>
<span><input type="password" hidden name="password" id="md5-password"/></span>
<p>
<span>性别：</span>
<input type="radio" name="sex" id="boy" value="man" checked /> 男
<input type="radio" name="sex" id="girl" value="woman" />女
</p>
<button id="btn">提交</button>
</form>
<script>
function OK() {
alert("aaaa");
var uname = document.getElementById("username");
var pwd = document.getElementById("input-password");
var md5Pwd = document.getElementById("md5-password");
pwd.value = md5(md5Pwd.value);
console.log(uname.value);
console.log(pwd.value);
console.log(md5Pwd);
return true;// 阻止提交
}
</script>
</body>
</html>
JQuery
选择器
css中的选择器都能使用
$("p").click();
$("#id").click();
$(".class").click();
jquery帮助文档：https://jquery.cuishifeng.cn/
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="min3.7.js"></script>
<style>
div{
width: 500px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
鼠标移动：<span id="moveEvent"></span>
<div id="app">在这里鼠标移动试试</div>
<script>
$(function () {
$("#app").mousemove(function (e) {
$("#moveEvent").text('x:'+e.pageX+", y:"+e.pageY);
})
});
</script>
</body>
</html>
jquery操作dom
文本操作
<script>
$('#app li[name=c]').text();
$('#app li[name=c]').text('C++');
$('#app').html();
$('#app').html('<li id="li2" name="HTML">HTML</li>');
</script>
CSS操作
$('#app li[name=HTML]').css('color','red')
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
