JavaScript的学习笔记 学习B站上狂神的视频记录的笔记
1比较运算符
=
== console.log(1=='1') //true 判断的时候值相等，类型不同也是true
=== console.log(1==='1') //false 值相等且类型相同 才为true
2严格检查格式
<!--
前提：IDEA需要支持SE6语法
'use strict';严格执行模式；预防JavaScript的随意性导致产生的一些问题
必须要写在JavaScript的第一行；
局部变量建议使用let去定义
-->
<script>
'use strict';
let i= 100;
</script>
3数据类型
3.1.字符串
<script>
'use strict';
let i= 100;
console.log(i);
let name="小明";
console.log(`zheshi第一行
第二行
第三行`);
console.log(`你好 ，${name}`);//打印出 你好，小明
</script>
//String类型的不可变性，.length求长等多种方法
//大小写转换 toUpperCase()是方法，不是属性，上面求长是属性
//返回字符的下标位置
//字符串切片 左闭右开区间
3.2.数组
//数组可以包含任意类型，数组的内容可以修改，长度也可以修改（如果赋值较小，数据会丢失）
//indexof,通过元素获取下标索引 字符串"1"和数字1是不同的
//slice() 截取数组的一部分，返回一个新数组 这种方法类似于String里的substring()方法
//push() pop() 尾部压入和弹出元素
//unshift() shift 头部压入和弹出元素
//sort() 排序 / reverse() 反转 / concat() 字符串拼接返回一个新数组，并没有修改原有的数组 / 连接符 join()
//多维数组
3.3.对象
JS中{…}表示一个对象，键值对描述属性xxxx: xxxx， 多个属性之间使用逗号隔开，最后一个属性不加逗号
JS中的所有的键都是字符串，值是任意对象
var person={
name: "cuiqianqian崔倩倩",
age: 18,
sex: 女,
score: 100
}
// 对象赋值
//使用一个不存在的对象属性，不会报错！ undefined
// 动态的删减属性，通过delete删除对象的属性
// 判断属性值是否在这个对象中 xxx in xxx! 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
3.4.流程控制
// if判断
let age=10;
if(age>10) {
alert("hahah");
}
else if(age<20){
alert("hahahahha");
}
else alert("kuha");
// while循环
while(age<100){
age+=10;
console.log(age);
}
// for循环
for (let i = 0; i < 10; i++) {
console.log(i);
}
//forEach循环 是个函数
let arr = [12,123,12,12,4,3446,671,122,221,32];
arr.forEach(function (value){
console.log(value);
})
//for…in 循环 不知道数组的长度时可以使用这种循环方式
// 打印下标for in
for (let i in arr){
console.log(arr[i]);
}
// 打印具体的值 for of ,这种遍历也可以用于map和set集合
for (let num of arr){
console.log(num);
}
3.5.Map和Set ES6的新特性
var map = new Map([['tom',90],['jack',80],['amy',88]]);
var score = map.get('tom');// 通过key获得value
map.set('admin',100);// 向map中新增一个键值对(或者修改)
console.log(score);
map.delete('admin');//删除
set：无序不重复的集合
let set = new Set([3,1,1,1]);//set具有去重的作用
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//判断值是否存在,有返回true
3.6 iterator ES6新特性
遍历数组
遍历Map
遍历Set
4.函数及面向对象
4.1函数定义
//函数的定义
//推荐使用这种方式 绝对值函数定义一
function abs1(x){
if(x>=0) return x;
else return -x;
}
//匿名函数，没有函数名，但是可以把结果赋值给abs 绝对值函数定义二
let abs2 = function (x){
if(x>=0) return x;
else return -x;
}
// 函数的调用
abs1(10);//10
abs1(-10);// 10
// 参数问题：JS可以传任意个参数
1. 不传递参数 需要手动抛出异常
function abs1(x){
if( typeof x!== 'number'){
//手动这里抛出异常
throw 'Not a Number';
}
if(x>=0) return x;
else return -x;
}
2. 传递多个参数 arguments
arguments是一个JS免费赠送的关键字，代表传递进来的所有的参数，是一个数组。它接收了所有的参数
function abs1(x){
console.log("x=>"+x);//输出
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0) return x;
else return -x;
}
3. 传递多个参数 rest
问题：arguments包含输入的所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数
解决：rest ES6新特性，获取除了已经定义的参数之外的所有参数，rest参数只能写在最后面，使用…rest
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
4.2 变量作用域
在JS中，var定义的变量实际是有作用域的
1.假设在函数体中声明，则在函数体外不可用 （非要实现的话，可使用闭包）
2.如果两个函数使用了相同的变量名，在函数内部不会发生冲突
3.内部函数可以使用外部函数的变量，反之，则不可以、
'use strict';
function aaa(){
let x = 1;
function bbb(){
let y = x+1;
console.log("y=>"+y);
}
console.log("x=>"+x);
bbb();
let z = y+1;
console.log("z=>"+z);
}
aaa();
4.内部函数和外部函数的变量重名 ，就近原则
'use strict';
function aaa(){
let x = 1;
function bbb(){
let x = 'A';
console.log("inner x=>"+x);
}
console.log("outer x=>"+x);
bbb();
}
aaa();
5. 全局对象window
var x='xxx';
alert(x);//window.alert(x)效果一致
//alert()这个函数本身也是一个window变量（用变量表示一个函数 函数定义的第二种方式）
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
var x='123';//定义全局变量
var old_alert=window.alert;
old_alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
window.alert = function (){
}
window.alert(123);//这里就失效了，前面手动定义了全局函数
window.alert=old_alert;//这里恢复
window.alert(1234);
JS实际上只有一个全局作用域，任何变量（函数也可视为变量），如果没有在函数作用范围内找到，就会向外查找，直到在window下都没有找到，会报ReferenceError错误,解决就是规范
JS规范
问题：由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突---->如何减少冲突？
解决：把自己的代码全部放入自定义的唯一空间名字中，减低全局命名冲突问题
// 唯一的全局变量
var AppWindow={};
// 定义全局变量(函数也是变量)
AppWindow.name='xiaoming';
AppWindow.x=100;
AppWindow.add=function (a,b){
return a+b;
}
局部作用域let ES6新特性
定义局部变量的时候用let而不是var,使用var定义会造成冲突
常量const ES6新特性
在ES6之前，定义常量是按照约定，用大写字母表示的变量就是常量，其数值可以修改，但按照约定是常量
ES6引入了常量关键字const,其修饰的变量的值不可以修改了
4.3 方法
1.定义方法：方法就是把函数放在对象的里面，对象只有两个东西：属性和方法，类似于Java的类
var person = {
name: 'Xia Ming',
birth: 2000,
age: function (){
var now = new Date().getFullYear()-this.birth;
return now;
}
}
alert(person.age());
//属性
person.name
//方法
person.age(); //调用方法的时候一定要带上括号
this.代表的什么？ 拆开上面的代码：
function getAge() {
var now = new Date().getFullYear();
return now-this.birth;
}
var person = {
name: 'Xia Ming',
birth: 2000,
age: getAge
}
getAge()调用返回的是NaN ,是在window下找birth变量。this是默认指向调用它的那个对象的
apply这在JS中可以控制this的指向
function getAge() {
var now = new Date().getFullYear();
return now-this.birth;
}
var person = {
name: 'Xia Ming',
birth: 2000,
age: getAge
};
let a=getAge.apply(person,[]);//第一个参数指定this所指的对象，第二个参数表示参数为空
alert(a);
5常用内部对象
标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.1Date
now.getFullYear();//年
2022
now.getMonth();//月 0-11
3
now.getDate();//日
18
now.getDay();//星期几
1
now.getHours();//时
15
now.getSeconds();//分
41
now.getMinutes();//秒
24
now.getTime();//获取时间戳
1650266681021
console.log(new Date(1650266562840));//将时间戳换为时间格式
Mon Apr 18 2022 15:22:42 GMT+0800 (中国标准时间)
now.toLocaleString();//获取当地时间
'2022/4/18 15:24:41'
5.2JSON
在JS中一切皆为对象。任何js支持的类型都可以用JSON表示 number,string…
对象用{}，数组用[],所有的键值对用key:value
//JSON字符串和JS对象的转化
var user = {
name:"xiaoming",
age: 10,
sex: "男"
}
//将对象转为json字符串
var jsonUser = JSON.stringify(user);
//将json转为对象 参数为json字符串
var obj = JSON.parse('{"name":"xiaoming","age":10,"sex":"男"}');
JSON字符串和JS对象的区别
var obj = {name:"xiaoming",age:10,sex:"男"};
var obj = '{"name":"xiaoming","age":10,"sex":"男"}'; //json 是一个字符串，键值对的形式存在
6面向对象编程
Java中 类：模板 对象： 具体的实例
在JS中使用原型
var student = {
name: "学生",
age: 10,
run: function (){
return this.name+'run...';
}
};
var xiaoming = {
name : 'xiaoming'
};
xiaoming.__proto__ = student;//类似于小明继承了student，也有了相应的run()方法
xiaoming.run()
'xiaomingrun...'
class继承 新特性
//定义类 有属性和方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}//类
var xiaoming = new Student('xiaoming');//实例对象
继承
//定义一个类 属性和方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super();
this.grade=grade;
}
myGrade(){
alert("我是一个小学生");
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new xiaoStudent('xiaohong',100);
7操作Bom对象（重点）
Bom，B是浏览器 JS就是为了在浏览器中运行 BOM：浏览器对象模型
window
window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
922
window.outerHeight
833
window.outerWidth
936
window.outerHeight
739
window.outerWidth
936
window.outerWidth//调整浏览器窗口后值也会发生相应的变化
828
screen 屏幕尺寸
screen.width
1536
screen.height
864
location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ? reload()//刷新网页
location.assign('https://www.bilibili.com/') //跳转
docunment 代表当前的页面 HTML DOM 文档树
document.title
'百度一下，你就知道'
document.title='123' //修改网页的title
'123'
//获取具体的文档树节点，可以获取html代码
<dl id="app">
<dt>java</dt>
<dd>javaEE</dd>
<dd>javaSE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
//获取cookie
document.cookie
'BIDUPSID=AF36C1E8BCD0A82A8073F875C603BA43; PSTM=1631490623; BD_UPN=12314753;
//劫持cookie
/*
就是别的网站通过一些js代码获取用户的cookie信息，并上传到自己的服务器上进行操作
*/
history 代表浏览器的历史记录
history.back() //回退
history.forword()//前进
8操作DOM对象（重点）
DOM 文档对象模型
核心
浏览器网页就是一个DOM属性结构
更新节点： style样式的更新
遍历DOM节点
删除DOM节点
添加DOM节点
要操作就要先获得节点
//1、获取节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1=document.getElementsByTagName('h1');//通过标签获取
var p1=document.getElementById('p1');//通过id获取
var p2=document.getElementsByClassName('p2')//通过class获取
var father=document.getElementById('father');//通过id获取
var childrens=father.children;//获取父节点下的所有子节点
father.firstChild
father.lastChild
//2、更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');//通过id获取节点
id1.innerText='123';//修改文本的值
id1.innerHTML='<strong>123</strong>';//修改解析文本标签
</script>
//更新节点的样式
id1.style.color='red'//修改颜色
'red'
id1.style.fontSize='40px'//修改字体大小
'40px'
id1.style.padding='20px'//修改padding
'20px'
</script>
//3、删除节点
//先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElementById('p1');//通过id获取
var father=self.parentElement;//通过自己找父亲
father.removeChild(self);//通过父节点删除自己
</script>
//删除节点的时候是动态的，每次都是0开始
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
//4、插入节点
<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');
list.appendChild(js);//将已经存在js追加到了list中
//通过js创建一个新的节点
var newP=document.createElement('p');//创建一个p标签
newP.id='newP';
newP.innerText='hello';
list.appendChild(newP);//将已经存在js追加到了list中
</script>
9操作表单（验证）
表单是什么？form DOM树
文本框text
下拉框< select >
单选框radio
多选框checkbox
隐藏域hidden
密码框password
获得要提交的信息
<form method="post">
<span>用户名:</span>
<input type="text" id="username">
<span>性别:</span>
<input type="radio" name="sex" id="man" value="man">男
<input type="radio" name="sex" id="woman" value="woman">女
</form>
<script>
var input_text=document.getElementById('username');
var man_radio=document.getElementById('man');
var woman_radio=document.getElementById('woman');
//input_text.value 得到输入框的值
woman_radio.checked//判断是否选中
false
woman_radio.checked=true//选中
true
提交表单 加密密码
链接https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
οnsubmit=绑定一个提交检测的函数 ，true false
将这个结果返回给表单 使用onsubmit接收
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<span>用户名:</span>
<input type="text" id="username" name="username"></br>
<span>密码:</span>
<input type="password" id="input_password"></br>
<input type="hidden" id="md5_password" name="password">
<button type="submit">提交</button>
</form>
<script>
function aaa()
{
var pwd=document.getElementById('input_password');
var md5pwd=document.getElementById('md5_password');
md5pwd.value=md5(pwd.value);
return true;
}
</script>
10.jQuery 其参考链接 http://jquery.cuishifeng.cn/
**$(selector).action() **
jQuery选择器
document.getElementsByTagNameNS();//标签
document.getElementById();//id
document.getElementsByClassName();//类
$('p').click();//标签
$('#id').click();//id
$('.class').click();//类
//css中的选择器它全部都能用
//http://jquery.cuishifeng.cn/
jQuery事件
<!--要求：获取鼠标当前的一个坐标-->
<p id="mouse"></p>
<div id="divMove">
</div>
<script>
//当网页元素加载完毕之后 ，响应事件
$(function (){
$('#divMove').mousemove(function (e){
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
jquery操作DOM元素
<ul id="test_ul">
<li class="js">java</li>
<li name="python">Python</li>
</ul>
<script>
//操作节点文本
$('#test_ul li[name="python"]').text();//取得Python
$('#test_ul li[name="python"]').text('123');//设置值为123
$('#test_ul li[name="python"]').html();//取得html
$('#test_ul li[name="python"]').html('<strong>1234</strong>');//设置值为加粗的1234
//操作css
$('#test_ul li[name="python"]').css({ "color": "#ff0011", "background": "blue" });//键值对形式进行样式修改
//显示和隐藏文本
$('#test_ul li[name="python"]').hide();//隐藏
$('#test_ul li[name="python"]').show();//显示
</script>
小技巧：
前端网站的样式可以通过修改别人的网页，删除不必要的js和不需要的div，得到一个静态的页面
element https://element.eleme.cn/#/zh-CN
ant design https://ant.design/index-cn
