JavaScript学习笔记

最新推荐文章于 2024-01-29 21:40:16 发布
最新推荐文章于 2024-01-29 21:40:16 发布
阅读量300 收藏
点赞数
分类专栏： 我的小成就 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sao_e/article/details/113112239
版权

零零散散的学习笔记~

JavaScript就是一种专为与网页交互而设计的脚本语言

  • <script>标签放在html的底部
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 正常的html标签一定要写在script标签的前面 -->
    <div></div>
    <!-- 在body标签的内部并在末尾 -->
    <script src='index.js'></script>

  </body>
</html>
  • 相等()和全等(===)
 let number1 = 45;
let number2 = 45;
console.log(number1 == number2); // true

let number1 = 45;
let number2 = 45;
console.log(number1 === number2); // true

let number1 = '45';
let number2 = 45;
console.log(number1 == number2); // true``，在这里做比较的时候会首先将'45'转换为 45,然后再去跟number2比较

let number1 = '45';
let number2 = 45;
console.log(number1 === number2); // false

所以由于相等错在类型转换问题,为了保持代码中数据类型的完整性,推荐使用全等

  • 不等于为（!==）
  • switch case
let weather = 'rain';

switch (weather) {
  case 'snow':
    console.log('堆雪人');
    break;
  case 'windy':
    console.log('呆在家里');
    break;
  case 'rain':
    console.log('雨中漫步');
    break;
  default:
    console.log('工作');
    break;
}
  • 数组的插删改查
    push方法在数组尾部加入，pop方法在尾部删除
    unshift方法在数组头部加入，shift方法在头部删除
    splice方法删除指定位置的值，可以传入一个或者两个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

// 删除从下标为1的位置到结束位置的值
let deleteSchools = schools.splice(1);
// 删除之后，原数组中的剩余内容
console.log(schools); // ["清华大学"]
// 删除的内容
console.log(deleteSchools); // ["北京大学", "浙江大学", "同济大学"]
······································································
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
// 从下标为0开始,往后数两个元素,删除
let deleteSchools = schools.splice(0, 2);
console.log(schools); // ['浙江大学', '同济大学']
console.log(deleteSchools); // ['清华大学', '北京大学']

splice 方法(需改指定位置的元素)

splice方法括号里需要添加三个值(也叫参数).分别代表三个意思,先来解释一下这三个值：

  1. 第一个值,整数类型,表示起始位置
  2. 第二个值,整数类型,表示步长(往后选几个元素,1 代表往后选 1 个元素)
  3. 第三个参数,要替换的数组的值
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 0, '江西理工大学');
console.log(schools); //  ["清华大学", "北京大学", "江西理工大学", "浙江大学", "同济大学"]

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 1, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学", "同济大学"]

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 2, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学"]

indexOf方法查找数组中是否含有某个元素，返回-1表示没找到，返回其他值为元素下标

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

let result = schools.indexOf('浙江大学');
console.log(result); // 2 表示“浙江大学”所在的下标为2

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

let result = schools.indexOf('浙江大学', 3);
console.log(result); // -1
  • for…in 和 for…of 的写法
let peppaFamily = ['佩奇', '乔治', '猪妈妈','猪爸爸'];

for(let i in peppaFamily) {
  console.log(peppaFamily[i]);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸

for…in 循环会访问数组中的每一项，这里的 i 对应数组中每一项的下标。

let peppaFamily = ['佩奇', '乔治', '猪妈妈','猪爸爸'];

for(let item of peppaFamily) {
  console.log(item);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸

for…of 循环也会访问数组中的每一项，这里的 item 对应数组中每一项。

两者的区别：for…in 循环遍历的结果是数组元素的下标，而 for…of 遍历的结果是元素的值。

  • 调用函数时
// 参数 figure(位数) txt(文本) 
function code(figure, txt) {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6, "六位随机数：", "第三个参数");

结果并不会受到影响，这是因为 JavaScript 允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题。这一点和 Java 有区别，在 JavaScript 中这样是不会报错的。

// 参数 figure(位数) txt(文本) 
function code(figure, txt) {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6);

打印结果：undefined 556540

如果传入的数据比定义的参数少也不会因为数量不匹配而报错
因为对应的参数 txt 未传入数据，所以在函数中其值为 undefined。

此时可以通过设定默认值防止参数缺失

// 参数 figure(位数) txt(文本) 
function code(figure, txt = "随机数：") {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6);

这里注意写法，是用等号 = 给参数赋默认值的。

  • setTimeOut三种写法
 - console.log(1);

/**
 * 第一个参数是代码，注意代码需用引号包裹，否则会立即执行代码
 * 第二个参数是 1000，即 1000ms 后执行 console.log(2)
 */
setTimeout('console.log(2)', 1000);

/**
 * 第一个参数是匿名函数
 * 第二个参数是 2000，即 2s 后执行 console.log(3)
 */
setTimeout(function () {
  console.log(3);
}, 2000);

// 第一个参数是函数名，注意函数名后不要加小括号“()”，否则会立即执行 print4
setTimeout(print4, 3000);

console.log(5);

function print4() {
  console.log(4);
}

// 立即执行
console.log(1);
// 立即执行
console.log(5);
// 1s 后执行
console.log(2);
// 2s 后执行
console.log(3);
// 3s 后执行
print4(); // 即：console.log(4)

60s计时器

// 首先定义计时总秒数，单位 s
let i = 60;

// 定义变量用来储存定时器的编号
let timerId;

// 写一个函数，这个函数即每次要执行的代码，能够完成上述的 1、2、3
function count() {
  console.log(i);
  i--;
  if (i > 0) {
    timerId = setTimeout(count, 1000);
  } else {
    // 清除计时器
    clearTimeout(timerId);
  }
}

// 首次调用该函数，开始第一次计时
count();

let i = 60;
print();
let timer = setInterval(print, 1000);

function print() {
  console.log(i);
  i--;
  if (i < 1) {
    clearInterval(timer);
  }
}
  • 对象
    对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。
let person = {
  name: 'henry',
  age: 18
}

在这里插入图片描述
对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型，当它是函数的时候，我们把这个属性称为“方法”，它可以像函数那样调用：

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

person.run();

查看一个对象本身的所有属性，可以使用Object.keys方法：

let person = {
  name: 'henry',
  age: 18
}

console.log(Object.keys(person));

如果要删除对象中的某个属性，可以使用 delete 命令：

let person = {
  name: 'henry',
  age: 18
}

delete person.name;

console.log(person);

增加则直接：

let person = {
  name: 'henry',
  age: 18
}

person.gender = 'male';
  • JSON和JavaScript的转换：
    1、JSON.parse()：JSON 格式 => JavaScript 对象
// 一个 JSON 字符串
const jsonStr =
  '{"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]}';

// 转成 JavaScript 对象
const obj = JSON.parse(jsonStr);

2、JSON.stringify()：JavaScript 对象 => JSON 格式

const jsonStr2 = JSON.stringify(obj)；
  • Map
    在这里插入图片描述
  • Math对象
    Math对象的静态属性，提供以下一些数学常数：
Math.E // 常数e。
Math.LN2 // 2 的自然对数。
Math.LN10 // 10 的自然对数。
Math.LOG2E // 以 2 为底的e的对数。
Math.LOG10E // 以 10 为底的e的对数。
Math.PI // 常数π。
Math.SQRT1_2 // 0.5 的平方根。
Math.SQRT2 // 2 的平方根。

Math对象提供以下一些静态方法：

Math.abs() // 绝对值
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入取整
Math.max() // 最大值
Math.min() // 最小值
Math.pow() // 指数运算
Math.sqrt() // 平方根
Math.log() // 自然对数
Math.exp() // e的指数
Math.random() // 随机数

Math.ceil(4.6) // 向上取整，取大于等于 x，并且与它最接近的整数。//5
Math.floor(4.6) // 向下取整，取小于等于 x，并且与它最接近的整数。//4
Math.round(4.6) // 四舍五入取整，取与 x 最接近的整数。//5
  • Storage对象
    1）Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage 和 window.localStorage。
    2）sessionStorage 保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
    3）window.localStorage.setItem(‘key’, ‘value’) 方法接受两个参数：
    key：键名；
    value：键值
    注意，如果要存入的数据不是字符串类型的数据，最好先转换成字符串类型，比如要存入一个对象，可以这么写：
const obj = {
  name: 'henry',
  age: 18
}
const value = JSON.stringify(obj);
window.localStorage.setItem('myLocalStorage', value);

4）读取数据：getItem

window.localStorage.getItem('myLocalStorage');

5）清除缓存：clear
“”"""""""""""""""""""""""""""""""""""""""""""""""""""""""""

关于字符串的几个基础用法：

在这里插入图片描述

  • 关于数组的几个基础用法：
    在这里插入图片描述
let arr = [
  { name: 'jenny', age: 18 },
  { name: 'tom', age: 10 },
  { name: 'mary', age: 40 }
];

arr.sort(function(a, b) {
  return a.age - b.age;
});

console.log(arr);

let arr = [
  { name: 'jenny', age: 18 },
  { name: 'tom', age: 10 },
  { name: 'mary', age: 40 }
];

// elem: 数组成员
// index: 成员下标
// a: 整个数组
const handledArr = arr.map(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(arr);
console.log(handledArr);

const handledArr = arr.forEach(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(handledArr);
  • Date对象的toJSON方法
 let dt = new Date();
let dtStr = dt.toJSON();

console.log(dtStr);
  • Date对象的get方法
let dt = new Date();
dt.getTime(); // 返回实例距离1970年1月1日00:00:00的毫秒数。
dt.getDate(); // 返回实例对象对应每个月的几号（从1开始）。
dt.getDay(); // 返回星期几，星期日为0，星期一为1，以此类推。
dt.getFullYear(); // 返回四位的年份。
dt.getMonth(); // 返回月份（0表示1月，11表示12月）。
dt.getHours(); // 返回小时（0-23）。
dt.getMilliseconds(); // 返回毫秒（0-999）。
dt.getMinutes(); // 返回分钟（0-59）。
dt.getSeconds(); // 返回秒（0-59）。

在这里插入图片描述

和浏览器渲染有关的对象，我们叫做浏览器对象模型（Browser Object Model） — BOM。

在这里插入图片描述
在这里插入图片描述

  • DOM
    文档对象模型，Document Object Model 一般我们简称为 DOM。

在这里插入图片描述

  • DOM树
    在这里插入图片描述

在这里插入图片描述

  • 选择器查询方法 — querySelector()
document.querySelector('main .core .subtitle');
  • 选择器全量查询—querySelectorAll()
document.querySelectorAll('input');
  • 其他筛选方法
    在这里插入图片描述
  • DOM操作
  1. 创建标签节点
document.createElement(tagName)
document.createTextNode(string)
  1. 添加新节点
appendChild(newNode)
inserBefore(newNode， referenceNode)

inserBefore()方法和appendChild()刚好相反，appendChild是在所有儿子节点之后添加，inserBefore是在某个目标儿子节点之前添加。

  1. 设置样式、属性
img.setAttribute('style', 'width: 100%; height: 100%;');
//也可以
dom.style.color = 'xxxx';

setAttribute()不仅仅可以设置style之外，所有 HTML 属性都能用他设置，比如id, src, type, disabled, etc…

DOM 可以通过 addEventListener(eventName, callback)绑定eventName事件，这是现在官方认定的绑定操作。

// 监听Input输入事件
dom.addEventListener('input', function () {});

// 监听鼠标放置，移动事件
dom.addEventListener('mouseover', function () {});

// etc...
  • DOM事件

在这里插入图片描述
监听 DOM 事件，使用 DOM 操作，修改 DOM 属性

  • 阻止冒泡
 // ......省略
likeBtn.addEventListener('click', function(e) {
  // 点击事件
  e.stopPropagation()
// ......省略
  • 捕获
    在这里插入图片描述
  • 委托
    在这里插入图片描述
  • 鼠标移动事件
    在这里插入图片描述
  • 表单元素事件
    1、焦点事件
    获取焦点和失去焦点两个事件 — focus 和 blur
    2、内容值变化
    对于表单元素，有两种事件可以监听元素内容变化 — input 和 change。
    在这里插入图片描述
  • 滚动事件
    滚动事件，事件名称为 — scroll。
  • 用fetch实现API的调用（get请求）
fetch('https://api6.ipify.org?format=json')
.then(function(response) {
  return response.json();
})
.then(function(myJson) {
  console.log(myJson);
})
  • fetch发起POST请求（加一个参数method）
// 把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);
  });
Sao_E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
javaScript学习笔记
最新发布
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
javascript基础笔记(一)
码农1425的博客
10-28 314
1、数据类型转换       1、什么是数据类型转换          不同类型的数据之间在做运算的时候，会发生的类型的转换。       2、数据类型转换分类          1、隐式转换    自动完成    string 类型参与运算时，其他数据类型都会转换成string类型    注意：如果string类型中的数据是数字类型，那么所做的-，*，/，%全部都是数据运算
面试题
Gytha_1的博客
10-18 510
1. setTimeout()相关知识 上题，涉及到的知识点：函数的执行顺序、闭包、块级作用域等。 for (var i = 1; i &lt;= 5; i++) { setTimeout( function timer() { console.log(i); }, i * 1000 ); } //输出5个数字6，要求改动上述代码，使其依次输出1、2、3、4、5 在我们...
内置对象——Array
weixin_43117402的博客
03-16 82
连接数组：join() join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔： let arr = [1, 2, 3, 4]; arr.join(' ') // '1 2 3 4' arr.join(' | ') // "1 | 2 | 3 | 4" arr.join() // "1,2,3,4" 这个方法和字符串里的 split 方法正好是...
javascript 学习笔记
Katios
05-25 7206
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
Javascript入门学习笔记
weixin_61370021的博客
04-27 4564
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5171
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
JavaScript学习笔记（持续更新）
m0_46527956的博客
04-17 719
JavaScript学习笔记（持续更新）JavaScript1. 什么是JavaScript1.1 概述2. 快速入门2.1 引入JavaScript2.2 基本语法2.2.1 定义变量2.2.2 条件控制2.3 数据类型2.3.1 number2.3.2 字符串2.3.3 布尔值2.3.4 null和undefiend2.3.5 数组2.3.6 对象2.3.7 严格检查格式的使用2.3.8 字符串 JavaScript 1. 什么是JavaScript 1.1 概述 ECMAScript可以理解为是Jav
java爬取网易云热评并制作词云。
Sao_E的博客
04-16 2014
IT小白终于脱离hello world,实现用java爬取网易云热评并制作词云，激动激动激动。一、自我介绍二、上代码1、封装各个model类2、实现各项功能的service类3、设计一个制作词云的工具类util4、最后测试类三、总结 假期被游戏缠绕无法自拔？或是被淡黄的长裙蓬松的头发洗脑？是否因为假期太长而闲着不知道干嘛呢，还不来敲代码！用java一起来爬个虫？ 一、自我介绍 南京某高校大学生，今年寒假因为疫情，假期无限延长aaa，自己在家也不知道学点什么，有一段时间很迷茫，后来因为机缘巧合，碰到了一些it
通过虚拟机安装centos系统，搭建nginx服务器，实现正向代理和反向代理
Sao_E的博客
01-13 1521
通过虚拟机安装centos系统，搭建nginx服务器，实现正向代理和反向代理
Python实现简单的区块链，实现共识算法、Merkle Tree（默克尔树）、冲突解决、添加交易等功能
Sao_E的博客
08-08 1406
Python实现简单的区块链，实现简单挖矿、共识算法、Merkle Tree（默克尔树）、冲突解决、添加交易、挖矿奖励等功能
【基于宝塔面板和wordpress一键部署搭建自己的个人网站】通过阿里云服务器，搭建自己的网站
Sao_E的博客
01-29 1242
【搭建个人网站】用服务器做有趣的事，你值得拥有！通过宝塔面板和wordpress，一键部署搭建自己的个人网站
【Fabric环境搭建，复制粘贴即可实现】Fabric网络搭建保姆级教程，亲测速通安装
Sao_E的博客
01-29 1173
【Fabric环境搭建，复制粘贴即可实现】Fabric网络搭建保姆级教程，一路复制粘贴即可完成
运用爬虫和neo4j数据库制作体育人物图谱（demo）
Sao_E的博客
10-04 1168
运用爬虫和neo4j数据库制作体育人物图谱（demo） 总体思路：从虎扑网站爬取体育人物列表，再通过人物列表去百度百科爬取人物关系列表，将两个文件都以csv格式保存，导入neo4j数据库制成人物图谱。 其中爬虫筛选数据用的是xpath 1. 爬取数据 爬取体育人物列表 通过虎扑网站爬取体育人物，网址 导入的类以及UA的设置： from lxml import etree import requests import time import csv headers = { 'User-Agent
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值