JavaScript学习笔记
目录
1、JavaScript介绍
1、JS入门
1、两种引入方式
2、基本语法入门
2、数据类型
1、字符串
2、数组
3、对象
4、Map和Set
5、函数
6、JSON 转换类型
7、数值
3、面向对象
1、继承
4、操作BOM对象
1、Window对象（代表浏览器窗口）
2、Navigator（不常用）
3、Screen
4、Location
5、document
6、history
5、操作DOM
1、获得DOM节点
2、更新节点
3、删除节点
4、插入节点
1、追加一个已存在的节点
2、添加一个不存在的节点
3、插入一个节点
6、JQuery
1、JQuery介绍以及使用
2、JQuery事件
3、JQuery操作DOM
1、JavaScript介绍
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1、JS入门
1、两种引入方式
<!-- 内部引入-->
<script>
alert("hello world")
</script><!-- 外部引入--><script src="js/qj.js"></script>新建一个js文件
2、基本语法入门
JavaScript并不像我们Java一样有很多数据类型，变量只有var和let两种，我们都最好经常用let定义，不管定义数字，字符串，数组等都用var或者let定义。
常量定义用const，定义一些不变的值，如PI。
//定义变量语法 var 变量名=变量值var socre=45;if(socre>40&&socre<50){alert("40-50")}else{alert("other")}//输出console.log("sfd")const PI=3.14我们运行后如何获取呢 alert的作用就是弹出一个显示框
获取我们输出的值：我这里是检查，有的那里是审查元素，控制台这里我们可以看到输出的内容，同时之后也可以在上面进行操作
由于JavaScript使用的时候一般情况下他不会报错，比如i=1，并没有给他定义类型，也没有报错，所以有一个检查机制，使我们更加规范使用JavaScript，‘use strict’
IDEA必须使用es6才支持
必须放在第一行
设置IDEA为ES6，用JavaScript最好把ES设置为ECMAScript6
2、数据类型
1、字符串
设置字符可以用单引号也可以使用双引号。
转义字符：\',\n,\t.....
多行字符串用 `` 来定义，tab键上面esc键下面那个
字符串变量结合在java中"name="+name这样表示，而在JS中`name=${name}`表示
字符串的方法和Java中差距不多，主要常用substring含头不含尾，方法多了一个变量名[下标]可以获得该变量下标的值从0开始
字符串的长度用length方法无变改变
'use strict'let name1 = 'wangyu'let name2 = "wangyu"//转义字符let n3 = "w\'"//多行字符串let n4=`fdsfdsfdsafdsfdafda`//字符串和变量结合let n5=`name1= ${name1}`console.log(name1[0])console.log(name1.charAt(1));console.log(name1.toUpperCase());console.log(name1.toLowerCase());//[)截取的方式，含头不含尾console.log(name1.substring(1,3));console.log(name1)console.log(name2)console.log(n3)console.log(n4)console.log(n5)
2、数组
数组定义时里面可以为数字，也可以为字符，不分类型
常用方法：
indexOf(index)：获取数组该元素的下标
slice(index1,index2)获取从index1到index2的数组元素，同样包头不包尾
push(value),将值放入数组尾部，pop弹出尾部的一个元素
unshift(value)将值放入数组头部，shift:弹出头部的一个元素
sort：升序排序 reverse：反转 concat：合并数组 join：拼接数组元素
JavaScript中数组长度可改变
遍历：
let a=[2,23,4] for (let x of a) {console.log(x); } for (let x in a) {console.log(x); } for (let i = 0; i < a.length; i++) {console.log(a[i]); }
of遍历的是元素，in遍历的下标
//不分类型let arr=[1,2,3,4,'1','2',1];console.log(arr.length)arr.length=10;//多维数组let arr1=[[1,2],[3,4],['1','a']]//获取字符串该元素的下标console.log(arr.indexOf(2));//类似于字符串的substring(]arr.slice(3,5)//push压入到尾部，pop弹出尾部的一个元素arr.push('a');arr.pop();//shift弹出头部的一个元素，unshift压入头部的一个元素arr.shift()arr.unshift('a')//升序排序arr.sort()//元素反转arr.reverse()//两个数组会合并到一块，并没有改变原来的数组，只是会返回一个新的数组arr.concat([1,2,3])//打印拼接数组，使用特定的字符串连接arr.join('-')let a=[2,23,4]for (let x of a) {console.log(x);}for (let x in a) {console.log(x);}for (let i = 0; i < a.length; i++) {console.log(a[i]);}
3、对象
Java中定义对象用new，JavaScript中定义对象语法：
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
方法名：function（）{
方法
}
}
//定义对象// var 对象名={// 属性名：属性值，// 属性名：属性值，// 属性名：属性值，//方法名：function（）{// 方法// }// }var person={name:"wangyu",age:20,score:70,run:function () {console.log(this.name+"run...")}}
4、Map和Set
Map和Set和Java里面差别不大
set（key,value）：Map新增或者修改方法
get（key）通过key获得value
add(value)：set添加元素
has（value）:判断该元素是否在set集合里
var map=new Map([["Tom",100],["Jack",90],["hh",180]]);var name=map.get('Tom');//通过KEY获得valuemap.set('admin',3452)//新增或修改map.delete('tom')//删除var set=new Set([3,1,4]);set.add(2);//添加set.delete(1);//删除console.log(set.has(3));//set里是否有3元素5、函数
在JavaScript中
= 赋值 ==类型不一样，值一样为true ‘1’==1 为true ===类型和值必须都一样才为true
typeof：类型
arguments：获得所有参数
rest：没有用到的参数
function abs(x,...rest){if (typeof x!=="number"){throw'Not a Number'}//参数的个数for (let i = 0; i <arguments.length ; i++) {console.log(arguments[i])}//没有用的参数console.log(rest);if (x>=0){return x;}else{return -x;}}
6、JSON 转换类型
stringify(对象名)：将对象转为字符串
parse(string):将字符串转为对象
var person={name:"wangyu",age:5,sorce:45}//将对象转为字符串 '{"name":"wangyu","age":5,"sorce":45}'var json = JSON.stringify(person);//将字符串转为对象var parse = JSON.parse('{"name":"wangyu","age":5,"sorce":45}');7、数值
数值不分整数，浮点数，全部为number
3、面向对象
1、继承
xiaoming继承Student
xiaoming.__propo__= Student;
var Student={name:'wangyu',age:12,run: function (){console.log(this.name+'run')}};var xiaoming={name:'xiaoming'}//xiaoming原型是Studentxiaoming.__propo__= Student;这是在ES6之前实现继承的方式，现在不用了，现在用下面的居多
class 类名{
constructor(value,value...) {等同于Java中的构造函数
this.value=value;
this.value=value;
}
方法名(){
语句1；
语句1；
}
}
继承
class 类名 extend 类名{
constructor(value,value...) {如果有和父类相同的属性
super(value)
this.value=value;
}
方法名(){
语句1；
语句1；
}
}
class person{//同构造函数constructor(name) {this.name=name;}hello(){alert("hello")}}class Student extends person{constructor(name,age) {super(name);this.age=age;}heo(){alert('bbbb')}}var xiaolei=new Student('xiaoming',22);上面介绍了一些JavaScript与Java的差别，下面讲一些重点
4、操作BOM对象
BOM：浏览器对象模型
1、Window对象（代表浏览器窗口）
2、Navigator（不常用）
Navigator：封装浏览器信息，不常用，不建议使用，不安全
3、Screen
Screen：代表屏幕
4、Location
代表当前网页的URL信息
- hostname: "www.baidu.com" 主机名
- href: "https://www.baidu.com/" 地址
- protocol: "https:" 协议
- reload: ƒ reload() 方法 刷新网页
- assign: ƒ assign() 设置新地址
- location.assign(URL) 可从百度进入新地址
5、document
代表当前网络页面，HTML，DOM文档树
<dl id="Number1"><dt id="Number">Number</dt><dd class="One">One</dd><dd>Two</dd><dd>Three</dd>
</dl>
<script>document.getElementById('Number1')
</script>
获取cookie，劫持
6、history
获取历史浏览记录
5、操作DOM
DOM：文档对象模型
做什么事情前都需要先获得DOM节点 更新，删除，新增，插入
1、获得DOM节点
<div id="father"><h1>h1</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>document.getElementsByName('h1');document.getElementById('p1');document.getElementsByClassName('p2');var fathers = document.getElementById('father');var children = fathers.children;fathers.firstChild;fathers.lastChild;</script>
2、更新节点
更新节点前要先获取到节点
操作文本
会把里面本身有的删除
<div id="father"><h1>h1</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
3、删除节点
删除节点要先获取父节点才可以删除子节点
<div id="father"><h1>h1</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var self=document.getElementById('p1');var father = p1.parentElement;father.remove(self);//这个是动态的每次删除下面的都会往上面补father.remove(father.children[0]);</script>
4、插入节点
1、追加一个已存在的节点
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="we">JavaWE</p>
</div><script>varjs=document.getElementById('js');list=document.getElementById('list');list.appendChild(js)</script>
2、添加一个不存在的节点
<!DOCTYPE html>
<html lang="en">
<head id="head"><meta charset="UTF-8"><title>Title</title><style type="text/css"></style>
</head>
<body id="body">
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="we">JavaWE</p>
</div><script>varjs=document.getElementById('js');list=document.getElementById('list');list.appendChild(js);var newP=document.createElement('p');// newP.id='newP';newP.setAttribute('id','newP')newP.innerText="wang yu";list.appendChild(newP);//可以创建一个style标签var myStyle=document.createElement('style');myStyle.setAttribute('type','text/css')myStyle.innerHTML='body{background:red}';document.getElementById('head').appendChild(myStyle);var body =document.getElementById('body');body.style.backgroundColor='green';</script>
</body>
</html>
获取节点的时候，我这里有时候获取name的时候获取不到，可以给他设置一个id，如果获取的节点是一个数组时，要看数组第几个是我们所需要的节点。
3、插入一个节点
<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="we">JavaWE</p>
</div><script>varlist=document.getElementById('list');js=document.getElementById('js');ee=document.getElementById('ee');list.insertBefore(js,ee);</script>
先获取父节点，然后用父节点进行插入，insert Before方法
6、JQuery
1、JQuery介绍以及使用
JQuery里面包含了大量的Jscript函数，可以直接从网上下载
下载JQuery:http://www.zidiu.com/page-6065.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.5.1.js"></script>
</head>JQuery使用：$(selector).action()
2、JQuery事件
写一个案例,下面是鼠标移动事件，同样还有很多事件，如果单击，键盘事件等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.5.1.js"></script><style>#divform{width: 400px;height: 400px;border: 1px solid red;}</style>
</head>
<body>
mouse：<span id="mousemove"></span>
<div id="divform"></div>
<script>//网页加载完后响应时间$(function () {$('#divform').mousemove(function (e) {$('#mousemove').text('x='+e.pageX+' y='+e.pageY)})});
</script>
</body>
</html>
3、JQuery操作DOM
JQuey只要用选择器选择上都可以对他进行一些设置，这里我给介绍一个网站：https://jquery.cuishifeng.cn/css.html
上面有很多比如选择器介绍之类的，也有很多效果
我所知的JScript只有这么一点，还有很多所不知，写博客主要是为了进行学习，如果有什么其他的漏掉的知识或者小错误的请见谅！！！！
JavaScript学习笔记相关推荐
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型 内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...
- JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
- Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
- JavaScript 学习笔记（1）
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...
- 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记（七）——厚积薄发之小成果
JavaScript学习笔记(七)--厚积薄发之小成果 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/wdpp/archive ...
最新文章
- IIS6.0上某些文件类型不能下载
- 操作系统基本分段存储管理方式
- XTU 1250 Super Fast Fourier Transform
- [Swift]LeetCode556. 下一个更大元素 III | Next Greater Element III
- 浏览器安全与MSAA
- 管理系统统一鉴权服务器,确认服务器已启用密码鉴权
- python数据展示的模块_python中使用mock模块返回数据
- 360 android 应用市场,360应用市场
- linux下adb工具的安装目录下,adb工具包如何安装？怎么用？
- 数据库名、实例名、数据库域名、全局数据库名、服务名 ，
- 读史可以明智_在开发中明智思考的5种方法
- (Cys-RGD)包被CdTe量子|3-巯基丙酸(MPA)包被近红外发光CdTe量子
- 2013阿里技术嘉年华：基于OpenStack构建网易云主机服务
- WDA-FPM-4-用OVP做查询跳转到明细
- Educoder头歌单总线CPU设计(定长指令周期3级时序)(HUST)谭志虎 华中科技大学计算机组成原理实验计算机硬件系统设计
- 网络图如何用计算机计算方法,工程网络图时间参数最简单计算方法.doc
- SPI方式读取汉字字库芯片
- I - ICPC Awards（字符串）
- 解决zabbix启动报错
- esp8266对接天猫精灵（3）原理
热门文章
- 分布式系统架构网络之IDC机房
- pip下载安装包默认位置_修改pip 下载模块或软件的默认文件夹
- 【月伴流星】Windows7 SP1_x86/x64多合一安装版2019.08
- word文字校对工具_如何在Word中使用校对面板
- FA：萤火虫算法的改进及Python实现
- linux 二进制编辑工具,全网最全Linux的十大十进制编辑器，要接触Linux的你摆脱不了...
- xshell5安装包（百度云），官方免费版，不会强制更新，没有标签限制（2019-4-4）
- 制作唐诗网页代码_有关于诗词的网页代码
- 如何在Visio中绘制KPT模型中的用户（小人）？在哪里找？
- FFmpeg滤镜：使用colorkey抠图