JavaScript
概述
JavaScript是一门世界上最流行的脚本语言
历史
快速入门
引入JavaScript
-
内部便签
<script>
...
</script> -
外部引入
wx.js
//...text.html
<script src="js/wx.js"></script>
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.定义变量 变量类型 变量名 = 变量值
var score = 83;
alert(score);
//2.条件控制
if (score>60 && score<70){
alert("60~70");
} else if(score>70 && score<80){
alert("70~80");
}else {
alert("other");
}
// 在浏览器的控制台打印
// console.log(score)
</script>
</head>
<body>
</body>
</html>
数据类型
数值、文本、图形、音频、视频…
变量
var $a = 1;
var 王者荣耀 = "倔强青铜";
number
js不区分小数和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99 //负数
NaN //not a number
infinity //表示无限大
字符串
‘abc’，“abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）
这是一个JS的缺陷，坚持不要使用==比较
须知：
- NaN===NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.000000000000001
null 和 undefined
-
null 空
-
undefined 未定义
数组
Java的数组必须是相同的数据类型
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,6,'hello',null,true];
new Array(1,2,3,4);
取数组下标：如果越界了就会报undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
var person ={
name:"wx",
age:1,
tags:[1,2,3]
};
取对象的值
person.name
person.age
严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
idea 需要设置支持ES6语法
'use strict'严格检查模式，预防JavaScript随意性导致的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let
-->
<script>
'use strict'
//全局变量
var i = 1;
//ES6 中要用let
let a = 2;
</script>
</head>
<body>
</body>
</html>
数据类型
字符串
-
正常字符串我们使用单引号或者双引号包裹
-
注意转译字符\
\'
\n
\t
\u4e2d unicode字符 中
\x42 Ascll字符 -
多行字符串编写
//tab键上边esc下边的键
var msg = `
111
阿萨德
aaa
vvv -
模板字符串
let name = "wx";
let age = 3;
let msg = `你好，${name}`;
console.log(msg); -
字符串长度
console.log(a.length)
-
字符串的可变性，不可变
-
大小写转换
注意这里是方法，不是属性
a.toUpperCase()
a.toLowerCase() -
a..indexOf(‘w’)
-
substring()
a.substring(1)//从第一个字符串截取到最后一个字符串
<<<<<<< HEAD
数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6];//通过下标取值和赋值
arr[0];
arr[0] =1;
-
长度
arr.length
注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
-
indexof,通过元素获得下标索引
arr.indexof(2)
var arr = [1,2,3,4,5,6,"1","2"];字符串和“1”和数字1是不同的
-
slice() 截取Array的一部分，返回一个新数组，类似于String中的subString
-
push，pop
push:压入数据到尾部
pop：弹出尾部的一个元素 -
unshift()，shift()头部
unshift:压入数据到头部
shift：弹出头部的一个元素 -
sort() 排序
arr.sort()
-
元素反转
arr.reverse()
-
concat()
arr.concat(['g','h'])
(10) [1, '1', 2, 3, 4, 5, 6, 'a', 'g', 'h']
console.log(arr)
VM606:1 (8) [1, '1', 2, 3, 4, 5, 6, 'a']注意，concat()并没有修改数组，只是会返回一个新的数组
-
连接符join
打印拼接数组，使用特定的字符串连接
arr.join('-')
'1-1-2-3-4-5-6-a'
console.log(arr)
VM650:1 (8) [1, '1', 2, 3, 4, 5, 6, 'a'] -
多维数组
arr = [[1,2],[3,4],["a","b"]];
对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义一个person对象
var person = {
name:"wx",
age:1
}
js中的对象，{…..}表示一个对象，键值对描述属性xxx:”xxxx”,多个属性之间用逗号隔开，最后一个属性不加逗号。
-
对象赋值
person.name="wwww"
'wwww' -
使用一个不存在的对象属性，不会报错！undefined
person.aa
undefined -
动态的删减属性
delete person.age
true -
动态添加
person.age = 22
22
person
{name: 'wwww', age: 22} -
判断属性值是否在这个对象中xxxx in xxxx
'age' in person
true
//继承
'tostring' in peron
true
流程控制
if判断
var age = 3;
if (age>3){
alert("haha");
} else if (age<5){
alert("kuwa");
}else {
alert("wawa");
}
循环
while (age<10){
age = age + 1;
console.log(age);
}
for循环
for (let i = 0; i < 10; i++) {
console.log(i);
}
forEach循环
var ages = [1,11,22,45,23,65];
//函数
ages.forEach(function (value) {
console.log(value);
})
for… in
/*
* for(Type str : el)
* */
//for(var index in object)
for (var num in age){
console.log(age[num]);
}
Map 和 Set
Map
var map = new Map([["tom",100],["jack",90],["dog",80]]);
let name = map.get("tom");//通过key获得value
map.set("admin",66);
console.log(name);
Set：无序不重复的集合
var set = new Set([1,2,2,1,5,8]);
//set 可以去重
set.add(3);
set.delete(2);
set.has(3);
函数及面向对象
函数定义及变量作用域
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦指定到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){….}这是一个匿名函数。但是可以把结果复制给abs，通过abs就可以调用函数。
//不存在参数问题
var abs = function (x) {
//手动抛出异常
if (typeof x!== "number"){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是JS免费赠送的一个关键字
var abs = function (x) {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
if (arguments>1){
arguments[1];
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题：arguments包含所有的参数，我们又时候想使用多余的参数来进行附加操作，需要排除已有的参数
rest
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
var abs = function (a,b,...rest) {
console.log("a>"+a);
console.log("b>"+b);
console.log("rest>"+rest);
}
rest参数只能写在最后面，必须用…标识
变量作用域
在JavaScript中，var定义变量实际是由作用域的
function wx(){
var x = 1;
x = x + 1;
}
x = x+2; //Uncaught ReferenceError: x is not defined
内部函数可以调用外部函数的成员，反之不行
function wx(){
var x = 1;
//内部函数可以调用外部函数的成员
function wx1(){
var y = x + 1;
}
var x = y+1;
}
JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
function wx(){
var x = 1;
function wx1(){
var x = 'A';
console.log('inner'+x);
}
console.log('outer'+x);
wx1();
}
wx();
提升变量的作用域
function wx(){
var x = 'x'+y;
console.log(x);
var y = 'y';
}
结果:xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升y的赋值。
function wx(){
var y ;
var x = 'x'+y;
console.log(x);
y = 'y';
}
所有的变量定义都放在函数的头部，不要乱发，便于代码维护
function wx(){
var x,y,z,a;
a = 'aa';
}
全局函数
//全局变量
var x = 1;
function wx() {
console.log(x);
}
全局对象window
var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量都会绑定在window对象上
alert()这个函数本身也是一个window变量
var x = 'xxx';
window.alert(x);
var old_alert = window.alert();
old_alert('old>'+x);
window.alert = function () {
};
//alert失效了
window.alert('new>'+x);
//恢复
window.alert = old_alert;
window.alert('恢复>'+x);
JavaScript实际上只有一个全局作用域，任何变量（函数也可以），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到就会报错，ReferenceError
规范
由于所有的全局变量都会绑定到window上，若果不通的js文件，使用了相同的全局变量，冲突。
//唯一全局变量
var wx = {};
//定义全局变量
wx.name = "wx";
wx.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题
局部作用域let
function aa(){
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);//i出了这个作用域还可以使用
}
ES6出了let这个关键字，解决局部作用域冲突
function aa(){
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
建议使用let定义局部作用域的变量
const常量
在ES6之前，定义常量的时候只能用名字全大写约定
var PI = 3.14;
console.log(PI);
PI = 111;//可以改变这个值
console.log(PI);
在ES6中引入了常量关键字const
const PI = 3.14;//只读变量
console.log(PI);
方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var wx = {
name:"wx",
birth:2002,
age:function () {
//今年-出生的鲶鱼
var now = new Date().getFullYear();
return now - this.birth;
},
};
//属性
wx.name
//方法要带括号
wx.age()
this代表什么，调用他的对象
function getAge() {
//今年-出生
var now = new Date().getFullYear();
return now - this.birth;
}
var wx = {
name:"wx",
birth:2002,
age:getAge
};
wx.age();
getAge();//报错Nan
闭包
箭头函数
apply
在js中可以控制this的指向
function getAge() {
//今年-出生
var now = new Date().getFullYear();
return now - this.birth;
}
var wx = {
name:"wx",
birth:2002,
age:getAge
};
wx.age();
getAge.apply(wx,[]);// this 指向wx这个对象，参数为空
创建对象
-
类：模板
-
对象：具体的实例
原型：
var user = {
name:"wx",
age:3,
sex:"男",
run:function () {
console.log(this.name+"run..");
}
};
var bird = {
fly:function () {
console.log(this.name+"fly..")
}
}
var xm = {
name:"xm"
};
xm.__proto__ = birdES6之前
function student(name){
this.name = name;
}
// 给student新增一个方法
student.prototype.hello = function () {
alert("111");
}
class关键字是在ES6引入的
1、定义一个类，类中包含属性和方法
//定义一个学生类
class student{
constructor(name){
this.name = name;
}
hell(){
alert("hello");
}
}
var xm = new student("xm");
var xh = new student("xh");
<script type="text/javascript">
'use strict'
// ES6之后
//定义一个学生类
class student{
constructor(name){
this.name = name;
}
hell(){
alert("hello");
}
}
class xStudent extends student{
constructor(name,grade){
super(name);
this.grade = grade;
}
mygrade(){
alert("我是一名小学生");
}
}
var xm = new student("xm");
var xh = new xStudent("xh");
</script>
本质：查看对象原型
class继承
原型链继承
原型链：
常用对象
typeof 123
'number'
typeof '1'
'string'
typeof []
'object'
typeof {}
'object'
typeof NaN
'number'
typeof undefined
-
Date
var date = new Date();
console.log(date);
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay();//星期几
date.getHours();//小时
date.getMinutes();//分钟
date.getSeconds();//秒
date.getTime();//时间戳 1970 1.1 0:00开始
//时间戳转换成时间
console.log(new Date(15781221233));
转换
now = new Date(1664508078551);
Fri Sep 30 2022 11:21:18 GMT+0800 (中国标准时间)
now.toLocaleString()
'2022/9/30 上午11:21:18'
now.toGMTString()
'Fri, 30 Sep 2022 03:21:18 GMT'
-
JSON
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：
-
对象都用{}
-
s数组都用[]
-
所有的键值对都使用key:value
JSON字符串和JS对象的转换
var user = {name:"wx",
age:3,
sex:"男"
};
//对象转换为json字符串
var jsonUser = JSON.stringify(user);
//json字符串转换为对象,参数为JSON字符串
var objUser = JSON.parse('{"name":"wx","age":3,"sex":"男"}');JSON和JS对象的区别
var obj = {a:'hello',b:'bb'};var josn = '{"a":"hello","b":"bb"}'; -
-
Ajax
-
原生的js写法 xhr异步请求
-
JQuery封装好的方法$(“#name”).ajax(“”)
-
axios请求
-
操作Dom元素
核心
浏览器网页就是一个Dom树形结构
-
更新：更新Dom节点
-
遍历Dom节点：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新的节点
遥操作一个Dom节点，就必须要先获得这个Dom节点
获得Dom节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var fa = document.getElementById('faDiv');
var children = fa.children;
fa.firstChild;
fa.lastChild;
这是原生代码
更新节点
-
div1.innerText=”123″ 修改文本的值
-
div1.innerHTML = ‘123‘ 可以解析HTML文本标签
操作JS
-
div1.style.color=’red’
-
div1.style.fontSize=’20px’
删除节点
删除节点的步骤：需要先获取父节点，然后调用删除方法
<div id="faDiv">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script type="text/javascript">
var fa = document.getElementById('faDiv');
var p1 = document.getElementById('p1');
var fath = p1.parentElement;
fa.removeChild(p1)
fath.removeChild(fath.children[0]);
fath.removeChild(fath.children[1]);
</script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一点要注意。
插入节点
获得了某个Dom节点，假设这个Dom节点是空的，可以通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，就不能这么做，会覆盖原有的节点
<p id="js">JavaScript</p>
<div id="list">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p class="p3">p3</p>
</div>
<script type="text/javascript">
var js = document.getElementById('js');
var list = document.getElementById('list');
list.append(js);
</script>
创建一个新的标签
var js = document.getElementById('js');
var list = document.getElementById('list');
list.append(js);
//通过JS创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = '你好';
list.append(newP);
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.append(myScript);
//创建style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
//设置内容
myStyle.innerHTML = 'body{}';
var head = document.getElementsByTagName('head')[0];
head.appendChild(myStyle);
insertBefore
var p2 = document.getElementById('p2');
//insertBefore(newNode,targetNode)
list.insertBefore(js,p2);
操作Bom元素
浏览器介绍
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他再浏览器中运行！
BOM：浏览器对象模型
-
IE6~11
-
Chrome
-
Safari
-
FireFox
-
Opera
三方：
1. QQ浏览器
2. 360浏览器
Window 窗口信息
widnow代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
980
window.innerWidth
957
window.outerHeight
1100
window.outerWidth
973
//可以调整浏览器窗口试试
Navigator
Navigator,封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36'
navigator.platform
'Win32'
大多数情况不会使用navigator对象，因为会信息会被人为修改
screen 屏幕尺寸
屏幕尺寸
screen.width
1920
screen.height
1080
location
location代表当前页面的URL信息
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/wxStuSCB/javaScript-
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('http://www.baidu.com')
document 文档
document代表当前的页面
document.title
'Title'
document.title = 'wx'
'wx'
获取具体的文档数节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script type="text/javascript">
var app = document.getElementById('app');
</script>
获取cookie
document.cookie
''
劫持cookie
<script scr="aa.js"></script>
<!--恶意人员；获取你的cookie上传到他的服务器 -->
服务器端可以设置cookie:httpOnly
history
history代表浏览器的历史记录
history.back()//后退
history.forward() //前进
操作表单
表单是什么 form
-
文本框 text
-
下拉框 select
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
…….
表单的目的：提交信息
获得要提交的表单信息
//获取输入框的值
var username = document.getElementById('username');
//修改输入框的值
username.value = 'aaa';
</script>
提交表单 md5加密密码
<!--表单绑定提交事件
onsubmit 绑定一个提交检测的函数 true false
-->
<!--提交成功后跳转到百度-->
<form action="www.baidu.com" method="post" onsubmit="return checkForm()">
<p>
<span>用户名：</span><input type="text" id="username" name="username" required>
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password" required>
</p>
<!-- <!–单选框和多选框的值是定义好的–>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>-->
<input type="submit" onclick="checkForm()">
</form>
<script type="text/javascript">
function checkForm() {
var username = document.getElementById('username');
var password = document.getElementById('password');
//MD5 算法
password.value = md5(password.value);
//验证表单信息
return true;
}
</script>
JQuery
JQuery库，里边存在大量的JavaScript函数
获取JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
<script type="text/javascript">
/*公式：$(selector).actioon();*/
$('#test').click(function () {
alert('hello');
});
</script>
</body>
</html>
选择器
$('p');//标签选择器
$('#id');//id选择器
$('.class');//class选择器
文档工具站：https://jquery.cuishifeng.cn
事件
鼠标事件、键盘事件、其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divm{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取当前数据的坐标-->
mouse：<span id="move"></span>
<div id="divm">
在这里移动试试
</div>
<script type="text/javascript">
//当网页元素加载完毕之后，响应时间
$(function () {
$('#divm').mousemove(function (e) {
$('#move').text('x:'+e.pageX+'y:'+e.pageY);
})
});
</script>
</body>
</html>
操作DOM
节点文本操作
$('#ul li[name=css]').text();//获取值
$('#ul li[name=css]').text('值');//设置值
$('#ul').html();
$('#ul').html('<strong>123</strong>');
css的操作
$('#ul').css({"color":"red"});
元素的显示和隐藏：本质display：none
$('#ul').hidden();
$('#ul').show();
=======