JavaScript学习笔记

最新推荐文章于 2024-09-13 08:33:26 发布

「已注销」

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量351

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43641926/article/details/112150006

版权

这篇JavaScript学习笔记涵盖了从基础认识、语法特性到DOM操作和事件处理的全面内容。介绍了console控制台、模板字符串、变量、类型转换、数组、函数、对象的基本操作，以及BOM中的window、location、history、navigator对象。此外，详细讲解了DOM节点的访问、操作和事件绑定，包括点击事件、冒泡和委托。最后，讨论了网络请求的GET和POST方法。

摘要由CSDN通过智能技术生成

JavaScript学习笔记

https://www.yuque.com/docs/share/984f13cc-43aa-4462-90b3-47a975dbf80e?# 《JavaScript学习笔记》

认识JavaScript

JavaScript主要由三部分构成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）
书写位置与CSS相似，分为HTML内部和外部
- 内部：写在<body></body>内部的最后。<script></script>
- 外部：写在.js文件中，通过<script src=".js"></script>导入（导入语句位置同样在body末尾）

入门

console控制台

Js输出结果在控制台显示。console.log('输出的内容');

模板字符串

核心是反引号````和占位符${expression}

动态获取类名：

// 定义屏幕的宽度，当然这个宽度是根据window的api去获取的
let screen = 760;

// 判断屏幕是大屏还是小屏，这里我们认为大于760px的就是大屏
function isLargeScreen() {
  return screen > 800;
}

// 定义元素的排列方式，大屏row排列，小屏column排列
// 具体什么排列方式，是根据屏幕大小决定的
let item = {
  isCollapsed: screen > 800,
};

// 这里我们就要根据上面的信息来动态的获取类名（多个）
const classes = `header ${
  isLargeScreen() ? '' : `icon-${item.isColumn ? 'column' : 'row'}`
}`;

console.log(classes);

在Js代码中组装HTML代码：

let htmlCode = `
    <img src='' />
    ${
      true
        ? `<img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg' />`
        : `<img src='' />`
    }
`;
console.log(htmlCode);
// <img src='' />
//    <img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg' />

基础数据类型

变量

定义变量的关键字有两个：let、const
let声明变量时，不能重复声明同名变量
let定义的变量可以被多次重新赋值，const定义的变量只能赋值一次
let定义变量时可以不赋初值（输出"undefined"）；console定义变量要赋初值，否则会报错。

数值类型

常用数值类型包括整形、浮点数和NaN

类型转换/字符串拼接

字符串加数字，数字隐式转换为字符串；数字字符串与数字或数字字符串做非加法运算，字符串隐式转换为数字
强制类型转换：parseInt() parseFloat()

运算符

==比较时会做隐式类型转换（‘45’=45）===同时比较值和类型

布尔类型

true、false（大小写敏感）

数组

创建：let array = [...]; let array = new Array();
增。array.push(a, b, c);(从尾加) unshift()(从头加)
删。array.pop();(从末尾删除一个元素) array.shift();(从头删除一个元素)
splice(start, step, elem) 一个参数：删除指定位置至末尾所有元素；两个参数：删除指定位置开始指定长度的元素；三个元素：更改指定位置元素。
查。indexOf(elem)返回指定元素下标（未找到返回-1）[第二个参数：开始寻找位置]

for循环

for(i in array)(遍历数组下标) for (item in array)(遍历每个元素)

break/continue

while循环中，i++要在continue之前执行，否则会陷入死循环

函数

函数声明：function print(elem1, elem2 = "默认值"){}(参数数量是任意的，不会报错)
let timerId = setTimeout(func|code, delay); clearTimeout(timerId);
let timer = setInterval(func|code, delay); clearInterval(timer);

对象

基本操作

创建：

let person = {
  name: 'henry',
  age: 18,
  run: function() {
    console.log('running');
  }
}

person.run();

// 第一步：创建构造函数
function People(name, age) {
  this.name = name;
  this.age = age;
}

// 第二步：通过 new 创建对象实例
let person = new People('henry', 18);
console.log(person);

查看对象的所有属性：Object.keys(person)
删除对象的某个属性：delete person.name; 增加：person.gender: male;
判断对象自身是否拥有某个属性：person.hasOwnProperty('name');
JSON->Js对象const obj = JSON.parse(jsonStr); Js对象->JSONconst jsonStr2 = JSON.stringify(obj)；

Storage对象

Storage接口用于脚本在浏览器保存数据。两个对象部署了这个接口window.sessionStorage & window.localStorage.
数据存入：window.localStorage.setItem('key', 'value'); (存入的键值都为字符串，非字符串会自动转化。) （存储对象时，可用JSON.stringify()方法将Js对象转化为JSON字符串）
数据读取：window.localStorage.getItem('key');
清除缓存：window.localStorage.clear(); 可清除所有保存的数据

String对象

length方法，计算字符串长度
indexOf()方法，查找某个子字符串是否存在。返回下标，不存在返回-1
trim()方法，去掉字符串两端空格。不改变原字符串，返回处理后的字符串
substring(start, end) / substr(start, len)第二个参数省略时，截取至末尾。同trim不改变原字符串
split(分割符) 分割字符串，返回由分割出来的子字符串组成的数组

Array对象

join()方法，以指定参数作为分隔符将数组元素连接成一个字符串返回。若无参，默认用逗号。不改变原数组
reverse()方法，倒序排列。会改变原数组
sort()对数组排序，默认按字典顺序，可传入一个函数做参数自定义排序方式。会改变原数组
map(function(){})接受一个函数，将数组所有成员依次传入这个参数函数，把执行结果组成新数组返回

有三个参数：elem(传入的数组成员)，index(成员下标)，a(整个数组)

forEach()用法和map()基本一致，但无返回值

Date对象

无参返回当前时间。

// 传入表示“年月日时分秒”的数字
let dt1 = new Date(2020, 0, 6, 0, 0, 0);
console.log(dt1);

// 传入日期字符串
let dt2 = new Date('2020-1-6');
console.log(dt2);

// 传入距离国际标准时间的毫秒数
let dt3 = new Date(1578240000000);
console.log(dt3);

日期运算。两日期可直接相减，返回两者的毫秒之差
比较两时间早晚可直接用 > / <
Date.parse()用于解析日期字符串，返回该时间距时间零点(1970.1.1 00:00:00)的毫秒数

toJSON()转时间字符串获取/设置年月日等：get/set

       ![image.png](https://img-blog.csdnimg.cn/img_convert/fba7fd1e86fcc5a01e1433f07da50a6f.png#align=left&display=inline&height=305&margin=[object Object]&name=image.png&originHeight=305&originWidth=634&size=31562&status=done&style=none&width=634)

![image.png](https://img-blog.csdnimg.cn/img_convert/86b106fe9ee440858af40893f2dd217e.png#align=left&display=inline&height=654&margin=[object Object]&name=image.png&originHeight=654&originWidth=1046&size=287608&status=done&style=none&width=1046)

BOM

认识

BOM(Browser Object Model)浏览器对象模型，由一系列对象组成，和浏览器渲染有关
最重要的对象有：
- window：是整个网页的框架，每个网页的内容都装载在window中（每个网页唯一）
- navigator：存储浏览器相关信息（浏览器唯一）
- history：存储整个网页栈（网页唯一）
- screen：包含显示屏幕的信息，是硬件信息（电脑唯一）
- location：包含当前访问的地址（网址）信息（网页唯一）

window

window对象表示一个浏览器窗口或一个frame框架，它处于对象层次的最顶端，提供了处理浏览器窗口的方法和属性
window对象是浏览器对象中的默认对象，所以可以隐式的引用window的属性和方法，在浏览器环境中，添加到window对象中的方法，属性等，作用域都是全局的

location

常用属性：

![image.png](https://img-blog.csdnimg.cn/img_convert/45de1711647dfdadf39e03b40f803a00.png#align=left&display=inline&height=162&margin=[object Object]&name=image.png&originHeight=324&originWidth=1915&size=284829&status=done&style=none&width=957.5)

reload()方法。为防止无线快速循环，可配合定时器延时调用

history

存储在栈中
两个方法：back() 和forward()

navigator

window.navigator.userAgent：当前浏览器的用户代理

DOM

认识

DOM(Document Object Model),可以将Web页面与脚本或编程语言连接起来

访问DOM

document.querySelector('main .core .subtitle'); 查询第一个满足条件的节点
document.querySelectorAll('input'); 查询所有满足条件的节点

DOM属性

DOM类别。

let divDom = document.querySelector('div#test');
console.log(divDom.nodeType, divDom.nodeName, divDom.nodeValue);

// 获取DIV节点的第一个儿子节点，代表 '优课达' 这个字符串
let txtDom = divDom.firstChild;
console.log(txtDom.nodeType, txtDom.nodeName, txtDom.nodeValue);

// 获取DIV节点的id属性
let attDom = divDom.attributes.id;
console.log(attDom.nodeType, attDom.nodeName, attDom.nodeValue);

      ![image.png](https://img-blog.csdnimg.cn/img_convert/fbb1cd413876a85a18727cf6c23f95aa.png#align=left&display=inline&height=173&margin=[object Object]&name=image.png&originHeight=173&originWidth=640&size=16735&status=done&style=none&width=640)

DOM内容。

let divDom = document.querySelector('div#test');
console.log(divDom.outerHTML, divDom.innerHTML, divDom.innerText);

DOM亲属。

let divDom = document.querySelector('div#test');
console.log(divDom.firstChild, divDom.lastChild);
console.log('-----');
console.log(divDom.childNodes);
console.log('-----');
console.log(divDom.parentNode);

DOM样式。

const h1Dom = document.querySelector('h1');
console.log(h1Dom.classList);
console.log(h1Dom.style);
console.log(h1Dom.style.color);

DOM数据属性。
- HTML提供一种数据属性的标准，利用data-*允许我们在标准内于HTML元素中存储额外的信息

<article data-parts="3" data-words="1314" data-category="python"></article>

通过Js获取：

const article = document.querySelector('article');
console.log(article.dataset);

DOM操作

创建标签节点。const div = document.creatElement('div');

在这个节点内部添加纯文本内容。const txt = document.creatTextNode('优课达');
将文本添加到div中。div.appendChild(txt);
把div添加到body中。document.body.appendChild(div);

添加新节点。appendChild(newNode)(在所有儿子节点后)

inserBefore(newNode, referenceNode)(在目标节点前)

设置样式，属性。img.setAttribute('style', 'width: 100%; height: 100%;');

dom.style.color = 'xxxx';
classList能获取DOM所有类，可以把样式写成CSS，在此处只用添加或删除class

innerHTML。dom.innerHTML = txt;给某个元素添加内容

DOM事件

DOM绑定事件：addEventListener(eventName, callback)
常用事件：
- 焦点事件：
  - focus：表单组件（Input，Textarea，etc…）获取焦点事件
  - blur：表单组件（Input，Textarea，etc…）失去焦点事件
- 鼠标事件：
  - click：点击事件
  - dblclick：双击事件
  - mousedown：在元素上按下任意鼠标按钮
  - mouseenter：指针移到有事件监听的元素内
  - mouseleave：指针移出元素范围外（不冒泡）
  - mousemove：指针在元素内移动时持续触发
  - mouseover：指针移到有事件监听的元素或者它的子元素内
  - mouseout：指针移出元素，或者移到它的子元素上
  - mouseup：在元素上释放任意鼠标按键
- 键盘事件：
  - keydown：键盘按下事件
  - keyup：键盘释放事件
- 试图事件：
  - scroll：文档滚动事件
  - resize：窗口缩放事件
- 资源：
  - load：资源加载成功事件

点击事件

// 默认是未点击喜欢
let hasLike = false;

const likeBtn = document.querySelector('.like-btn');
const likeBtnRight = likeBtn.querySelector('.right');
likeBtn.addEventListener('click', function() {
  // 点击事件
  hasLike = !hasLike;
  if (hasLike) {
    likeBtn.classList.add('has-like');
    likeBtnRight.innerHTML = parseInt(likeBtnRight.innerText.trim()) + 1;
  } else {
    likeBtn.classList.remove('has-like');
    likeBtnRight.innerHTML = parseInt(likeBtnRight.innerText.trim()) - 1;
  }
});

let showMore = false;
const moreBtn = document.querySelector('.workspace-item-more .select');
const morePanel = document.querySelector('.workspace-item-more .options');
moreBtn.addEventListener('click', function() {
  showMore = !showMore;
  
  // 控制morePanel的显示和隐藏
  if (showMore) {
    morePanel.style.display = 'block';
  } else {
    morePanel.style.display = 'none';
  }
})

const imgArr = box.children;

冒泡、捕获、委托

冒泡：事件触发由当前元素到父元素直到根元素

阻止冒泡：当前元素添加e.stopPropagation()

捕获：从根节点依次移动到当前节点

addEventListener是在冒泡阶段监听，若想捕获阶段监听，需添加第三个参数true

委托：若想在大量子元素中单击任何一个都能运行一段代码，可将事件监听器设在父节点上（target表示真实响应事件的DOM节点）

box.addEventListener('click', function(e) {
  // 注意box区域比img大，如果点击在空白间隔区域，那么返回的节点将不会是IMG，需要特殊处理一下
  if (e.target.nodeName === 'IMG') {
    document.body.style.backgroundImage = `url(${e.target.src})`;
  }
});

移动事件

常用mouseover/mouseout

表单元素事件

input事件：只要value值修改就会触发
change事件：当用户提交对元素值的更改时触发

滚动事件

window.addEventListener('scroll', function () {
  // 可以通过clientHeight获取内容高度
  const height = document.body.clientHeight;

  // 通过screen.height获取浏览器的高度
  const screenHeight = window.screen.height;

  // 当距离底部的距离小于500时，触发页面新增内容
  if (height - window.scrollY - screenHeight < 500) {
  }
});

网络请求

API+GET请求

API(应用程序接口)。本质上就是一个URL，返回的内容统称为数据。fetch()方法调用API
fetch()返回结果是一个Promise对象。Promise是异步编程的一种解决方案。
fetch不指定类型时，默认发起GET请求

POST请求

提交数据至服务器端进行增加、修改、删除等操作，都是POST操作
通过body属性完成POST请求传参。利用body传递json数据时，需要在headers里加入contentType信息

// 把JSON数据序列化成字符串
const data = JSON.stringify({
  username: 'admin',
  password: '123456'
});

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',
  {
    method: 'POST',
    body: data,
    headers: {
      'content-type': 'application/json'
    }
  }
)
.then(function(response) {
  return response.json();
})
.then(function(myJson) {
  console.log(myJson);
});