JavaScript整合笔记
1.1、JavaScript介绍
什么是JavaScript
JavaScript是一门世界上最流行的脚本语言。
ECMAScript
ECMAScript可以理解为是JavaScript的一个标准。
1.2、JavaScript使用
引入JavaScript
1.内部标签
2.外部引入
js文件
alert('hello,world');1.3、基本语法入门
Title
浏览器必备调试须知
1.4、数据类型（入门）
数值,文本，图形，音频,视频...
变量
变量不能以数字开头和以下符号开头，$和_可以
number
js不区分小数和整数，number
1 //整数
1.5 //浮点数
1.5e5 //科学计数法
-99 //负数
NaN // not a number字符串
'666 ' "666"布尔值
true
false逻辑运算
&& //与,两个都为真，结果为真
|| //或，一个为真，结果为真
! //非，真即假，假即真比较运算符
= 赋值符号
== 等于 （类型不一样，值一样，也会判断为true）
=== 绝对等于 （类型一样，值一样，结果为true）这是一个JS的缺陷，坚持不要使用 == 比较
通过isnan(nan) 来判断这个数是否是nan
浮点数问题
尽量避免使用浮点数进行运算，存在精度问题！
null(空指针)和undefined
null 空
undefined 未定义
//保证代码的可读性，尽量使用 []
var arr = [1,2,4,5,6,'hello',true,null]
new Array(1,2,3,4,5,6,'hello');
取数组下标，如果越界了，就会undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//java的写法:bubbles bubbles = new bubbles
var bubbles = { //javascript的写法name: "彬哥",age: 18,tags: ['js','ssm','mysql','...']}
1.5、严格检查模式strict
严格检查模式strict
1.6、数据类型
字符串
正常字符串我们使用单引号' '，或者双引号" "包裹
注意转义字符\
\'
\n
\t
\u4e2d Unicode字符
\x41 Ascll字符多行字符串编写
var msg = `hello
world
bubbles`b模板字符串
let name = '彬哥';
let age = 3;
let msg = `你好,${name}`
字符串长度
console.log(src.length)
字符串的可变性，不可变
var bubbles = 'you'
undefined
bubbles[0] = 1
1
console.log(bubbles)
you大小写转换
//大写
console.log(bubbles.toUpperCase())
//小写
console.log(bubbles.toLowerCase()))获取指定的下标
console.log(bubbles.indexOf('e'))截取
console.log(bubbles.substring(1)) //从第一个字符串截取到最后一个字符串
console.log(bubbles.substring(1,3)) //[1,3)数组
Array可以包含任意的数据类型
var arr= [1,2,3,4,5,6]长度
arr.length //长度注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失。
indexOf，通过元素获得下标索引
arr.indexOf(2)
1字符串的"1"和数学1是不同的
slice() 截取Array的一部分，返回一个新数组，类似于String中subString
arr.slice(2,3)push()、pop()
push：压入到尾部
arr
(5) [1, 2, 3, 4, 5]
arr.push('a','b') //压入到尾部
7
arr
(7) [1, 2, 3, 4, 5, 'a', 'b']pop：弹出尾部的一个元素
arr.pop //弹出尾部的一个元素unshift()，shift()头部
unshift: 压入到头部
var arr = [1,2,3,4,5,6]
undefined
arr.unshift('a','b') //压入到头部
8
arr
(8) ['a', 'b', 1, 2, 3, 4, 5, 6]shift: 弹出头部的一个元素
arr.shift() //弹出头部一个元素排序sort
arr
(4) ['b', 'c', 'd', 'a']
arr.sort() //排序
(4) ['a', 'b', 'c', 'd']元素反转reverse
arr.sort()
(4) ['a', 'b', 'c', 'd']
arr.reverse() //元素反转
(4) ['d', 'c', 'b', 'a']concat
(4) ['d', 'c', 'b', 'a']
arr.concat(1,2,3)
(7) ['d', 'c', 'b', 'a', 1, 2, 3]
arr
(4) ['d', 'c', 'b', 'a']注意:concat并没有修改数组，只是会返回一个新的数组
连接符join
打印拼接
var bubbles = [1,2,3,4,5]
undefined
bubbles.join('-')
'1-2-3-4-5'多维数组
var arr = [[1,2],[3,4],[5,6]]
undefined
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3
arr[1][1]
4填充fill
arr.fill(1)总结
数组：存储数据（如何存、取，方法都可以自己实现）
对象
若干个键值对
var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}
//定义了一个person对象，它有四个属性！var score = {name: "bubbles",age: 18,email:'2019882328@qq.com',score: 0
}js中的对象，{.....}表示一个对象,键值对描述属性xxxx;xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！
javascript中的所有的键都是字符串，值是任意对象！
对象赋值
score.name = '彬哥'
'彬哥'
score.name
'彬哥'使用一个不存在的对象属性，不会报错！undefined
score.haha //值是瞎写的，不存在
undefined动态的删减属性
delete score.name
true动态的添加，直接给新的属性添加值即可
score.bubbles = '彬哥' //自定义
'彬哥'判断属性值是否在这个对象中！ xxx in xxx!
'age' in score
true
'toString' in score
true判断一个属性是否是这个对象自身拥有的hasOwnProperty
score.hasOwnProperty('age')
true //有
score.hasOwnProperty('ssm')
false //没有流程控制
if判断
var score = 3if (score>3){ //判断1alert('hehe')}else if (score<5){ //判断2alert('wawu~')}else{ //否则alert('wawu~')}while循环，避免程序死循环
var score = 3
while (score<100){score = score+1console.log(score)
}dowhile循环，避免程序死循环
var score = 3
do{score = score+1console.log(score)
}while(score<100)for循环
for (let i = 0; i <100 ; i++) {console.log(i)
}forEach循环 5.1
var bubbles =[1,2,45,66,3,7,7,9]
bubbles.forEach(function (value){console.log(value)})for...in
var bubbles =[1,2,45,66,3,7,7,9]
//函数for(var num in bubbles){if (bubbles.hasOwnProperty(num)){console.log('存在')console.log(bubbles[num])}Map和Set
ES6新特性
Map
//ES6,Map
//学生的姓名、成绩
var map = new Map([['xiaobin',100],['bubbles',90],['xiao',60]]);
var name = map.get('xiaobin')
map.set('admin',123456) //添加和修改
map.delete('xiao')//删除
console.log(name)
Set
去除重复的值
//Set，去除重复的值
var set = new Set([1,2,1,1,3]);console.log(set)
var set = new Set([1,2,1,1,3]);
set.add(2) //添加
set.delete(1) //删除
console.log(set.has(3)) //是否包含某个元素
iterator迭代
遍历数组
var a = [1,2,3]
for (let x of a) {console.log(x)
}遍历Map
var map = new Map([['bubbles',100],['小明',90],['小美',89]]);
for(let you of map){console.log(you)
}遍历Set
//遍历Set
var set = new Set([1,2,3,4,5,6]);
for (let et of set){console.log(et)
}1.7、函数
定义函数
定义方式一
绝对值函数
function you(x){if(x>=0){return x; }else{return -x;}
}一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
var you =function(x){if(x>=0){return x; }else{return -x;}
}function(x){......}这是一个匿名函数。
但是可以把结果赋值给you(自定义)，通过you(自定义)就可以调用函数！
方式一和方式二等价！
调用函数
abs(10) //10
abs(-10) //10参数问题：javascript可以传任意个参数，也可以不传递参数~
参数进来是否存在的问题？
假设不存在参数，如何规避？
function you(x){if(typeof x!=='number'){ //手动添加异常throw 'Not a Number'}if(x>=0){return x; }else{return -x;}
}
arguments
arguments是javascript免费赠送的关键字;
代表，传递进来的所有的参数，是一个数组！
var abs = function(x){console.log("x=>"+x);for (var i = 0; i=0){return x;}else{return -x;}
} 问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。
需要排除已有的参数~
rest
以前
if(arguments.length>2){for (var i = 2;iES6引入的新特性，获取除了已经定义的参数之外的所有参数~....
function bubbles(a,b,...rest) {console.log('a=>'+a)console.log('=>'+b)console.log(rest);
}rest参数只能写在最后面，必须用...标识。
变量的作用域
在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~
function f() {var x = 1;x= x+1;
}
x= x+2;如果两个函数使用了相同的变量名
function f() {var x = 1;x= x+1;
}
function f2() {var x = 'a';x= x+1;
}内部函数可以访问外部函数的成员，反之则不行
function f() {var x = 1;
}
//内部函数可以访问外部函数的成员，反之则不行
function f2() {var y = x +1;
}
var z = y+1; //Uncaught ReferenceError: y is not defined假设，内部函数变量和外部函数的变量，重名!
function f() {var x = 1;//内部函数可以访问外部函数的成员，反之则不行function f2() {var x = 'a';console.log('inner' + x) //outer1}console.log('outer' + x) //inneraf2()
}
f() //调用假设在javaScript中函数查找变量从自身函数开始~，由’内‘向‘外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function f(){var x = 'x'+y;consloe.log(x)var y = 'y';
}
说明：javascript执行引擎，自动提升了y(自定义)的声明，但是不会提升变量y(自定义)的赋值；
function fa2(){var y;var x = 'x'+1console.log(x)y = 'y'
}这个是在javaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
function fa2(){var x = 1y = x+1z,i,a;//undefined
}全局函数
var x =1
function f() {console.log(x)
}
f()
console.log(x)、
全局对象window
var x = 'xxx';
alert(x);
alert(window.x) //默认所有的全局变量，都会自动绑定在window对象下。alert这个函数本身也是一个window 变量;
var x = 'xxx';
window.alert(x)
var old_alert = window.alert;
window.alert = function (){};
//发现alert失效了
window.alert(123)//恢复
window.alert = old_alert;
window.alert(456)javascript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~ >如何能够减少冲突？
//唯一全局变量
var bubbles = {}//定义全局变量bubbles.name = '彬哥'bubbles.add = function (a,b){return a+b;}把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
局部作用域let
function f() {for (var i = 0; i <100 ; i++) {console.log(i)}console.log(i+1) // i 出了这个作用域还能使用
}
ES6 let 关键字，解决局部作用域冲突问题！
function f() {for (let i = 0; i <100 ; i++) {console.log(i)}console.log(i+1) // i 出了这个作用域还能使用}
建议大家都是用let去定义局部作用域的变量；
常量 const
在ES6之间，怎么定义常量；只有用全部大写字母命名的变量就是常量，建议不要修改这样的值
var PI = '3.14'
console.log(PI)
PI = 123 //修改变量
console.log(PI)在ES6引入了常量关键字const
const PI = '3.14' //只读变量，不能修改
onsole.log(PI)
PI = 123 //修改变量
console.log(PI)
方法
定义方法
方法就是把函数放在对象的里面吗，对象只有两个东西：属性和方法
var bubbles = {name : '彬哥',bitrh: 2003, //出生日期//方法age: function () {//今年 - 出生的年var on = new Date().getFullYear();return on-this.bitrh}
}
this代表什么？拆开代码试试
function x () {//今年 - 出生的年var on = new Date().getFullYear();return on-this.bitrh
}
'use strict'//使用严格检查模式
var bubbles = {name : '彬哥',bitrh: 2003, //出生日期//方法age: x}
apply
在js中可以控制this指向！
function x () {//今年 - 出生的年var on = new Date().getFullYear();return on-this.bitrh
}
'use strict'//使用严格检查模式
var bubbles = {name : 'bubbles',bitrh: 2020, //出生日期//方法age: x}
var binge = {name : '彬哥',bitrh: 2003, //出生日期//方法age: x
}
x.apply(bubbles,[]) //this，指向对象参数为null
1.8、内部对象
标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'Date
基本使用
var date = new Date();//当前时间
date.getFullYear() //年
date.getMonth() //月 0~11 代表月
date.getDate() //日
date.getDay() //星期几
date.getHours() //时
date.getMinutes() //分
date.getSeconds() //秒
date.getTime() //时间戳，全世界统一
console.log(new Date(1650866500836))//通过时间戳，获取当前时间
转换
date.toLocaleString()
'2022/4/25 14:01:40'
date.toGMTString()
'Mon, 25 Apr 2022 06:01:40 GMT'JSON
json是什么
早期，所有数据传输习惯使用XML文件!
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式
对象都用{}
数组都用[]
所有键值对都是用key:value
var user = { //对象name :'binge',age:18,sex:'男'
}
//对象转化为json字符串，{name: 'binge', age: 18, sex: '男'}
var jsonuser = JSON.stringify(user)
var user = { //对象name :'binge',age:18,sex:'男'
}
//json字符串转化为对象参数为json字符串
var obj = JSON.parse('{"name":"binge","age":18,"sex":"男"}')
JSON和JS对象的区别
var obj = {a: 'hello',b:'hello'}
var json = '{"a"："hello","b":"hello"}'1.9、面向对象
原型对象
javascript..java.....面向对象，javascript有些区别！
类：模板 原型对象
对象：具体的实例
原型继承
var Student ={name:'xiaoming',age:18,run:function (){console.log(this.name+'在学习...')}
};
var bubbles = {name: '彬哥'
};
//泡泡的原型指向鸟(继承)
bubbles.__proto__ = Student;
function f(name) {this.name = name;
}
//给f新增一个方法
f.prototype.hello = function (){alert('hello')
};class继承
class关键字，是在ES6引入的
定义一个类，属性、方法
//ES6
class Class {//构造器constructor(name) {this.name = name;}hello(){alert('hello')}
}
var c1 = new Class('bubbles');
var c2 = new Class('彬哥');
继承
本质：查看对象原型
原型链
__proto__
2.0、BOM对象
浏览器介绍
JavaScript和浏览器关系？
JavaScript诞生就是为了能够让他在浏览器运行！
BOM：浏览器对象模型
- IE6~11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
window.alert('我是神') //弹窗显示
windew.innerHeight //内高
windew.innerwidth //内宽
window.outerHeight //外高
window.outerwidth //外宽Navigator（不建议使用）
Navigator封装了浏览器的信息
navigator.appName //名字
'Netscape' //网景浏览器
navigator.appVersion //当前浏览器的版本
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36 Edg/100.0.1185.50'
navigator.userAgent //用户代理
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36 Edg/100.0.1185.50'
navigator.platform //站台
'Win32'
...大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width //屏幕宽度
145px
screen.height //屏幕高度
376pxlocation
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/s?wd=q%27q&ie=utf-8&tn=54093922_22_hao_pg"
protocol: "https:"
reload: ƒ reload() //刷新网页//设置新的地址
location.assign('https://blog.csdn.net/BubblesMusic?type=blog')document
document代表当前的页面，HTML、DOM文档树
document.title
'百度一下，你就知道'
document.title = '彬哥一下，你就知道' //改名
'彬哥一下，你就知道'
获取具体文档树节点
- Java
- JavaScript
获取cookie
document.cookie劫持cookie原理
淘宝网 - 淘！我喜欢
恶意人员：获取你的cookie上传到的服务器，例如你打开两大购物网站淘宝和天猫，
通过手机号登录淘宝，天猫也自动登录了
服务器端可以设置cookie： httpOnly
history（不建议使用）
history，代表浏览器的历史记录
history.forward() //前进
history.back() //后退
2.1、操作DOM对象（重点）
浏览器网页就是一个DOM树形结构！
- 更新：更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个DOM节点，就必须要先获得这个DOM节点
获取DOM节点
DOM
我是帅哥
p1
p2
这是原生代码，之后都是用jQuery
更新节点
操作文本
au.innerText = '456' //修改文本的值
au.innerHTML = '34323' //可以解析HTML文本标签注意：会覆盖原先的数据
操作CSS
au.style.color = 'rgba(255,173,173,0.5)'
au.style.fontStyle = '20px'
au.style.padding = '2em'
...删除节点
删除节点步骤:先获取父节点，在通过父节点删除自己
我是帅哥
p2
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入DOM节点
我们获得了某个Dom节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM
追加
javascript
javase
javaee
javame
you.appendChild(js) //追加放置底部
创建一个新标签，实现插入
Title
javascript
javase
javaee
javame
Title
javascript
javase
javaee
javame
insertBefore
javascript
javase
javaee
javame
2.2、操作表单（验证）
表单是什么 form DOM 树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- ......
表单的目的：提交信息
获取要提交的信息
//得到输入框的值
username.value()
//修改输入框的值
username.value() = '123'单选框
girl_radio.value
'lu'
boy_radio.value
'nan'
单选框只能读取当前选中的值
单选框选中的值
girl_radio.checked
true
boy_radio.checked
false选中为true，没选中为false
指定赋值选中的值
girl_radio.checke = true
boy_radio.checked = true 
测试
表单
MD5
工具类
使用
//MD5算法
password.value = md5(password.value);提交表单，md5加密密码，表单优化
提交表单
2.3、jQuery
初始JQuery
JavaScript
JQuery库，里面存在大量的javascript函数
在线CDN JQuery（百度）
获取jquery，测试代码
初始JQuery
点我试试
JQuery选择器
js和jquery的对比
//原生js
//标签选择器
document.getElementsByTagName()
//类选择器
document.getElementsByClassName()
//id选择器
document.getElementById()//jquery
$('id').click() //标签选择器
$('.class').click() //类选择器
$('#id').click() //id选择器JQuery事件
jQuery事件
mouse：在这里移动鼠标试试
JQuery操作DOM元素
操作DOM
节点文本操作
$('#test-ui li[name=python]').text(); //获得值
'javascript'$('#test-ui li[name=python]').text('设置值'); //设置值$('#test-ui').html(); //获得值$('#test-ui').html('设置值'); //设置值css操作
$('#test-ui li[name=python]').css('color','red') //文字颜色
$('#test-ui li[name=python]').css('background','red') //背景颜色元素的显示和隐藏：本质display ： none；
$('#test-ui li[name=python]').show() //显示
$('#test-ui li[name=python]').hide() //隐藏本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！