1、什么是JavaScript
1.1 概述
JavaScript是世界上最流行的脚本语言
Java、JavaScript无关
一个合格的后端人员，必须要精通JavaScript
1.2 历史
ECMAScript理解为JavaScript的一个标准
最新版本已经是es6
大部分浏览器只支持es5
开发环境---线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
内部标签
<script> //... </script>
外部引入
<script src="..."></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script>-->
<!-- alert("Hello World!");-->
<!-- </script>-->
<script src="js/qj.js"></script>
</head>
<body>
</body>
</html>
2.2 基本语法引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num=1;
var num1=2;
if (num>num1){
alert("fales");
}else{
alert("ture");/*弹窗*/
}
/*
* console.log(10);控制台输出
* */
</script>
</head>
<body>
</body>
</html>
2.3 数据类型
数值，文本，图形，视频，音频...
number：
整数（123），浮点数（12.3），科学计数法（1.2e3），负数（-123）NaN（not a number）
Infinite （无限大）
字符串、布尔、逻辑运算、比较运算（“===”绝对等于，JavaScript中“==”，类型不一样，也可能等于“1”和“ ‘1’ ”）
......跟java大差不差
null:空
undefined：未定义
数组
js可以不同类型
var date=[1,'2',null,undefined,"asdf"] 推荐 new Array(1,2,3,"hello");
取数组下标，如果越界，则显示
undefined
对象
var person={
name:"twd",
age:19,
sex:'男'
}
2.4 严格检查模式
<script> "use strict";/*严格检查模式，预防javascript的随意性导致产生一些问题 必须写在第一行*/ /* i=1 全局变量*/ let i=1; /*ES6 let*/ </script>
3、数据类型
3.1 字符串
1.普通字符
console.log("123123")
2.unicode
\u### Unicode字符
3.多行字符串编写
<script> /* Tab 上面的符号 ，可以存放多行文本*/ var msg = ` fysyyds 你好 为什么` console.log(msg); </script>
4.模板字符串
<script>
"use strict"
let name = "twd";
let age=19;
let msg=`
${name},生日快乐`
</script>
5.字符串长度
console.log(msg.length)
6.字符串的可变性：不可变
7.大小写转换
//这是方法，不是属性 student.toUpperCase() student.toLowerCase()
8.student.indexOf('a') 获取a在student里面的下标
9.substring
[) student.substring(1)//从第一个字符截取到最后一个字符 student.substring(1,3)1，3中间，不包含3
3.2 数组
Array可以包含任何数据类型
var arr=[1,2,3,4,5];
1、长度
arr.length
2、indexOf，通过元素获得下标
arr.indexOf(2) 1
3、slice（）截取Array的一部分，返回一个新数组，类似于substring
4、push，pop
push;尾部新增 pop：删除尾部
5、unshift（），shift（）头部
unshift:头部插入 shift:头部删除
6.排序sort()
arr.sort() (3) [0, 1, 2]
7、元素反转reverse（）
arr.reverse() (3) [2, 1, 0]
8、concat（）
rr.concat(['a','a','a']) (6) [2, 1, 0, 'a', 'a', 'a'] arr (3) [2, 1, 0]
注意，原数组并未改变
9、连接符jion
打印拼接数组，使用特定的字符串链接
arr.join('+')
'2+1+0'
10、多维数组
arr=[[1,2],[3,4]]
......
3.3 对象
1.若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
var person={
name:"twd",
age:19,
sex:'男',
email:123456
}
2.赋值 person.name="123123"
3.动态删减属性
delete person.name
4.动态增加属性
person.tel = "123123"
5.判断属性值是否在对象中！‘xxx’ in xxx
'age' in person true 'asdfasdf' in person false 'toString' in person true
6、判断一个属性是否自身拥有的hasOwnProperty()
person.hasOwnProperty(toString) false
3.4 流程控制
if...else判断，跟Java一样
while(){ } do{ }while()
for循环
for (let i = 0; i < ; i++) {
}
forEach
数组名.forEach()
for (变量 in 对象){}
3.5 Map和Set
Map:
<script>
var map=new Map([["twd",100],["qwe",123]]);
var name =map.get("twd");//通过key获得value
map.set(["qwe",124]);
map.delete("qwe");
console.log(name);
</script>
Set:无序不重复的集合
set.add(2); set.delete(2); console,log(set.has(3));
3.6 inerator
for of 遍历 for in 遍历下标
var arr = [1,2,3]
for (var number of arr) {
console.log(number)
}
4、函数及面向对象
4.1 函数定义
定义方式一
绝对值函数
function abs(x){
if(x>=0)
return x;
else return -x;
}
如果没有执行return 则返回undefined
定义方式二
var abs = function(x){
}
function(x){...} 匿名函数，可以赋值给abs，通过abs可以调用
JavaScript可以传递任意个参数，也可以不传
可以抛出异常来规避不传：
<script>
function abs(x){
if(typeof x!=="number")
throw 'Not a number';
if(x>=0)
return x;
else return -x;
}
</script>
arguments 遍历传递所有参数，JavaScript赠送的关键字
<script>
function abs(x){
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0)
return x;
else return -x;
}
</script>
rest
ES6新特性，获取以定义的参数之外的参数 ...
aaa(1,2,3),输出3
<script>
function aaa(a,b,...rest){
if(arguments.length>2)
for (let i = 2; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
</script>
写在最后面，用...隔开
4.2 变量的作用域
未定义错误:
function qj(){
var x=1;
}
x=2;
内部可以访问外部
function aaa(){
var x=1;
function bbb(){
x=2;
}
}
提升变量的作用域
function qj(){
var x = 'x'+y;
console.log(x);
var y = 'y';
}//输出：xundefined 并不是未定义
js执行引擎，自动提升了y的声明，但不会提升y的赋值，所以一般所有变量放在头部定义
alert本身也是window的一个变量
<script>
var x='xxx';
alert(x);
alert(window.x);
</script>
Javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域里找到，就会向外查找，在全局作用域也没有找到，报错RefrenceError
//唯一全局变量
var fysyyds = {};
//定义全局变量
fysyyds.name='fys';
fysyyds.add=function (a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题
jQuery
局部作用域let
<script>
for (var i = 0; i < 100; i++) {
}
console.log(i);
</script>//输出了100，用let就不会
建议使用let定义局部作用域
常量const
const var PI = 3.14;在ES6之前，默认大写变量视为常量，没有const
4.3 方法
方法定义
<script>
var fysyyds={
name:'fys',
birth:'2020',
age:function (){
var now=new Date().getFullYear();
return now-this.birth;
}
}
</script>
跟java一样
<script>
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
var fysyyds={
name:'fys',
birth:'2020',
age:getAge
}
</script>
可以拆开
apply
在js中可以控制this指向，apply所有函数都继承
<script>
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
var fysyyds={
name:'fys',
birth:'2020',
age:getAge
};
getAge.apply(fysyyds,[]);//this指向fysyyds，参数为空
</script>
5、内部对象
标准对象
typeof 123 'number' typeof '123' 'string' typeof true 'boolean' typeof NaN 'number' typeof [] 'object' typeof {} 'object'
typeof a
’function‘
5.1 Date
基本使用
<script>
let date = new Date();
date.getFullYear();
date.getMonth();
date.getDate();
date.getDay();
date.getHours();
date.getMinutes();
date.setDate();
date.getTime();//时间戳
</script>
5.2 Json
什么是Json
-
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式
-
简洁和清晰的层次结构
-
易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中一切皆为对象，任何js支持的类型都可以用Json来表示
格式：
-
对象都用{}
-
数组都用[]
-
所有的键值对都使用 key:value
JSON字符串和js对象的转换
<script>
var fysyyds = {
name:'fys',
age:'20',
sex:'男'
}
// 对象转换成Json
let json_fysyyds = JSON.stringify(fysyyds);
//json字符串转换为对象 ,参数为Json字符串
let parse = JSON.parse({"name":"fys","age":"20","sex":"男"});
</script>
JSON和JS对象的区别
console.log(fysyyds)
VM92:1 {name: 'fys', age: '20', sex: '男'}
console.log(json_fysyyds)
VM193:1 '{"name":"fys","age":"20","sex":"男"}'
5.3 Ajax
-
原生的js写法 xhr异步请求
-
jQuey封装好的方法 $("#name").ajax("")
-
axios请求
6、面向对象编程
6.1 什么是面向对象
JavaScript，Java，C#...JavaScript的面向对象有些区别！
-
类：模板
-
对象：具体的实例
原型：
<script>
var Student={
name: 'fysyyds',
age:5,
run:function (){
console.log(this.name+"run...")
}
};
var xiaoming = {
name : "xiaoming "
};
//找原型对象 小明的原型是student
xiaoming.__proto__=Student;
</script>
class关键字，是在ES6引入的
1.定义一个类，属性，方法
<script>
function Student(name){
this.name=name;
}
//给student新增一个方法
Student.prototype.hello=function (){
alert('Hello')
}
//ES6之后
class Student{
//构造器
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
</script>
var xiaoming =new Student("xiaoming ");
2.继承extends
<script>
//ES6之后
class Student{
//构造器
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
class primary extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
alert(name+grade+'我是一个小学生');
}
}
var xiaoming =new Student("xiaoming ");
var xiaohong=new primary("xiaohong",'xiaoxuesheng')
</script>
查看对象原型
原型链
__ Proto __：
7、操作BOM对象（重点）
浏览器介绍
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行
BOM：浏览器对象模型
-
IE 6-11
-
Chrome
-
Safari
-
FireFox
-
Opera
三方
-
QQ浏览器
-
360浏览器
window
window代表 浏览器窗口
window.alert(1) undefined window.innerHeight 470 window.innerWidth 406 window.outerHeight 835 window.outerHeight 835 //显示浏览器窗口大小
Navigator
Navigator,封装了浏览器的信息
navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36' navigator.platormf
大多数时候，不使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
操作屏幕
screen.width 1707 screen.height 1067
location
location代表当前页面的URL信息
host: "new-tab-page"
href: "chrome://new-tab-page/"
protocol: "chrome:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('http://4399.com')//访问当前网站都会跳转到这里
document
document 代表当前的页面，HTML DOM文档树
document.title='fysyyds' 'fysyyds'
获取具体的文档树节点
<dl id="km">
<dt>fys</dt>
<dd>yyds</dd>
<dd>668</dd>
</dl>
<script>
var dl = document.getElementById('km');
</script>
获取cookie
document.cookie
劫持cookie原理
<script src="aa.js"></script> //恶意人员获取到你的cookie上传到他的服务器上
服务器端可以设置cookie:httpOnly
history
history.back() history.forward() //后退前进
8、操作DOM对象（重点）
DOM：文档对象模型
核心
浏览器网页就是一个Dom树形结构
-
更新：更新Dom节点
-
遍历dom节点：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新的节点
要操作一个Dom节点，就要先获得这个Dom节点
获得Dom节点
<script>
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens=father.children;//获取父节点下的所有子节点
</script>
这是原生代码
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
id1.innerText='abc';
</script>
操作文本
-
id1.innerText=456
-
id1.innerHTML='qwe'
操作JS
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 = self.parentElement;
father.removeChild(p1);
//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意：删除多个节点的时候，childen是在时刻变化的，删除节点的时候要注意
插入节点
我们获得某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，当此DOM界定啊已存在元素了，我们就不能这么干了，会产生覆盖。
追加appendChild
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list')
</script>
创建一个新的标签
<script>
//通过JS创建一个新的节点
var newP=document.createElement('p')
newP.id='newP';
newP.innerText='fysyyds';
list.appendChild(newP);
//创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript')
</script>
insert
<script>
var ee=document.getElementById('ee');
var js=document.getElementById('js');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee)
</script>
9、操作表单
获得要提交的信息
<body>
<form action="post">
<span>用户名：</span><input type="text" id="username">
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
//获取值
var input_text = document.getElementById('username')
var boy_radio=document.getElementById('boy');
var girl_radio=document.getElementById('girl');
//修改值
input_text='123'
//查看返回结果是否为true
boy_radio.checked;
</script>
</body>
提交表单 md5加密密码 表单优化
<!--表单绑定提交事件-->
<!--οnsubmit=绑定一个提交检测的函数，true false
将这个结果返回表单，使用onsubmit接受-->
<form action="https://www.baidu.com/" method="post" οnsubmit="return aaa()">
<p><span>用户名：</span><input type="text" id="username" name="usernme"></p>
<p><span>密码：</span><input type="password" id="input-password"></p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件οnclick=""-->
<button type="submit">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验提交表单内容
return true;
// console.log(uname.value);
// console.log(pwd.value);
// //MDS算法
// pwd.value=md5(pwd.value);
// console.log(pwd.value);
}
</script>
10、jQuery
jQuery是一个库，集成大量JavaScript函数
获取jQuery
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>-->
<script src="lib/jquery-3.7.1.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jQuery">点我变长</a>
<script>
//选择器就是css里面的选择器
$('#test-jQuery').click(function (){
alert('hello,jQuery');
})
</script>
</body>
选择器
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css里的选择器全都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>
工具文档站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
事件
鼠标事件，键盘事件
<script src="lib/jquery-3.7.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这点击试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
})
</script>
操作DOM
文本节点操作
$('#test-u1 li[name=Python]').text();//获得值
$('#test-u1 li[name=Python]').text('设置值');//设置值
$('#test-u1').html();//获得值
$('#test-u1').html('<strong>123</strong>');//设置值
css的操作
$('#test-u1 li[name=Python]').css("color","red")
元素的显示和隐藏：本质display=none；
$('#test-u1 li[name=Python]').show()//显示
$('#test-u1 li[name=Python]').hide()//隐藏
优站：Layer弹窗组件、Element-ui
扫一扫
1474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
