JS笔记
关注
分享
扫一扫
js基础······
夏大爷耶耶耶
花开生两面
人生佛魔间
展开
-
eval()方法字符串转对象； 分别取对象属性名和属性的方法
字符串转对象；分别取对象属性名和属性的方法；数组转字符串原创 2022-12-02 14:34:12 · 621 阅读 · 0 评论 -
数组去重方法（Array.from方法、数组includes属性、filter方法）
Array.from、扩展运算符...、includes属性、filter方法原创 2022-05-20 14:48:58 · 451 阅读 · 0 评论 -
for、for···in、for···of、forEach、map遍历循环
JS中有三种基本循环for、while、do···while见之前的笔记👇JS 循环小结_慢谷的博客-优快云博客for一般只用于循环遍历数组for···infor···offor···of是Es6新增的循环方法。遍历数组的每一项。forEach()forEach方法遍历数组，第一个参数遍历数组的值，第二个参数对应数组索引值，第三个参数是数组本身。...原创 2022-05-20 11:41:19 · 206 阅读 · 0 评论 -
ES6 Promise详解
Promise是JS中进行异步编程的新解决方案。从语法上来说：Promise是一个构造函数从功能上来说：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）promise支持链式调用，可以解决回调地狱问题回调地狱：回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行的条件。不便于阅读，不便于异常处理。...原创 2022-05-20 10:03:17 · 7822 阅读 · 0 评论 -
es6 let、const、解构赋值、模板字符串、Promise
let、constES6开始有块级作用域，let、const都在块级作用域里起作用。（块级作用域必须有大括号！）let用法与var类似，但是所声明的变量，只在let命令所在的代码块内有效。代码外调用let会报错。let不存在变量提升，一定要先声明再使用变量，否则报错。let不允许在相同作用域内，重复声明同一个变量。const声明一个只读的常量（简单类型数据等同于常量，值保存在变量指向的那个内存地址。复合数据是指向实际数据的指针）。一旦声明，常量的值就不能改变。const只声明不赋原创 2022-03-10 17:27:05 · 2065 阅读 · 0 评论 -
JS 基础之正则
正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规范获取将字符串中符合规则的内容提取出来var reg = new RegExp("a","i"); //忽略大小写找a(A)[]里的内容也是或的关系[ab] == a|b...原创 2022-01-28 20:05:25 · 1483 阅读 · 0 评论 -
JS 原型prototype
每个函数都有一个原型(prototype)属性，这个属性对应着一个对象，即原型对象。每个函数都有自己的原型????如果函数作为普通函数调用prototype没有任何作用当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象我们可以将对象中共有的内容统一设置到原型对象中当我们访问对象的一个属...原创 2022-01-27 19:48:00 · 1468 阅读 · 4 评论 -
JavaScript JSON
JSON是存储和传输数据的格式。JSON.stringfy()、toJSON()、JSON.parse()。补充：encodeURIComponent() 加码；decodeURIComponent() 解码原创 2022-01-07 21:10:40 · 359 阅读 · 0 评论 -
JS 箭头函数(ES6新增)
Arrow Function删掉function关键字和函数名，使用=>连接参数体箭头函数相当于匿名函数对于箭头函数，this关键字始终表示定义箭头函数的对象原创 2022-01-07 20:47:35 · 594 阅读 · 0 评论 -
JS Es6新增Class类（constructor()生成实例和extends继承）
ES6引入JavaScript类。JavaScript类是JavaScript对象的模板。语法：使用关键字class创建类。添加名为constructor() 的方法：语法：class ClassName {constructor() { ... } }实例↓class Car {constructor(name, year) { this.name = name; this.year = year;......原创 2022-01-07 20:44:27 · 730 阅读 · 0 评论 -
JS 数组方法大全（基础重点）含详细案例
原创 2022-01-05 20:14:43 · 300 阅读 · 0 评论 -
JS 字符串方法（基础重点）
原创 2021-12-27 15:40:39 · 233 阅读 · 0 评论 -
(JS案例)获取鼠标在盒子内的坐标；拖动模态框；放大镜效果
1.offset系列获取鼠标在盒子内的坐标<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 300px; height: 300px; background-color: #FFC0CB; margin: auto;原创 2021-12-22 14:16:13 · 632 阅读 · 0 评论 -
JS call、apply、bind方法
三个函数都是改变this指向的方法，用于将另一个对象作为参数调用对象方法。call() ????apply() ????apply和call基本一致，唯一区别传参方式，参数是数组形式bind() ????bind语法和call一模一样，区别在于立即执行还是等待执行call、apply、bind的巧妙用法1.求数组的最大项和最小项2.求和函数...原创 2021-12-22 14:08:56 · 204 阅读 · 0 评论 -
JS 多分支switch语句
switch准换、开关的意思case小例子或者选项的意思switch语法结构：switch(表达式){ case value1: 执行语句1; break; default: 执行最后的语句;}<!DOCTYPE html><html> <head> <meta charset="utf-8">...原创 2021-12-20 14:09:27 · 424 阅读 · 0 评论 -
JS 循环小结
for循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-12-15 17:21:38 · 1102 阅读 · 0 评论 -
元素offset、client、scroll三大系列总结
它们的主要用法：1.offset系列经常用于获得元素位置 offset offsetTop2.client系列经常用于获取元素大小clientWidth clientHeight3.scroll系列经常用于获取流动距离scrollTop scrollLeft注意：页面滚动的距离是通过window.pageXOffset获得...原创 2021-11-15 15:30:19 · 227 阅读 · 0 评论 -
元素scroll系列属性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 20px; .原创 2021-11-15 15:22:39 · 761 阅读 · 0 评论 -
元素可视区client系列+立即函数
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: #FFC0CB; border: #00FFFF 1px solid; pa.原创 2021-11-15 15:19:24 · 391 阅读 · 0 评论 -
PC端网页特效-offset系列属性
offset概述：offset翻译是偏移量，使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。· 获得元素距离带有定位父元素的位置· 获得元素自身的大小(宽度高度)注意：返回的数值都不带单位 offset系列属性 作用element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回<body>element.offsetTop 返回元素相对带有定位父元素上方的偏移elem...原创 2021-11-14 22:58:03 · 477 阅读 · 0 评论 -
BOM-navigator+history对象
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="定时器案例.html">去定时器案例</a> <button>前进</button> <script> //navigator对象包含有.原创 2021-11-13 20:41:00 · 385 阅读 · 0 评论 -
BOM-location对象
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <button>点击</button> <div></div> <script> //window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可.原创 2021-11-13 20:37:15 · 307 阅读 · 0 评论 -
js同步和异步
JS是单线程同一个时间只能做一件事。单线程意味着所有任务需排队会导致JS执行时间过长，会造成页面渲染不连贯，页面渲染加载阻塞的感觉同步和异步：为了解决这个问题，利用多核CPU的计算能力，HTML5允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。（JS还是单线程哦！！） 同步：前一个任务结束再执行后一个任务。 异步：做一件事情的同时还可以去处理其他的事情 他们的本质区别：这条流水线上各个流程的执行...原创 2021-11-13 20:13:36 · 751 阅读 · 0 评论 -
this指向问题
this指向在函数定义时是确定不了的，只有函数执行的时候才能确定this指向。一般情况下this的最终指向是那个调用它的对象。1.在对象方法中，this指向方法的调用者e.g. var o = { sayHi: function() { console.log(this);//this指向的是o这个对象}2.全局作用域或者普通函数中this指向全局对象window（定时器也是）e.g. console.log(this)...原创 2021-11-13 20:02:53 · 119 阅读 · 0 评论 -
BOM 定时器+回调函数
window对象提供了两种定时器：setTimeout()和setInterval()1.setTimeout()定时器 window.setTimeout(调用函数,[延迟的毫秒数]); 用于设置一个定时器，该定时器在定时器到期后执行调用函数注意点: ①window可省略 ②延迟时间单位是毫秒，但可以省略，如果省略默认是0 ③这个调用函数可以直接写函数 还可以写函数名 还有一个写法'函数名()' ④页面中可能有...原创 2021-11-13 19:46:35 · 616 阅读 · 0 评论 -
BOM 概述+window对象常见事件
BOM(Browser Object Model)提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。JavaScript的标准组织是ECMAScript，DOM标准化组织是W3C，而BOM缺乏标准，是Netscape浏览器标准的一部分。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM比DOM更大，包含DOMwindow对象是浏览器的顶级对象，它具有双重角色。1.它是JS访问浏览器窗口的一个接口2.它是一个全局对象，定义在全..原创 2021-11-08 14:41:36 · 427 阅读 · 0 评论 -
DOM 经典案例
1.百度换肤案例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: url(img/百度换肤1.jpg) no-repeat; background原创 2021-11-08 14:16:37 · 385 阅读 · 0 评论 -
DOM 事件
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可触发JavaScript的事件。事件三要素：事件源（事件被触发的对象），事件类型（如何触发什么事件），事件处理程序（通过一个函数赋值的方式完成）。执行事件步骤：1.获取事件源 2.注册事件(绑定事件) 3.添加事件处理程序(采用函数赋值形式)<!DOCTYPE html><html><head> <met...原创 2021-11-07 18:26:58 · 777 阅读 · 0 评论 -
DOM 对元素的操作+节点操作+属性操作+事件操作
对于JavaScript，为了能够使JavaScript操作HTML、JavaScript就有了一套自己的dom编程接口对于HTML，dom使得html形成一棵dom树。包含文档、元素、节点我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型关于dom操作，我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作<!DOCTYPE html><html> <head> <meta charset="utf原创 2021-11-07 16:58:23 · 340 阅读 · 0 评论 -
DOM-获取页面元素
文档对象模型(Document Object Model)，是W3C阻止推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。获取页面元素的方法：1.根据id获取(getElementById()获取元素)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></titl原创 2021-11-07 16:31:59 · 194 阅读 · 0 评论 -
简单类型与复杂类型+垃圾回收机制
简单类型又叫做基本数据类型或者值类型。复杂类型又叫做引用类型。·值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。string、number、boolean、undefined、null(返回空对象)如果有个变量，我们以后打算存储为对象，暂时没想好放啥，这时候就给null。·引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。通过new关键字创建的对象(系统对象，自定义对象)，如Object、Array、Date等等。原创 2021-11-07 16:11:00 · 118 阅读 · 0 评论 -
JS-内置对象(Math、Date、Array、String)
JS中对象分为3种：1.自定义对象 2.内置对象 (1、2都是JS基础对象，属于ECMAScript)3.浏览器对象(JS独有的)。内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)。最大的优点：帮助我们快速开发。JS提供了多个内置对象：Math、Date、Array、String等一：Math 数学对象，不是构造函数，直接使用 //Math数学对象，不是构造函数，...原创 2021-11-06 15:00:05 · 231 阅读 · 0 评论 -
JS-对象
对象是一个具体的事物。在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象由属性和方法组成。属性：事物的特征(名词)方法：事物的行为(动词)创建对象(object)的三种方式：1.利用字面量创建对象var obj={ name:XY, age:21, sex='男', sayHi:function() { console.log('帅呀');//匿名函数 }}//利用字原创 2021-10-24 23:05:00 · 193 阅读 · 0 评论 -
JS作用域+作用域链+预解析
JS作用域：就是代码名字(变量)在某个范围内起作用和效果。(es6即es2015)之前分为：全局作用域和局部作用域(函数作用域)。全局作用域：直接编写在 script 标签之中的JS代码，都是全局作用域；或者是一个单独的 JS 文件中的。全局作用域在页面打开时创建，页面关闭时销毁；在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。1、在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）2、全局变量在全局（代码的任何位.原创 2021-10-24 22:28:00 · 108 阅读 · 0 评论 -
JS函数+arguments的使用
函数就是封装了一段可以被重复执行调用的代码块。目的：让大量代码重复使用。函数在使用时分为两步：1.声明函数function 函数名(){ //函数体}2.调用函数(函数不调用不执行)函数名();我们可利用函数的参数实现函数重复不同的代码：function 函数名(形参1,形参2···) { //函数体}函数名(实参1,实参2···);函数形参和实参的匹配问题：1.形参个数=实参个数，正常输出。2.形参个数<实参个数，取到形参个数。3..原创 2021-10-24 21:47:48 · 305 阅读 · 0 评论 -
自增自减例子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自增自减</title> <script type="text/javascript"> var d = 20; console.log(d--);//20 var d = 20; console.log(--d);//19,d=19 console.log(d.原创 2021-10-24 20:40:52 · 127 阅读 · 0 评论 -
嵌套for循环
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> /*通过程序,在页面中输出如下图形: * ** *** **** ***** ***** ***** ***** ****.原创 2021-10-24 17:01:19 · 106 阅读 · 0 评论 -
JS存值
保存一个值，可用变量保存一组值（多个值），可使用数组保存一个人物的完整信息，可使用对象（JS中对象表达结构清晰，强大）。变量需要先声明再赋值，声明变量本质是去申请空间。数组的两种创建方式：1.利用new创建数组var 数组名=new Array();//创建一个新的空数组2.利用数组字面量创建数组（常用）var 数组名=['小白','大黑','阿红'];...原创 2021-10-23 17:40:45 · 383 阅读 · 0 评论 -
初识JS
JS是运行在客户端的脚本（script）语言。脚本语言–不需要编译，运行过程中由JS解释器（JS引擎）逐行来进行解释并执行。解释型语言好比吃火锅，边吃边涮，同时进行编译型语言先把所有菜做好，才能上桌吃饭。浏览器执行JS过程：浏览器分为两部分：渲染引擎和JS引擎渲染引擎用来解析HTML和CSS，俗称内核。JS解释器（JS引擎）：用来读取网页中的JS代码。JS作用：1.嵌入动态文本于HTML页面2.对浏览器事件作出响应3.读写HTML元素4.在数据被提交到服务器之前验证数据5.检测访客的原创 2021-10-23 17:25:12 · 181 阅读 · 0 评论