Javascript回顾
狂神笔记简述版
数据类型
字符串
//多行字符串
let a=`你好！
zhy
bye`
//模板字符串
let a='zhy';
let b='bye';
let c=`你好!${a}${b}`;
数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,'hello','1']
//通过下标取值和赋值
a[0]
a[0]=11
//长度
arr.length
// 注意：给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失！
//indexof，返回下标，字符串的“1”和数字的1是不同的
arr.indexof(1)
arr.indexof('1')
//slice() 截取Array数组的一部分,类似string中的substring
slice(1) slice(1,4)
//push押入到尾部 pop弹出尾部的一个元素
arr.push('a','b')
arr.pop()
//unshift压入到头部 shift 弹出头部的元素
arr.unshift('a','b')
arr.shift()
//sort() 排序
arr.sort()
//reverse()元素反转
arr.reverse()
//concat() 连接 并没有修改数组，只是返回新的数组
arr.concat(1,2,3)
//join()连接符 数组使用特定的字符串连接
arr.join('_')
//多维数组
arr=[[1,2],[3,4],['5','6']]
arr[1][0]
流程控制
var arr=[1,2,3,4,5,'hello','1']
arr.forEach(function(value){
console.log(value)
})
Map和Set
//Map
var map=new Map([['tom',100],['ann',80],['jack','90']])
map.set('admin',111111)
map.delete("tom")
//set 无序不重合的集合
var set=new Set([1,1,1,2,2,3])
set.add(4)
set.add(1)
set.has(3)
//iterator遍历map及set
//for of实现 for in下标的遍历
for(var x of set)
函数
定义函数
定义方式1
function abs(x){
if(x>0)
return x;
else
return -x;
}
一旦执行到return代表函数结束，返回结果！
如果没有执行到return，函数执行完返回结果，结果就是undefined！
定义方式2
var abs=function (x){
}
调用
abs(10) //10
abs(-10) //10
参数问题：Javascript可以传任意个参数，也可以不传递参数！
//假设不存在参数如何规避
function abs(x){
//手动抛出异常
if(typeof x !='number')
throw 'Not A Number!';
if(x>0)
return x;
else
return -x;
}
arguments
传递进来的所有参数，是一个数组!
var abs=function (x){
console.log("x=="+x);
//输出所有的传递的参数
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>0)
return x;
else
return -x;
}
rest
以前：
if(arguments.length>2){
for(var i=2;i<arguments.lenth;i++)
//console.log(arguments[i]);
}
ES6引入新特性，获取除了已经定义的参数之外的所有参数！
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后并用...标识
变量的作用域
局部作用域let
function(x){
for(var i==0;i<100;i++)
console.log(i);
console.log(i+1); //i出了作用域还是可以运行
}
ES6 let关键字，解决局部作用域冲突问题！
function(x){
for(let i==0;i<100;i++)
console.log(i);
console.log(i+1); //Uncaught ReferenceError :i is not defined
}
建议大家是用let去定义局部作用域的变量
常量const
在ES6前，约定大写字母为常量定义，建议不要修改但是是可以改变的！
ES6引入常量关键字const
方法
定义方法
方法就是把函数放到对象的里边， 对象只有两个东西 ：属性和方法！
var a ={
name:'hing',
birth:1990,
//方法
age:function(){
//今年-出生年
return (new Date().getFullYear()-this.birth);
}
}
//属性的调用
a.name
//方法的调用，一定要带（）
a.age()
拆开来看，this指代的是什么？
var getAge=function(){
//今年-出生年
return (new Date().getFullYear()-this.birth);
}
var a ={
name:'hing',
birth:1990,
age:getAge
}
a.age
getAge //返回 NAN windows
this是无法指向的，默认指向调用他的那个对象
apply
js中可以控制this的指向
getAge.apply(a,[]);//this指向了a对象，参数为空
内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof {}
"object"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
基本使用
var now=new Date(); //Thu Jun 17 2021 13:48:54 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //小时
now.getMinutes(); //分钟
now.getSeconds(); //秒
now.getTime(); //时间戳
console.log(new Date(1623908934631)); //时间戳转换为时间
转换
now=new Date(1623908934631)
Thu Jun 17 2021 13:48:54 GMT+0800 (中国标准时间)
now.toLocaleString
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/6/17 下午1:48:54"
now.toGMTString
ƒ toUTCString() { [native code] }
now.toGMTString()
"Thu, 17 Jun 2021 05:48:54 GMT"
JSON
var test={name:'hing',age:30};
//对字符串
var jsonString = JSON.stringify(test)
//JSON字符串转换为对象
var jsonObject = JSON.parse("{\"name\":\"hing\",\"age\":30}");
Ajax
- 原生的js写法 异步请求
- JQuery封装好的方法，$("#name").ajax("")
- axios请求
面向对象编程
原型模式：__proto__
var student={
name : 'student',
run : function () {
console.log(this.name+'...run');
}
}
var xiaoming={
name:'xiaoming'
}
xiaoming.__proto__=student;
console.log(xiaoming.run());
var bird={
fly : function(){
console.log(this.name+'...fly');
}
}
xiaoming.__proto__=bird;
console.log(xiaoming.fly());
class继承
class关键字，在ES6引入的
- 定义类属性和方法
//ES6后,定义一个学生类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
//对象
var xiaohong=new Student("xiaohong");
var xiaolan=new Student("xiaolan");
xiaohong.hello();
- 继承
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
class Senior extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
showGrade(){
alert('我是'+this.grade+'年级学生');
}
}
var xiaohong=new Student("xiaohong");
var xiaolan=new Senior("xiaolan",1);
xiaolan.showGrade();
原型链
操作BOM对象
浏览器介绍
JS的诞生就是为了在浏览器中运行！
BOM：浏览器对象模型
- IE 6-12
- Chrome
- FireFox
- Safari
window
代表浏览器窗口
Navigator
封装了浏览器的信息
Screen
代表屏幕的尺寸
location
代表当前对象的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新页面
//设置新的地址
location.assign('https://i.cnblogs.com/posts');
document
document代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='hing'
"hing"
获取具体的文档树节点
<body>
<dl id="dl">
<dt>JAVA</dt>
<dd>JAVASE</dd>
<dd>JAVAEE</dd>
</dl>
<script>
var dl= document.getElementById("dl");
</script>
获取cookie
document.cookie
"BIDUPSID=B0C66A89899959BAB284D7F3A818BFB5; PSTM=1616377103; BAIDUID=B0C66A89899959BAD921AB33304A9AFB:FG=1; BAIDUID_BFESS=B0C66A89899959BAB284D7F3A818BFB5:FG=1; BD_HOME=1; H_PS_PSSID=34099_33969_33848_33676_33607_34094_26350; BD_UPN=12314753; BA_HECTOR=21202ga4a18k0la1ga1gcm2290r"
劫持cookie原理
www.taobao.com
<script src='aa.js'> </script>
<!-- 恶意人员劫持你的cookie上传到他的服务器-->
服务器端可以设置cookie：HTTP Only
history
history.back()
history.forward()
操作DOM
核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作Dom节点就先要获取Dom节点
获取Dom节点
//对应的CSS的选择器
var h1= document.getElementsByTagName("h1");
var pl= document.getElementById("p1");
var p2= document.getElementsByClassName("p2");
var father= document.getElementById("father");
var childrens=father.children;//获取父节点下的子节点
// father.firstChild
// father.lastChild
//只要获得一个节点就能够获取所有的节点
更新Dom节点
<div id="d1">
</div>
<script>
var d1=document.getElementById("d1");
</script>
操作文本
d1.innerText='中国'修改文本的值d1.innerHTML='<strong>北京</strong>'可以解析HTML标签
操作JS
d1.style.color='red'
d1.style.fontSize='200px'
d1.style.padding='2em'
删除Dom节点
删除节点的步骤：先获取父节点，再通过父节点删除自己！
<div id="father">
<h1>中国</h1>
<p id="p1">北京</p>
<p class="p2">上海</p>
</div>
<script>
var self=document.getElementById("p1");
var father=self.parentElement;
father.removeChild(self);
//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
</script>
注意：删除多个节点的时候，children是时刻在变化的，删除节点的时候一定注意
创建和插入Dom节点
<p id="p0">北京</p>
<div id="list">
<p id="p1">上海</p>
<p id="p2">广州</p>
<p id="p3">深圳</p>
</div>
<script>
//已经存在的节点
var list=document.getElementById("list");
var p0=document.getElementById("p0");
list.appendChild(p0);
//通过js创建一个新的标签
var newP=document.createElement('p');
newP.id='newP';
newP.innerText='哈尔滨';
list.appendChild(newP);
//创建一个标签节点
var newScript=document.createElement('script');
newScript.setAttribute('type','text/javascript');
list.appendChild(newScript);
//创建一个stype标签
var newStyle=document.createElement('style');
newStyle.setAttribute('type','text/css');
newStyle.innerHTML='body{background-color: chartreuse;}'
document.getElementsByTagName('head')[0].appendChild(newStyle);
</script>
操作表单
JQuery
初识
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
</head>
<body>
<a id="test-click">click me</a>
<script>
$('#test-click').click(function () {
alert("q");
});
</script>
</body>
选择器
document.getElementsByTagName("p");
document.getElementById("id");
document.getElementsByClassName("class");
$("p").click();
$("#id").click();
$(".class").click();
文档工具站：https://jquery.cuishifeng.cn/
事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
<style type="text/css">
#divMove{width: 100px;height: 100px;border: 1px solid aqua}
</style>
</head>
<body>
鼠标：<span id="spanMove"></span>
<div id="divMove">
</div>
<script>
//当网页加载完毕响应的事件
$(function () {
$("#divMove").mousemove(function (e) {
$("#spanMove").text(e.pageX+':'+e.pageY);
})
})
</script>
</body>
操作Dom
节点文本操作
$("#id").text(); //获取值
$("#id").text('123'); //设置值
$("#id").html(); //获取值
$("#id").html('<strong>123</strong>');//设置值
CSS操作
$("#id").css('color','red');
元素的显示和隐藏，本质display:‘none’
$("#id").show()
$("#id").hide()
浙公网安备 33010602011771号