javascript
javascript是一门世界上最流行的脚本语言
作为一个合格的后端人员，必须要精通javascript
快速入门
引入javascript
<head>
<script>
alert("hello world");
</script>
<head>
外部引入，必须成对出现
<script src="js/qj.js"</script>
不用显示定义type。默认就是javacript
<script type="text/javascript"></script>
基础语法
javascript严格区分大小写
定义变量 变量类型 变量名=变量值
<script>
var num=1;
var name="qiangjiang";
<script>
var报错变黄，建议let和const
条件控制
if (1>2){
alert("true")
}
注释
/*
*/
<script>
var score=70;
if(score>60 && score<70){
alart("60-70")
}else if(score>70 && score<80){
alart("70-80")
}else{
alert("othe")
}
</script>
浏览器控制台的使用
在conole.log(sorce)在浏览器的控制台打印变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bje616e9-1678093551327)(D:\桌面\typora\image-20220919082855830.png)]
conole ： 控制台调试js代码
source：打断点
network：抓包
application：看cookies（饼干）
数据类型
变量
var
js不区分小数和整数：number
NAN //不是一个数字
infinty //无限大
字符串
'abc' "abc"
布尔值
逻辑运算
&&
||
!
比较运算符
=赋值
==等于（类型不一样，值一样会判断为true）
===绝对等于（类型一样，值一样）
浮点数：jin
null和undefined
null空
undefined未定义
数组
java一系列相同类型的对象
js不用
对象
对像是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4)
var person ={
name:"qinjiang";
age:3;
tags:['js','java','web','...']
}
调用，取对象的值
person.name
>"qinjiang"
person.age
>3
严格检查模式
'use strict' 必须写在js的第一行
严格检查模式，预防javascript因为随意性产生的一些问题，
局部变量建议用let
idea需要设置支持es6语法
数据类型
字符串
多行字符串
//tab上面
var msg=
`hello
word
你好`
模板字符串
let name ="qinjiang";
lat age= 3;
let mag=`你好呀,${name}`
字符串长度
str.length
字符串的可变性，不可变
大小写转换
//注意这里是方法，不是属性
student.toUpperCase
student.toLowerCase
student.indexOf(“t”)
数组
Arragy可以包含任意的数据类型
var arr=[1,2,3,4,5]
//通过下标取值和赋值
长度
arr.length
如果给arr.length赋值，数组大小就会发生变化，如果赋值变小，元素就是丢死
indexOf,通过元素下标索引
slice()截取Array的一部分，返回一个新数组，类似string中的substring（常用）
push,pop
push压入到尾部
pop弹出尾部的一个元素
unshift(),shift()头部
排序（sort）
（3）['b','c','a']
arr.sort()
(3)['a','b'.'c']
元素反转reverse
arr.reverse
concat()
concat并没有修改数组，只会返回一个新的数组
连接符join
打印拼接数组，使用特定的字符串连接
多位数组
对象
若干个键值对
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
定义一个对象，它有四个属性
var person ={
name:"kuang sheng",
age:3,
email:"3247238462",
score:0
}
js中的对象，{…}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间用逗号隔开，最后一个属性不加逗号
对象赋值
person.name="qiangjiang"
"qingjiang"
person.name
"qingjaing"
使用一个不存在的对象属性，不会报错
undefind
动态的删减属性
通过delete删除对象的属性
delete person.name
动态的添加，直接给新的属性添加
person.haha="haha"
"haha"
person
判断属性值是否在这个对象中
xxx in xxx
'age' in person
判断一个属性是否是这个对象自己拥有的hasOwnproperty
pe
流程控制
if判断
var age=3;
if (age>3){//第一个判断
alert("haha");
}else if (age<5){//第二个判断
alert("kuwa");
}else{//否则
alert("kuwa");
}
while循环，避免程序死循环
while(age<100){
age=age+1;
conso.log(age)
}
do{
age=age+1;
console.log(age)
}while(age<100)
for循环
for(let i=0;i<100;i++){
console.log(i)
}
forEach循环
var age =[123,123,123,123,123];
//函数
age.forEach(function(value)){
consle.log(value)
}
for…in
//for(var index in object){}
for(var.num in age){
if(age.hasownProperty(num)){
console.log("纯在")
console.log(age[num])
}
}
map和set
map
//es6
var map =new map(['tom,100'],['jack,90'])
var name =map.get('tom');//通过key获取value
map.set('admin',123456)
console。log9(name)
set:无序不重复集合
var set =new Set(3,1,1,1);//set可以去除重复
函数
方法：对象（属性：方法）
函数
定义一个函数
绝对值函数
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就可以调用函数
调用函数
abs(10)//10
abs(-10)//10
参数问题，javascript可以传递任意个参数，也可以不传递参数
假如参数不存在，如何规避
var abs =function (x){
//手动跑出异常来判断
if(type x!=='number'){
throw 'not a number';
}if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是js免费赠送的给关键字
代表，传递进来的所有参数，是一个数组
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;
}
}
问题，arguments包含所有的参数，我们有时候会想使用多月的参数来进行挂架操作，需要排除已有点参数
rest
es6引入的新特性，获取除了已经定义的参数以外的参数…
function.aaa(a,b,....rest){
console.log("a=>+a");
console.log("b=>+b");
console.log(rest);
}
rest参数只能写在最后面，必须用…标识
变量的作用域
在js当中，var定义变量实际是有作用域的
假设在函数中声明，则在函数体外不可使用（非要想实现的话，可以研究一下闭包）
function qj(){
var x= 1;
x = x + 1;
}
x= x+2 //uncaught referencerror :x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不会冲突
内部函数可以访问外部函数成员，反之则不行
假设，内部函数变量和外部函数的变量，重名！
function qj {
var x =1 ;
function qj2{
var x='A'
console.log("inner"+x);
}
console.log('outer'+x);
qj2()
}
假设在javascript中，函数查找变量从自身函数开始，由内而外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量是作用域
function qj {
var x ="x" + y;
console.log(x);
var y ='y';
}
结果，xundefined
说明，js执行引擎，自动，提升了y的申明没，但是不会提升变量y的赋值
function qj2{
var y;
var x ="x"+y;
console.log)(x)
y = 'y';
}
这个是在javascript创建之初就有了的提醒，养成规范，所有点变量定义，都放在函数的头部不要乱放，便于代码维护
全局函数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(x);
window.alert=function(){
};
//发现alert（）失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456);
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域没有找到，报错refrence）
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突~>如何能够减少冲突？
//唯一全局变量
var kuangqpp={}；
//定义全局变量
kuangapp.name='kuangshen';
kuangapp.add=function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
jquery
局部作用域let
es6 let关键字，解决局部作用域冲突问题
function aaa(){
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
const PI= '3.14'
console .log(PI);
PI='123';//TypError;assigment to constant variable.
console.log(PI);
方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var kuangshen ={}
name:'qinjiang'，
bitrh：2020，
//方法
age:function(){
//今年-出生的年
var now =new Date().getFullYear();
return now-this.bitrh;
}
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()
this代表什么，拆开上面的代码
this是无法指向
内部对象
标准对象
typeof 123
"number"
typeof '123'
" string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefind"
Date
var now =new Date
json
json是什么
早期数据传输，习惯用xml文件
json是一种轻量级的书籍交换格式
bson
在javascript一切皆为对象，任何js支持的类型都可以用json来表示 number ，string…
对象{}
数组[]
所用的键值对都用key:value
json字符串和js对象的转换
var user ={
name :"qinjiang",
age:3,
sex:'男'
}
//对象转化为json字符串{"name:qingjiang","age":3,"sex"；"男"}
var jsonuser = JSON.stringify(user);
//json字符串转化为对象，参数为json字符串
var obj =JSON.parse('{"name":"qingjiang","age"；3，"sex":"男"}')
ajax
原生的js写法，xhr异步请求
jquey封装好的方法$(“#name”).ajax(“”)
axios请求
面向对象编程
类:模板
对象：具体的实列
原型
class继承
class关键字是es6引入的
定义一个类，属性，方法
//定义一个学生类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello')
}
}
var xiaoming=new Student("xiaoming");
var xiaoming=new Student("xiaoming");
xiaoming.hello()
原型链
操作BOM对象
BOM浏览器对象模型
window
window代表浏览器窗口
window.alert(1)
underfined
window.innerHeight
258
window.innerwidth
919
//大家可以调整浏览器窗口试试
Navigator
Navigator,封装了浏览器信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F499NbXM-1678093551329)(D:\桌面\typora\image-20221015201101555.png)]
大多数时候，我们不会使用nacigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
screen.height
location
代表当前页面的url信息
host:"www.baidu.con"
href:"http://www.baidu.com"
protocol:"https:"
reload:reload()//刷新页面
//设置新的地址
location.assign('https://blog.kuangstudy.com')
document
当前页面HTML DOM文档数
document.title
"百度一下，你就知道"
document.title="狂神说"
"狂神说"
获取具体的文档树节点
<d1 id='app'>
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</d1>
<script>
var d1 =document:getElementById('app');
</sctipt>
获取cookie
document.cookie
"__guid=111872281.88......."
劫持cookie原理
www.baidu.com
<script src="aa.js">
</script>
//恶意人员，获取你的cookie上传到他的服务器
服务器端可以设置cookie：httpOnly
history
代表浏览器的历史记录
history.back()//后退
history.forward()//前进
操作DOM对象
dom：文档对象模型
浏览器网页就是一个DOM树形结构
更新：更新dom节点
遍历dom节点：得到dom节点
删除：删除一个dom节点
添加：添加一个新的节点
要操作一个dom节点，就必须要先获得dom节点
//对应css选择器
var h1= document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=documetn.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')
</script>
操作文本
id1.innerText='456'修改文本的值
id1.innerHTML='<script>123</script>'可以解析HTML文本标签
操作js
id1.style.color='yellow';
id1.style.fiontSuiize='20px';
id1.style.padding='2em'
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<script>
var self = document.getElementByid('p1')
var father =p1.parentElement;
father.removeChild(self);
//删除是一个动态过程
father.removech(father.children[0])
father.removech(father.children[1])
father.removech(father.children[2])
</script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意
插入节点
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerhtml就可以增加一个元素了，但是这个dom节点一技能存在元素了，我们就不能这么干，因为会产生覆盖
追加
<script>
var js=document.getElementById('js');
var list= document.getElementById('list');
list.appendChild(js)//追加到后面
</script>
创建一个新的标签
var newp =document.createElement('p')//创建一个p标签
newP.id='newp';
newP.innerText='Hello.kuangshen'
insertBrfore
操作表单（验证）
表单是什么，from dom树
文本框text
下拉框
单选框radio
多选框checkbox
隐藏框hidden
密码框password
<script>
var input_text=document.getElementById('username');
var boy_radio=document.getElementById('boy');
var girl_radio =document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value='123'
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中girl-radio.checked=true;//赋值
</script>
提交表单（验证）
md5算法
jQuery
javascipt和jquery库
里面存在大量的javascript函数
获取jquery
在线cdn引入
公式重点
selector选择器就是css选择器
$(selector).action()
<script src="lib/jquery-3.4-1.js"></script>
<body>
<a href="" id="test-jquery">点我<a>
</body>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function(){
alert('hell0.jquery');
})
</script>
jquery选择器
原生js.选择器少，麻烦记不住
//标签document.getElementByTagName();
//id
document.getElementById();
//类
document.getElementsByClassNmane();
jquery
css中选择器全部都能用
标签选择器
$('p').click();
id选择器
$('#id1').click();
类选择器
$(.class1).click();
事件
鼠标事件，键盘事件，其他事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cBm0bgg-1678093551330)(D:\桌面\typora\image-20221017222443548.png)]
操作DOM
<ul id='test-ul'>
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name=python]').test();
$('#test-ul').html();
</script>
节点文本操作
$('$test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('设置值')；//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css的操作
$('#test-ul li[name=python]').css({"color",red})
元素的显示和隐藏：本质display:none;
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
ajax
$(selector).action()
<script src="lib/jquery-3.4-1.js"></script>
<body>
<a href="" id="test-jquery">点我<a>
</body>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function(){
alert('hell0.jquery');
})
</script>
jquery选择器
原生js.选择器少，麻烦记不住
//标签document.getElementByTagName();
//id
document.getElementById();
//类
document.getElementsByClassNmane();
jquery
css中选择器全部都能用
标签选择器
$('p').click();
id选择器
$('#id1').click();
类选择器
$(.class1).click();
事件
鼠标事件，键盘事件，其他事件
[外链图片转存中…(img-6cBm0bgg-1678093551330)]
操作DOM
<ul id='test-ul'>
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name=python]').test();
$('#test-ul').html();
</script>
节点文本操作
$('$test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('设置值')；//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css的操作
$('#test-ul li[name=python]').css({"color",red})
元素的显示和隐藏：本质display:none;
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
ajax
3851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
