JavaScript知识点笔记

最新推荐文章于 2024-07-12 16:27:40 发布

键.

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量164

点赞数

文章标签： javascript web

本文链接：https://blog.csdn.net/beekim/article/details/114765800

版权

1，快速入门

注意：外部引入的时候要成对存在才会有效果

<script src="../lesson01/js/demo01.js"></script>

console.log();

2,数据类型快速浏览

数值，文本，图形，音频，视频。。。

number

js不区分整数和小数，Number

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN//not a number 不是一个数字
Infinity//表示无限大

字符串

‘adc’ “adc”

布尔值

true，false

逻辑运算

&&		两个为真，结果为真
||		一个为真，结果为真
！		真即假，假即真

比较运算符 ！！！！

=	赋值
==	等于(类型不一样，值一样，也会判断为true)
===	绝对等于（类型一样，值一样，结果为true）

js的缺陷，坚持不要使用==

NaN===NaN，这个值与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

尽量避免使用浮点数进行运算，存在精度问题（会存在精度溢出的问题）

null和undefined

null：空

undefined：未定义

数组

//保证代码可读性，尽量使用这种[]
var arr=[1,2,3,4,5,'a',aba,null,true];

new Array(1,2,3,4,'hello');

如果越界了就会出现undefined

对象

对象是大括号{},数组是中括号[]

<script>


var person = {
	name:'cdd',
	age:18,
	tag:'student',
	tags:[112,3,'java']
	
}
	
	</script>

严格检查模式

<script>

	//前提：IDEA需要设置支持ES6语法
'use strict'；//严格检查模式，预防js的随意性导致产生的一些问题
//必须写在js的第一行
//局部变量建议使用let去定义；
	let=1；
	
	</script>

3，数据类型详解

3.1，字符串

1，正常字符串我们使用单引号或双引号包裹，

2，注意转义字符 \

\ '
\n
\t
\u4e2d 	\u#### Unicode字符
"\x41"	ascll字符

3，多行字符串编写

<script>
	var msg=
		`
java
pyhton
qianduan
你好

`
	console.log(msg);
	</script>

4,模板字符串

<script>
let name ='cdd';
let age=3;;
let msg=`你好，${name}`

   console.log(msg);
   </script>

5,字符串长度

6字符串的可变性，不可变

7，大小写转换

注意这里是方法，不是属性

8，indexOf

9，substr截取字符串（从0开始计数）

截取第一个字符串和之后的字符串

3.2，数组

Array包含任意的数据类型

1，长度

注意：加入给arr.length赋值,数组大小就会发生变化，如果赋值过小，元素就会丢失

2，indexof，通过元素获得下标索引

arr.indexof(2)

字符串的“1”，和数字1是不同的

3，slice（）截取数组Array的一部分，返回一个新数组，类似于String中的substr

4，push()，pop() 尾部

push():压入到尾部

pop():弹出尾部的一个元素

5，unshift(),shift() 头部

6，排序arr.sort()

7，元素反转arr.reverse()

8,concat()

注意：concat()并没有修改数组，只是会返回一个新的数组

9，连接符join

10，多维数组

数组：存储数据（若何存，如何取，方法都可以自己实现！）

3.3，对象

若干个键值对

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值，
    属性名：属性值，
}

	//定义了一个person对象
var person={
	name:"cdd",
	age:3,
	email:"1354644@qq.com",
	score:0

}

js中的对象，{…}表示一个对象，键值对描述属性 xxxxx：xxxxx，多个属性之间用逗号隔开，最后一个属性不加逗号！

注意：js中的所有的键都是字符串，值是任意对象！

1，对象赋值

	name:"cdd",
	age:3,
	email:"1354644@qq.com",
	score:0

2,使用一个不存在的对象的属性，不会报错！undefined

3，动态的删减属性，通过delete删除对象的属性

4，动态的添加

5，判断属性值是否在这个对象中！xxxx in xxxx

6，判断一个属性是否是这个对象自身所拥有的 hasOwnProperty()

3.4，流程控制

3.5 Map和Set

ES6的新特性！

map

//var names=["tom","herry","jack"];
//var scores=["100","99","100"];

	var map=new Map([['tom',99],['jerry',100],['jack',96]]);
	var name=map.get('tom');//通过key获得value
	map.set('admin',123456)//增加
	map.delete('tom')//删除
	console.log(name);

set：无需不重复的集合

	var set=new Set([3,1,2,5,1,1,2,5,4,3]);//可以去重复
	console.log(set);
	set.add('xiaoming');//添加
	set.add('xiaohong');
	set.delete('xiaohong');//删除
	console.log(set.has(3));//是否包含某个元素

3.6，iterater

ES6新特性

遍历数组

//通过for of /for in 下标

var arr=[3,4,5];
	for(var x of arr){
		console.log(x);
	}

遍历map

	var map=new Map([['tom',99],['jerry',100],['jack',96]]);
	for(let c of map){
		console.log(c);
	}

遍历set

var set=new Set([5,6,7]);
	for(let z of set){
		console.log(z);
	}

4，函数

方法：对象（属性，方法）

函数：

4.1，定义函数

定义方式一：

public 返回值类型 方法名（）{
    return 返回值;
}//java

//绝对值函数
function abs(x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}//js

方式二：

var abs=function(){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

假设参数不存在，如何规避？

var abs=function(x){
		//手动抛出异常
		if(typeof x!=='number')
		{
			throw 'Not a number';

			 }
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

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){
		console.log("a=>"+a);
		console.log("b=>"+b);
		if(arguments.length>2){
			for(var i=2;i<arguments.length;i++)
		}
		
	}

现在：


	function aaa(a,b,...rest){
		console.log("a=>"+a);
		console.log("b=>"+b);
		console.log(rest)
	}

rest参数只能写在最后面，必须用…标识。

4.2，变量的作用域

js中，var定义的变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，需要使用闭包）

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。

function q1(){
    var x=1;
    x+=1;
}
function q2(){
    var x='A';
    x+=1;
}

内部函数可以访问外部函数的成员，反之则不行

	function q1(){
    var x=1;
		//内部函数可以访问外部函数的成员，反之则不行
		function q2(){
    	var y=x+1;//2
    	}
		var z=y+1//报错
}

假设内部函数变量和外部函数变量重名。

	function q1(){
    var x=1;
		
		function q2(){
    	var x='a';
			console.log('inner'+x);
			
    	}
		console.log('outter'+x);
		q2();
}
q1();

假设在js中函数查找变量从自身函数开始，由“内”向“外”查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function q1(){
		var x="x"+y;
		console.log(x);
		var y="y";
	}

	q1()

结果：x undefined

说明js执行引擎，自动提升了y的声明，但是不会提升y的赋值。

function q2(){
		//var x,y,z...;
		var x="x"+y;
		console.log(x);
		var y="y";
		
	}

这是在js建立之初就存在的特性。养成规范，所有的变量定义都放在函数头部，不要乱放，便于代码维护。

function q(){
    var x=1,
        y=x+1,
        z,i,a;//undefined
    
    //之后随意用
}

全局函数

var x=1;
	function f(){
		console.log(x);
	}
	f();

全局对象 window

	var x='xxx';

	alert(x);
	alert(window.x);//默认所有的全局变量都会自动绑定在window对象下；

alert()这个函数本身也是一个window变量；

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，报错 RefrenceError

规范

由于所有的全局变量都会绑定到我们的windows上，如果不同的js文件使用了相同的全局变量，冲突~如何能够减少冲突？

//唯一全局变量
	var cddAPP={};
	
	//定义全局变量
	
	cddAPP.name='cdd';
	cddAPP.add=function(a,b){
		return a+b;
	}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

jQuery

局部作用域 let

	function aaa(){
		for(var i=0;i<100;i++){
			console.log(i);
		}
		console.log(i+1);//问题？i出了这个作用域还可以使用
			
	}
	aaa()

ES6 let关键字，解决局部作用域冲突的问题!

	function aaa(){
		for(let i=0;i<100;i++){
			console.log(i);
		}
		console.log(i+1);//问题？i出了这个作用域还可以使用
			
	}
	aaa()

建议使用let去定义局部作用域变量；

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。

var PI ='3.14';
console.log(PI);
PI='213';
console.log(PI);

在ES6引入常量关键字const

const PI='3.14';
	console.log(PI);
	PI='123';

4.3，方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

	var cdd={
		name:'cdd',
		birth:2000,
		//方法
		age:function (){
			//今年-出生的年
			var now=new Date().getFullYear();
			return now -this.birth;
		}
	}
    
    
    
    //属性
    cdd.name
	//方法，一定要带（）
	cdd.age()

this 代表什么？拆开上面的代码：

	function getAge(){
		//今年-出生的年
			var now=new Date().getFullYear();
			return now -this.birth;
	}
	
		var cdd={
		name:'cdd',
		birth:2000,
		//方法
		age:getAge
	}
        
    //cdd.age() ok
    //getAge() NaN  window

this是无法指向的，是默认指向调用它的那个对象；

apply

在js中可以控制this指向

	function getAge(){
		//今年-出生的年
			var now=new Date().getFullYear();
			return now -this.birth;
	}
	
		var cdd={
		name:'cdd',
		birth:2000,
		//方法
		age:getAge
	}
		
		getAge.apply(cdd,[]);//this，指向了cdd，参数为空

5，内部对象

标准对象

5.1，Date

var now =new Date();
	now.getFullYear();//年
	now.getMonth();//月
	now.getDate();//日
	now.getDay();//星期几
	now.getHours();//时
	now.getMinutes();//分
	now.getSeconds();//秒
	now.getTime();//时间戳
	
	console.log(new Date(1613443210573));//时间戳转为时间

转换

console.log(new Date(1613443210573))
VM1534:1 Tue Feb 16 2021 10:40:10 GMT+0800 (中国标准时间)
undefined
now.toLocaleString //注意，调用的是一个方法，不是属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/2/16 上午10:40:10"

now.toGMTString()
"Tue, 16 Feb 2021 02:40:10 GMT"

5.2，JSON

json是什么？

早期，所有数据传输习惯于使用XML方式，

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

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

格式：

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

var user={
		name:"cdd",
		age:3,
		sex:"男"
		
	};
	//对象转化为json字符串
	var jsonuser =JSON.stringify(user);
	
	//json字符串转化为对象,参数为json字符串
	var obj=JSON.parse('{"name":"cdd","age":3,"sex":"男"}');

json和js对象的区别：

var obj={a:'hello',b:'hellob'};

var json='{"a":"hello","b":"hellob"}';

5.3，Ajax

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

6，面向对象编程

6.1，什么是面向对象？

js,java,c#…面向对象：js有些区别！

类：模板 原型对象
对象：具体的实例

在js中需要换一个思维方式！

原型

var student={
		name:"cdd",
		age:3,
		sex:"男",
		run:function (){
		console.log(this.name+"在跑步。。");
			}	
			};
	var Bird={
		fly:function(){
			console.log(this.name+"在飞。。");
		}
	}
	
	var xiaoming={
		
		name:"xiaoming"
	};
	
	//原型对象
	xiaoming.__proto__=Bird;

以前：

	function Student(name){
		this.name=name;
		
		
	}
	
	//给student增加一个方法
	Student.prototype.hello=function(){
		alert("hello");
		
	}

class继承

class关键字，是在ES6引入的

1,定义一个类，属性，方法


	//ES6之后，==========
	class Student{
		constructor(name){
			this.name=name;
		}
		
		hello(){
			alert("hello");
		}
	}
var xiaoming=new Student(xiaoming);

2，继承

class Student{
		constructor(name){
			this.name=name;
		}
		
		hello(){
			alert("hello");
		}
	}
	
	class xiaoxuesheng extends Student{
		constructor(name,grade){
			super();
			this.grade=grade;
		}
		
		myGrade(){
			alert("我是一个小学生！")
		}
		
	}
	
	var xiaoming=new Student(xiaoming);
	var xiaohong=new xiaoxuesheng(xiaohong);

本质：查看对象原型

原型链

__proto__:

7，操作BOM对象（重点）

浏览器介绍

js和浏览器关系？

js诞生就是为了在浏览器中运行！

BOM：浏览器对象模型

IE 6-11
Chrome
Safari
FireFox （ linux默认浏览器）
Opera

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
1901
window.innerWidth
980
window.outerHeight
636
window.outerWidth
328

navigator

navigator,封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人人为修改！

不建议使用这些属性来判断和编写代码

screen

location

location代表当前页面的url信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('http://www.qq.com')

document

代表当前的页面，HTML DOM文档树

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dt>javaSE</dt>
    <dt>javaEE</dt>

</dl>

<script>
    let a = document.getElementById('app');

</script>

获取cookie

document.cookie

history

代表浏览器的历史记录

history.back()//后退
history.forward()//前进

8，操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

得到节点

要操作一个DOM节点，就必须要鲜活的这个DOM节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>


<script>
    let h1 = document.getElementsByTagName('h1');
    let h2 = document.getElementById('p1');
    let h3 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');

    let childrens = father.children;//获取三个子节点
    father.firstChild;
    father.lastChild;
    

</script>

这是原生代码，之后尽量都是用jQuery

更新节点

<div id="id1"></div>

<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';

</script>

删除节点

步骤：

先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>


<script>
    let h1 = document.getElementById('p1');
   	let father=p1.parentElement;
	father.removeChild(p1);

	//删除是一个动态的过程
	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);


</script>

注意：删除多个节点的时候，children是在时刻变化的，删除姐弟啊你的时候一定要注意！

插入节点

我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHtml就可以增加一个元素了，但是如果这个dom节点已经存在元素了，我们就不能这么干了！会产生覆盖。！

追加：

<p id="js">js</p>
<div id="list">
    <p id="java">java</p>
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>

</div>
<script>

    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);

</script>

创建一个新的标签，实现插入

<p id="js">js</p>
<div id="list">
    <p id="java">java</p>
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>

</div>
<script>

    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');
    list.appendChild(js);
    //通过js创建一个新的节点
    let newP = document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='ppp';
    list.appendChild(newP);

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>
</head>
<body>
<p id="js">js</p>
<div id="list">
    <p id="java">java</p>
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>

</div>
<script>

    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');
    list.appendChild(js);
    //通过js创建一个新的节点
    let newP = document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='ppp';
    list.appendChild(newP);

    //创建一个标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    list.appendChild(myScript);

    //
    let body = document.getElementsByTagName('body');
    

</script>

</body>
</html>

insert

<p id="js">js</p>
<div id="list">
    <p id="java">java</p>
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>

</div>
<script>
    let java = document.getElementById('java');
    let ee = document.getElementById('ee');
    let se = document.getElementById('se');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    //要包含的节点，insertBefore（newNode，targetNode）
    list.insertBefore(js,ee);
</script>

9，操作表单（验证）

表单是什么 form DOM 树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得表单的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="post">
    <p><span>用户名：</span><input type="text" id="username"></p>
    <p>
        <span>性别：</span>
        <input type="radio"name="sex"value="男" id="boy">男
        <input type="radio"name="sex"value="女" id="girl">女

    </p>




</form>

<script>
    let username = document.getElementById('username');
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    //得到输入框的值
    username.value;
    //修改输入框的值
    username.value='123';

    //对于单选框，多选框等等，只能获得当前的值

    boy.checked;//查看返回的结果，是否为true，如果为true，则被选中~
    girl.checked=true;//赋值

</script>
</body>
</html>

提交表单 md5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="#" method="post">
    <p><span>用户名：</span><input type="text" id="username" name="username"></p>
    <p>
        <span> 密码：</span><input type="text" id="pwd" name="pwd">
    </p>
    <p>

        <button type="button" onclick="aaa()">提交</button>

    </p>


</form>

<script>
    function aaa(){
        let uname = document.getElementById('username');
        let upwd = document.getElementById('pwd');
        console.log(uname.value);
        console.log(upwd.value);
        //MD5算法加密
        upwd.value=md5(upwd.value)
        console.log(pwd.value)



    }

</script>
</body>
</html>

10，jQuery

jQuery库，里面存在大量的js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery-1.8.3.js"></script>
</head>
<body>
<!--
    公式：$(selector).action()
-->
    <a href="" id="test">click me</a>
<script>
   document.getElementById('test');
    //选择器就是css选择器
    $('#test').click(function (){
        alert('hello');
    })

</script>


</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery-1.8.3.js"></script>

</head>
<body>
<script>
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();


    //jquery
    $('p').click()//标签选择器
    $('#id1').click()//id选择器
    $('.class').click()//class选择器

</script>
</body>
</html>

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery-1.8.3.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: solid 1px red;
        }

    </style>

</head>
<body>
<!--获取鼠标坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试

</div>
<script>
    //当网页元素加载完毕之后，相应事件
    //$(document).ready(function (){})可以被简写为
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })

    });

</script>

</body>
</html>

操作BOM

节点文本操作

  $('#test-ul li[name=javaee]').text();//获得值
  $('#test-ul li[name=javaee]').text('设置值');//设置值
 $('#test-ul').html();
 $('#test-ul').html('<strong>rr</strong>');

css操作

$('#test-ul li[name=javaee]').css('color','red')

元素显示和隐藏,本质display=none

$('#test-ul li[name=javaee]').show()
$('#test-ul li[name=javaee]').hide()

娱乐测试

注：本笔记于b站up主“遇见狂神说”https://www.bilibili.com/video/BV1JJ41177di
处学习记录，仅供学习与参考

键.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点笔记

注：本笔记于b站up主“遇见狂神说”https://www.bilibili.com/video/BV1JJ41177di处学习记录，仅供学习与参考1，快速入门注意：外部引入的时候要成对存在才会有效果<script src="../lesson01/js/demo01.js"></script>console.log();2,数据类型快速浏览数值，文本，图形，音频，视频。。。numberjs不区分整数和小数，Number123//整数123123.1//浮点数
复制链接

扫一扫