JS学习笔记

JS学习

1. 什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

**一个合格的后端人员，必须精通JavaScript**

ECMAScipt可以理解为是JavaScript的一个标准

2. 快速入门

文件内调用JavaScript

<script type = "text/text/javascript>
	alert('Hello Hworld');  //弹窗
</script>

在js文件里写代码可以在网页文件里用下述方法调用

alert("hello");

<script src = "xxx.js"></script>

• var是万能变量名 var num = 1;

• console.log({var}) //打印一个变量 在审查的console里面可以用

3. 数据类型

<script>
    变量
        var 除了数字（除下划线，$外的字符）不能当首字符，其他都行
        var 中文 = “zhongwen”;
        var zh = "中文"; //都是可以的
        es6版本支持let定义局部变量
    number
        123 //整数
        123.1  //浮点数
        1.123e3  //科学计数法
        -99  //负数
        NaN   //not a number
        Infinity   //表示无限大
    字符串
    	'aba'  	"aba"
    布尔值
    	true 	false
    逻辑运算
    	&& 		|| 	  !  
    比较运算符
     	=  
        == 等于(类型不一样，值一样，也会判断为true)
        === 绝对等于 （类型一样，值一样，才会是true）//NaN===NaN为false  ，这个与所有的数值都不相等，包括自己，只能通过isNaN方法来判断是不是NaN
    null，undefined
        null：空
        undefined：未定义
    数组
    	JS中的数组不需要类型相同
        var arr = [1,"2",true,null]
    对象
    	对象是大括号，每个属性用逗号隔开，最后不用分号
    	var person = {
            name:"qingjiang",
            age:3
		}
      	取对象的值
        person.name
		person.age
    严格检查模式
    	在JS代码块里面添加'use strict'
            <script>
                'use strict'//必须写在第一行
            </script>
</script>

字符串详解

<script>
    'use strict'
    //正常字符串我们使用单引号，双引号包裹，注意转义符号
    \u4e2d 		 //unicode字符
    \x65		 //ASCII字符
    //返单引号可以多行字符串编写,在ese下面
    var msg = `wo
				qu
				ni
				da
				ye`
    //支持模板表达式
    var name = "jimei";
    var age = 3;
    let msg = `nihao${name}` //本质就是EL表达式
    //字符串长度，在控制台写console.log(name.length)
    //字符串在不可以修改单个值，但是可以调用方法修改
    在控制台写console.log(name.toUpperCase()) //将字符串所有字母大写
    在控制台写console.log(name.toLowerCase()) //将字符串所有字母小写
    在控制台写console.log(name.indexOf('i')) //获取第一个'i'出现的位置
    在控制台写console.log(name.substring(1,3)) //截取字符串中的[2,3)字符
    
    
</script>

数组详解

<script>
    //Array可以包含任意的数据类型
    var arr =[1,2,3,4,5,6]
    //给arr.lenth赋值，数组大小就会发生变化，变小会丢失元素
    arr.indexOf(2) //返回第一个出现2的数组下标
    //字符串的1和整型1在数组里面是不一样的
    var arr1 = [1,2,"1"]
    arr1.indexOf(1) //返回0
    arr1.indexOf("1") //返回2
    var arr2 = arr.slice(1,5) //返回一个新的包含arr[1,5)的数组
    arr.push("12"); //压入到尾部
    arr.pop();	//弹出尾部的一个元素
    arr.unshift("13"); //压入到第一个
   	arr.shift();//弹出头部的一个元素
    arr.sort(); //给数组排序
    arr.reverse();	//将整个数组反转
    var arr3 = arr.contat([1,2,3]);//拼接成一个新数组，原数组的值不变
    arr.join('-'); //用特定的字符拼接所有元素
    var[[1,2],[3,4],[5,6]];//多维数组的定义
    
</script>

对象详解

<script>
    //可以理解为若干键值对
     var 对象名 = {
            属性名:属性值,
            属性名:属性值
		}
    //取对象
    对象.属性名
    //对象赋值
    取了对象以后直接用等于号给他赋值
    person.name = "jimei";
    //使用一个不存在的对象属性不会报错，只会undefined
    //可以通过delete删除对象的属性
    delete person.name //删除成功后返回值为true
    //直接给新的属性名添加属性值就可以添加新的属性了
    person.haha = "haha"
    'age' in person //判断属性名是否在这个对象中，包括继承下来的属性名
    person.hasOwnProperty('toString') //判断属性名是否是这个对象自己拥有，不包括继承下来的
</script>

流程控制(与C++)

<script>
    'use strict'
    var age = 3;
    //if判断
    if(age>3){
        alert("hahah");
    }elseif(age<5){
        alert("hehehe");
    }else{
        alert("hhh");
    }
    //循环
    while(age<10){
        age = age +1;
        console.log(age);
    }
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    for(var index in arr){
         //index为arr里的下标
    }
    for(var num of arr){
         //num为arr里具体的值
    }
</script>

MAP和SET

<script>
	'use strict'
    //字典
    var map = new Map([['tom',100],['jack',90]]);
    console.log(map.get('tom')); //获取键为'tom'的值
    map.set('admin',123); //添加一个键’admin'，将其值赋为123
    map.delete('tom'); //将键'tom'及其值删掉
    //无序重复的集合
    var set = new Set([1,2,3,1]);
    set.add(4); //给集合里面添加值
    set.delete(1); //给集合里删除值
    set.has(3); //判断集合里面有没有3
    //遍历map，set只能用for of，相当于用迭代器的方式遍历map,set
    
</script>

4. 函数

定义函数

//方式一
function abs(x){
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}
//方式二
var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果

如果没有执行return，函数执行完也会返回结果，结果就是undefined

调用函数

abs(10)
abs(-10)
//JS可以传任意个参数，也可以不传参数

//不传参数如何规避
function abs(x){
    if(typeof x!=='number'){
        throw 'Not a Number';
    }
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}

//传入多个参数怎么规避
function abs(x){
    if(arguments.length>1){		//arguments.length表示传进来的参数个数
        for(let i = 1;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}
function abs(x,..rest){	//rest用于接收除已定义的元素外的元素
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}

变量的作用域

/*在函数体中声明，则在函数体外不可以使用（可以用闭包实现）
*如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
*内部函数成员可以访问外部成员，反之不行
*假设内部函数变量和外部函数变量重名，内部函数会屏蔽掉外部同名成员变量
*/

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = "y";		//结果xundefined,因为y的声明会被提到前面去，但是赋给y的值还是会在后面
}

//alert()这个函数本身也是一个windows变量
var new_alert = window.alert;
new_alert("jimei");//当把window.alert赋值给一个新的变量的时候原来系统自带的alert就会失效
alert("jimeiUniversity");//执行这一句不会弹出窗口
window.alert = new_alert;//将值重新赋给系统自带的alert

//var全局变量
//由于我们所有的全局变量都会绑定到我们的windows上，如果不同的js文件用了同一个变量名就会冲突
//解决办法：添加一个命名空间，让变量不会绑定到windows的全局作用域
var JiMei = {}
JiMei.name="jimeiUniversity";
function JiMei.add(a,b){
    return a+b;
}

//let局部作用域
fuction aaa(){
    for(var i=0;i<10;i++){
        console.log(i)
    }
    console.log(i)//这里的i能输出 这里就是局部作用域冲突了
}
fuction aaa(){
    for(let i=0;i<10;i++){
        console.log(i)
    }
    console.log(i)//用了let以后，i就变成了局部变量，只能在for循环里面使用
}

//常量const
//ES6之前用全大写字母表示常量，可以改变这个值（不推荐）
//ES6之后用const，用了之后就不能改了（推荐）
const PI = '3.14';

方法

//方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var jimei = {
    name = 'jimeiUniversity',
    age = 19,
    birth: function(){  //方法定义第一种
        var date = new Date().getFullYear();
        return date-this.age;
    }
}
var jimei = {
    function getbirth(){	//方法定义第二种，函数会在window（不推荐）
        var date = new Date().getFullYear();
        return date-this.age;
    }
    name = 'jimeiUniversity',
    age = 19,
    birth: getbirth
}

//属性
jimei.age

//方法
jimei.birth()

5. 内部对象

//标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undifined
"undefined"

Date

var now = new Date(); //Tue Apr 27 2021 12:54:35 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳  全世界统一
console.log(new Date(1578106175991))  //将时间戳转化为时间
console.log(now.toLocaleDateString()); //2021/4/27

JSON

早期，所有数据传输习惯使用XML文件！

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS一切皆为对象，任何JS支持的类型都可以用JSON来表示；

格式
对象都用{}
数组都用[]
所有的键值对都是用key:value


var user = {
    name:"jimei",
    age:3
}
var jsonUser = JSON.stringify(user) //对象转化为JSON
var obj = JSON.parse('{name:"jimei",age:3}'); //JSON字符串转化为对象

Ajax

• 原生的js写法 xhr异步请求
• jQuey封装好的方法$("#name").ajax("")
• axios请求

6.面向对象编程

什么是面向对象

类：模板

对象：具体的实例

类是对象的抽象，对象是类的具体表现

继承，原型

//__proto__继承
var Student = {
    name:"jimei",
    age:3,
    run:function(){
        console.log(this.name + "run....");
    }
};
var xiaoming = {
    name:"xiaoming"
};

xiaoming.__proto__ = Student; //xiaoming的原型是Student，相当于继承
xiaoming.age //3
xiaoming.run() //xiaomingrun.....


//class继承（ES6的时候引入）
class Student{ //定义一个学生类
    
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}
class DaStudent extends Student{ //DaStudent继承了Student
    constructor(name,grade){
        super(name)
        this.grade = grade
    }
    myGrade(){
        alert(grade);
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new DaStudent("xiaohong",1);

原型链

7.操作BOM对象

JS和浏览器关系？

JS的诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

window代表浏览器窗口

window.alert()
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth

window.Navigator //封装了浏览器的信息
navigator.appVersion //版本
navigator.userAgent //用户代理
navigator.platform  //版本

screen //代表全屏幕属性
screen.width //用户屏幕宽度
screen.height //用户屏幕高度

location //代表当前页面的URL信息
host //主机
href //当前指向的位置
protocol //协议
location.assign('URl');//将网页重定向到URL

document //代表当前的页面，HTML DOM文档树
document.title //当前页面的标题
document.title = 'jimei' //当前页面的标题改为jimei
document.getElementById('')			//获取具体的文档树节点
document.getElementByClassName('')
document.getElementByTagName('')
document.cookie //可以直接获取cookie,服务器端可以设置cookie:httpOnly

history  //代表浏览器的历史记录
history.back() //退回
history.forward() //前进

8.操作DOM对象

DOM：文档对象模型

浏览器网页就是一个DOM树形结构

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

//获取dom节点
<div id="father">
    <h1>
        标题一
    </h1>
    <p id="p1">
        p1
    </p>
    <p class="p2">
        p2
    </p>
</div>
<script>
	var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementsById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var children = father.children; //获取父节点下的所有子节点
    			//father.firstchild
    			//father.lastchild
</script>

//更新节点
<div id="id1">
    
</div>
<script>
	var id1 = document.getElementsByid('id1');
    id1.innerText(123)  //修改内容
    id1.innerHTML='http://www.baidu.com'; //可以解析HTML文本标签
    id1.style.color = 'red' //可以修改样式
    id1.style.fontsize = '20px'
    id1.style.padding = '2px'
</script>

//删除节点，先获取父节点，再通过父节点删除自己
<div id="id2">
    <h1>
        标题一
    </h1>
</div>
<script>
	var id2 = document.getElementsByid('id2');
    id2.removeChild(id2.children[0]);		//删除多个节点的时候，children是在时刻变化的
</script>

//插入节点
<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'),
        list = document.getElementById('list');
    list.appendChild(js);//追加到后面
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newp.innerText = 'Jimei';
    list.appendChild(newP); //创建了一个新的标签追加到后面
    var myScript = document.create.createElement('script');
    myScript.setAttribute('type,'text/javascript');  //创建了一个标签节点并将属性用键值对的方式传入
    list.appendChild(myScript);
    list.insertBefore(js,ee) //在ee前面加一个js
    
</script>

9.操作表单

• 文本框 text
• 下拉框<select>
• 单选框radio
• 多选框checkbox
• 隐藏域hidden
• 密码框password

表单的目的：提交信息

获取，修改表单的值

<form action="URL">
    <span>用户名：</span><input type="text" id="username">
    <span>性别</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="woman" id="girl">女
</form> 
<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' //修改输入框的值
    
    //对于单选框，多选框value只能取到当前的值
    boy_radio.checked //查看是否选中
    boy_radio.checked = true; //修改男已被选中
</script>

提交表单

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="#" method="post" onsubmit="check()">//第二种提交表单的方法
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <button type="submit" onclick="check()">提交</button>
</form>
<script>
	function check(){
        var um = document.getElementById('username');
        var pwd = document.getElementById('password');
        //MD5算法
        pwd.value = md5(pwd.value);
        return true;
    }
</script>

10.jQuey

jQuery库，里面存在大量的JavaScript函数

详细的学习网站在此 https://jquery.cuishifeng.cn/

获取jQuery

1. 直接去官网下

2. CDN jQuery :jQuery加速<script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script>

两种方法都可以

使用jQuery

//万能公式  
$().action()
<a herf="" id="tjQuery">点我</a>
<script>	
	$('#tjQuery').click(function(){        
		alert("jimei");    
		})
</script>

jQuery选择器

$('p').click()  //标签选择器
$('#id1').click() //id选择器
$('.id2').click() //类选择器
//CSS中能用的选择器都能用

事件

//鼠标事件
mousedown() //按下
mouseenter()
mouseleave() //离开
mousemove() //移动
mouseout()
mouseover()  //点击结束
mouseup() 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"\></script\>
<body>    
	mouse:<span id="mouseMove"></span>    
	<div id="divMove">在这里移动鼠标试试</div>
</body>
<script>        //当网页元素加载完毕之后，相应事件        
	$(function(){        
		$('#idvMove').mosemove(function(e){           
		 $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY) //显示XY的坐标        
		})    
	});
</script>

操作DOM

<html>	
	<head>		
		<meta charset="utf-8">		
		<title>ti</title>	
	</head>	
	<body>		
		<ul id="test-ul">			
			<li class="js">JavaScript</li>			
			<li name="python">Python</li>		
		</ul>				
	<script>			
		$('#test-ul li[name=python]').text();  //查询			
		$('#test-ul li[class=js]'').html('www.baidu.com');  //设置超文本链接		
	</script>	
	</body>
</html>

CSS操作

$(元素).css({键值对});

元素的显示和隐藏

$(元素).show();
$(元素).hide();
$(元素).toggle(); //如果是显示的则隐藏，如果是隐藏的则显示