JavaScript知识点笔记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript知识点笔记,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含17087字,纯文字阅读大概需要25分钟。
内容图文
![JavaScript知识点笔记](/upload/InfoBanner/zyjiaocheng/599/a63dde324c6c4f30b93b546bd0a290c0.jpg)
注:本笔记于b站up主“遇见狂神说”https://www.bilibili.com/video/BV1JJ41177di
处学习记录,仅供学习与参考
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()
娱乐测试
内容总结
以上是互联网集市为您收集整理的JavaScript知识点笔记全部内容,希望文章能够帮你解决JavaScript知识点笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。