JavaScript笔记
1、JavaScript
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。avaScript是一门世界上最流行的脚本语言，一个合格的后端人员，必须精通JavaScrip
2、JavaScript框架
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；
3、快速入门
1、内部标签
<script>
....
</script>
2、外部引入
<script src="index.js"></script>
3、基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
// 1. 定义变量 变量类型 变量名 = 变量值
var score = 1 ;
//alert(num)
// 2. 条件控制
if (score > 60 && score < 70){
alert("60~70");
}else if(score > 70 && score < 80){
alert("70~80");
}else{
alert("other")
}
</script>
</head>
<body>
</body>
</html>
4、数据类型：
var ar = [1,2,"h",true]
new Array(1,23,4,5,6,7,"dfs");
js不区分小树和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符
=
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
浮点数问题
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
null 和 undefined
- null 空
- undefined 未定义
Java的数组必须是相同类型的对象~，JS中不需要这样
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');
对象：对象是大括号，数组是中括号，每个属性之间都要有，最后一个不用
var person = {
name:"zhuzhu"，
age: 13,
tags:['js','java','web','...']
}
严格检查模式：预防js的随意性导致产生的一些问题，必须写在js的第一行
'use strict'
多行字符串编写
//tab 上面 esc下面
var msg =
`hello
world
你好呀
nihao
`
模板字符串
let name ="zhuzhu";
let msg = `你好呀，${name}`
//输出:你好呀,zhuzhu
字符串不可变
大小写转换
var s = "stu";
s.toUpperCase()
s.toLowerCase()
s.substring(1) //从第一个字符串截取到最后一个字符串
s.substring(1,3) //左闭右开，输出1，2，不包含3 [)
数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5]
长度
arr.length
arr.length = 10 //数组长度会变成10，null占位
//赋值过小，元素就会丢失
indexOf,通过元素获得下标索引
let arr = [1,2,3,4,5,6]
console.log(arr.indexOf(2)) //输出1
slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
push：尾部添加元素
pop：尾部删除元素
unshift：头部添加元素
shift：头部删除元素
排序 sort()
let q = [2,3,1]
console.log(q.sort())
//输出 1，2，3
元素反转：reverse()
let a = ['A','B','C']
console.log(a)
a.reverse()
console.log(a)
concat()：拼接
console.log(a.concat([1,2,3,4])) //输出A,B,C,1,2,3,4 重新创建一个数组，原数组不改变
join,连接符
打印拼接数组，使用特定的字符串拼接
console.log(a.join('-')) //输出A-B-C 不改变原数组
多维数组
let arr = [[1,2,3],[4,5,6],[7,8,9]]
对象
var 对象名 = {
属性名:属性值,
属性名:属性值
....
}
var person = {
name:"zhuzhu"，
age: 13,
tags:['js','java','web','...']
}
对象赋值
person.name = "yuyu"
使用一个不存在的对象属性，不会报错，undefined
动态的删减，通过delete删除对象的属性
动态的添加，直接给新的属性添加值
判断一个属性是否是这个对象自身拥有的，值是任意对象
'age' in person
true
流程控制 ：略
Map和Set，使用iterator遍历迭代Map，Set
函数
自定义函数：
//方式一：
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//方式二
var abs= function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
//方式一和方式二等价！
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？
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包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest)
}
rest参数只能写在最后面，必须用…标识。
变量的作用域
在javascript中，var定义变量实际是有作用于的。
假设在函数体重声明，则在函数体外不可以使用~（闭包）
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
内部函数可以访问外部函数的成员，反之则不行
假设，内部函数变量和外部函数变量，重名！函数查找变量从自身函数开始~， 由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function aaa(){
var x = y;
console.log(x);
var x = 'y';
}
结果：x undefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
全局变量
全局对象window
alert() 这个函数本身也是一个window的变量
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence
由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()
//唯一全局变量
var quanjv ={}
//定义全局变量
quanjv.name = "suwk"
quanjv.add = function(a,b){
return a+b;
}
let 局部作用域
const 常量
Date
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
你可能观察到了一个非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5
获取当前的时间戳
if (Date.now) {
console.log(Date.now()); // 老版本IE没有now()方法
} else {
console.log(new Date().getTime());
}
JSON：轻量级的数据交换格式
在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对 都是用key:value
序列化
'use strict';
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming);
console.log(s);
//输出
{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
要输出得好看一些，可以加上参数，按缩进输出：
JSON.stringify(xiaoming, null, ' ');
//输出
{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
还可以传入一个函数，这样对象的每个键值对都会被函数先处理：
function convert(key, value) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
}
JSON.stringify(xiaoming, convert, ' ');
反序列化
拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
Ajax
- 原生的js写法 xhr 异步请求
- JQuey 封装好的方法
- axios 请求
面向对象编程
JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。
例如，创建一个Array对象：
var arr = [1, 2, 3];
其原型链是：
arr ----> Array.prototype ----> Object.prototype ----> null
class继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () {...}这样分散的代码。
var xiaoming = new Student('小明');
xiaoming.hello();
请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，返回字符串'Hello, xxx!'：
class Animal {
constructor(name) {
this.name = name;
}
}
class Cat extends Animal{
constructor(name){
super(name);
}
say(){
return "Hello, "+this.name+"!";
}
}
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A梦');
if ((new Cat('x') instanceof Animal)
&& kitty
&& kitty.name === 'Kitty'
&& kitty.say
&& typeof kitty.say === 'function'
&& kitty.say() === 'Hello, Kitty!'
&& kitty.say === doraemon.say)
{
console.log('测试通过!');
} else {
console.log('测试失败!');
}
操作BOM对象（重点）
js诞生就是为了能够让他在浏览器中运行
BOM：浏览器对象模型
- window
window代表浏览器窗口
- Navigator
封装了浏览器的信息（不重要）
- screen
代表屏幕尺寸
- location
location 代表当前页面的URL信息
host: "cn.bing.com"
href: "https://cn.bing.com/search?q=arguments&form=ANNTH1&refig=2b4fa1745450491c80b1c304c1123031"
reload: ƒ reload() //刷新页面
location.assign('...') //设置新网址
- document（内容DOM）
代表当前的页面，HTML DOM文档
document.title
"百度一下，你就知道"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
ar dl = document.getElementById('app')
</script>
获取cookie
document.cookie
- history (不建议使用)
代表浏览器的历史记录
history.back() //后退
history.forward() //前进
操作DOM对象（重要）
DOM：文档对象模型
核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加i一个Dom节点
要操作一个Dom节点，就必须要获得这个Dom节点
<h1>标题1</h1>
<div id="father">
<p id="p1" >p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByName('h1');
var h2 = document.getElementById('P1');
var H3 = document.getElementsByClassName('p2');
var father = document.getElementsById('father');
var childrens = father.children; //获取父节点下的所有子节点
//father.firstChild
//father.lastChild
</script>
这是原生代码，之后都使用JQuery
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
- id1.innerText='123' 修改文本的值
- id1.innerHtml = '123' 可以解析HTML文本标签
操作css
- id1.style.color = 'yellow'
- id1.style.fontSize='200px'
删除节点
删除节点的步骤，先获取父节点，在通过父节点删除自己
-
father.removeChild(p1)
-
father.removeChild(father.children[0]) //删除多个节点时，children是在时刻变化的，位置都会顶上一位
插入节点
<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');
var list = document.getElementById('list');
</script>
list.appendChild(js)
输出：
操作表单
表单：
- 文本框----text
- 下拉框----select
- 单选框----radio
- 多选框----checkbox
- 隐藏域----hidden
- 密码框----password
获得要提交的信息
<body>
<form action = "post">
<p>
<span>用户名：</span><input type="text" id = "username" />
</p>
<!--多选框的值就是定义好的value-->
<p>
<span>性别：</span>
<input type = "radio" name = "sex" value = "man" id = "boy"/>男
<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
</p>
</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 = "value";
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
girl_radio.checked = true;//赋值
</script>
</body>
提交表单。md5加密密码，表单优化
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<!--MD5加密工具类-->
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
</head>
<body>
<!--表达绑定提交事件
οnsubmit= 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
<p>
<span>用户名：</span><input type="text" id = "username" name = "username"/>
</p>
<p>
<span>密码：</span><input type="password" id = "password" />
</p>
<input type = "hidden" id = "md5-password" name = "password">
<!--绑定事件 onclick 被点击-->
<button type = "submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var username = document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-password");
//pwd.value = md5(pwd,value);
md5pwd.value = mad5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
return false;
}
</script>
</body>
</html>
JQuery
javaScript和jQuery的关系？
jQuery库，里面存在大量的JavaScript函数
公式：$(selector).action() $(选择器).选择事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert("hhh")
})
</script>
</body>
//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();
//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
事件
鼠标事件
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
节点文本操作
$('#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();
浙公网安备 33010602011771号