js学习整理
文章平均质量分 73
js学习整理
静静小白
这个作者很懒,什么都没留下…
展开
-
第二十六节:class和焦点的操作管理
IE9以下的getElementsByClassName()方法兼容问题//<p>Hello World</p>//<p class="a">增加样式 World</p>//<ul id="ul"></ul>function getClass(classA){ if (document.getElementsByClassName) { return document.getElementsByClassNa原创 2022-03-26 08:56:06 · 300 阅读 · 0 评论 -
第二十五节:动态和静态合集
DOM是JavaScript重要组成部分,在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection(html元素的集合)。这三个集合有一些共同的特点:它们都是一个类数组对象,可以通过中括号表达式来访问集合中元素,也有length属性。但它们并不是数组,而且它们都是动态的(querySelectorAll()返回的NodeList除外),会根据页面元素的变化而变化。1、静态合集NodeList 对象是节点的集合,通常是由属性,原创 2022-03-04 11:29:11 · 580 阅读 · 0 评论 -
第二十四节:动态加载JS和动态加载CSS
1、动态加载JS一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部;或者在顶部引入外部js。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/jscript" src="js/flexible.js">&原创 2022-03-04 11:21:09 · 1827 阅读 · 0 评论 -
第二十三节:DOM对象
DOM对象解析DOM为Document Object Model的简写(文档对象模型);当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问...原创 2022-02-17 09:36:37 · 458 阅读 · 0 评论 -
第二十二节:BOM对象
备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))原创 2022-02-15 09:56:38 · 300 阅读 · 0 评论 -
第二十一节:JS中的继承
上节回顾1、所有 函数 都有一个特殊属性(prototype),prototype指向一个对象,称之为原型对象,原型对象上只有一个属性(constructor),constructor又指向了构造函数,形成了一个闭环。2、所有 对象 都有一个隐藏的属性proto,大部分浏览器可以使用两个下划线进行访问;//创建一个构造函数function Fun(name,age){ this.name=name; this.age=age;}Fun.prototype; //{constructor: ƒ原创 2022-02-15 09:56:25 · 380 阅读 · 0 评论 -
第二十节:面向对象设计模式
对象创建回顾对象直接量使用new操作符Object.create() 方式创建参考:第三节:数据类型——Object对象我们创建对象一般都是创建单个对象,如果有需求要求创建多个对象,这就可能出现很多重复的代码。this指向解析①函数中:this表示全局作用域,如果在浏览器中就表示windowvar x=5;function fun(){ let x=1; console.log(this.x,this);}fun();//5,window,this指向全局作用域②对象的原创 2022-02-11 08:46:46 · 277 阅读 · 0 评论 -
第十九节:包装对象和内置对象
1、包装对象为什么基础类型可以使用属性或方法?在JS中虽然只有对象有属性和方法,但是基础数据类型也可调用方法,这是因为JS解释器遇到点或者中括号,会判断前面的东西是否为对象,如果是直接执行,如果不是则说明是基础数据类型,解释器会创建一个和基础类型对应的一个对象,让后去访问这个对象对应的属性或者方法,当属性访问或者方法执行结束后,这个对象会立即被删除掉,所以基础数据类型也可以使用方法。包装对象: 在调用的同时被创建的对象被称之为包装对象。基础数据类型调用方法的过程: 创建包装对象——调用方法——删除包原创 2022-01-18 13:35:25 · 344 阅读 · 0 评论 -
第十八节:函数的应用及闭包
1、函数当成一个值的应用直接赋值(定义一个变量,将函数赋值给变量,例如函数的创建中的一种方法:函数表达式语句 )将函赋值给对象的属性把函数作为数组中的某一项进行存储//将函数赋值给变量var a = function(a,b){//函数体}//将函数赋值给对象的属性var obj={name:'leo',fun:function(){ console.log('hello ' + this.name); }}obj.fun();// hello leo//将函数作为数组的原创 2021-12-16 17:12:37 · 74 阅读 · 0 评论 -
第十七节:JS中的作用域
回顾在JS中作用域是基于函数创建的,es6之后出现了块语句作用域;作用域可以相互嵌套,但不可重叠作用域:对数据存取得规则称之为作用域函数作用域:每创建一个函数,就创建了一个作用域,被作用域包裹的变量或者函数,函数体外是访问不到的;对内部而言,这个变量或者函数称之为私有变量和私有函数;对外部而言,该变量和函数是被隐藏的。备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))...原创 2021-12-16 17:12:13 · 251 阅读 · 0 评论 -
第十六节:特殊对象—函数详解
1、函数特点及常见名词解释函数特点:一个地方定义,多个地方执行函数的参数化:函数的定义和使用过程中可以传递参数到函数中,传递参数的这个过程被称之为函数的参数化。形参:函数定义的参数。实参:函数运行时接收到的参数。举例说明:下面代码中a,b称之为形参,使用函数sum时传入的1,2称之为实参。function sum(a,b){ return a+b;}sum(1,2);2、函数的创建① 使用 函数声明语句 创建函数(结尾可不使用分号;大括号即表示函数的结束,如果加上;会被当成空语原创 2021-12-15 11:38:33 · 263 阅读 · 0 评论 -
第十五节:时间对象Date
1、关于时间GMT时间(格林尼治时间)UTC时间(协调世界时间)时间虽然没有起始值,但JS语言有起始时间,为1970年1月1日00点00分00秒2、时间的创建不传参:new Date(); //获取系统时间,系统时间一般不准确,准确时间一般是获取服务器时间一个参数:new Date(毫秒数);需要创建的时间距离起止时间(1970年)相差的毫秒数多个参数:new Date('11 30,2021');//Tue Nov 30 2021 00:00:00 GMT+0800 (China Stan原创 2021-12-07 10:16:28 · 240 阅读 · 0 评论 -
第十四节:数组去重
1、数组去重使用标签语句var arr = [1,2,4,5,2,6,8,4,9,2];var narr = [];for(let i=0;i<arr.length;i++){ inside:{ for(var j=0;j<narr.length;j++){ if(arr[i]==narr[j]){ break inside; //跳出内部循环 } } narr.push原创 2021-11-30 15:40:39 · 227 阅读 · 0 评论 -
第十三节:特殊的对象——数组的详解
typeof null; 为什么结果是Object ?JS解释器编译原则,如果二进制前三位是0,typeof查询的数据类型返回的就是Object,而null转换为二进制存储时,全部位数均为0,所以typeof查询结果为Object,这是早期开发的bug,所以后续又有一个undefined表示空,关于历史原因可以查看阮一峰老师的博客1、概念介绍对象:各种属性的名称和属性的值组成的无序的列表的合集;数组:有序的列表合集;数组2个特性:每一项可以保存任意数据类型数据;长度可以随时调整;2、数组创建原创 2021-11-30 15:38:48 · 269 阅读 · 0 评论 -
第十二节:作用域和内存
一个作用域可以包含多个作用域,可以进行嵌套;词法语法分析(编译过程)备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))原创 2021-11-11 16:17:33 · 611 阅读 · 0 评论 -
第十一节:JS中的变量详解
创建变量使用关键字 var,es6新增 let;创建变量: 创建了名字、创建了作用范围、var创建变量预处理时会被提升到函数顶部基础数据类型:将值保存到变量中引用数据类型:将值保存在内存中,把值得内存地址保存到变量中//基础数据类型var a=123;var b = 'string';var c = true;//引用数据类型var arr = [1,2,3];var obj = {name:'leo',age:20};增删属性和方法:基础数据类型:不会报错,但是没有任何作用引原创 2021-11-11 16:14:35 · 292 阅读 · 0 评论 -
第十节:JS的中断语句
1、break语句break 语句。它被用于“跳出” switch 语句。break 语句也可用于跳出 循环for (i = 0; i < 10; i++) { if (i === 3) { break; } console.log(i + ' ');}//结果 :0 1 2break 语句,如果没有标签引用,只能用于跳出一个循环或一个 switch。如果有标签引用,则 break 语句可用于跳出任意代码块( 代码块指的是 { 与 } 之间的代码片段 )备注: break原创 2021-11-11 16:14:18 · 958 阅读 · 0 评论 -
第九节:JS中的循环语句
while语句一般在循环体中来改变判断条件的值,如果不进行值得改变,循环条件一直满足,会造成死循环。//语法while (条件) { 要执行的代码块}//例子while (i < 10) { text += "数字是 " + i; i++;}for循环//语法,第一个表达式为初始化,第二个表达式为判断,第三个表达式为更新,for (语句 1; 语句 2; 语句 3) { 要执行的代码块}//执行过程:语句1,语句2,代码块,语句3;语句1初始原创 2021-11-11 16:13:59 · 381 阅读 · 0 评论 -
第八节:JS中的基础语句和分支语句
1、备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))原创 2021-11-11 16:13:41 · 105 阅读 · 0 评论 -
第七节:JS中的基础知识总结
备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))原创 2021-11-09 09:51:49 · 91 阅读 · 0 评论 -
第六节:JS中的加减乘除和比较赋值
1、乘性操作符(*乘法、/除法、%模运算)运算原则: 先将运算内容转换为数字,然后进行计算;如果转换失败会返回NaN小数:会出现0.1*0.2 不等于 0.2的误差,与0.1+0.2 不等于 0.3 原理相同结果:数字或者NaN,能转换数字的结果均为数字,不能转换结果会返回NaN参考文章:关于0.1+0.2不等于0.3的问题2、减法操作(-)与乘性操作运行规则完全一直,先转换数字,然后进行操作,不能转换则返回NaN;也存在小数的问题3、加法操作(存在隐式类型转换,更偏向于字符串)情况一:..原创 2021-11-06 15:25:49 · 547 阅读 · 0 评论 -
第五节:JS中的逻辑运算符-逻辑与&&逻辑或||
1、逻辑与&&,只有两个操作数均为true,记过才返回truetrue && true; //truetrue && false; //falsefalse && true; //false//正常使用中,不会直接比较两个布尔值,常用于if语句中var a=1,b=2;a==1 && b==2; //true, 如果a==1 并且 b==2时才返回truea==1 && b==3; //false原创 2021-11-05 10:10:53 · 519 阅读 · 0 评论 -
第四节:表达式,操作符,优先级,结合性
1、概念介绍表达式:JS中的短语,解释器遇到短语会计算出一个结果参与运算(简单来说:js的代码就是由操作符和表达式组成的,除了操作符其余均为表达式,例如1+1,两个1就是表达式,+为操作符),原始表达式分类如下:① 原始表达式(常量、变量、直接量、关键字、)常量:不可改变的内容,例如π,或者常见的纯大写命名的内容默认为常量不可更改(一种常见的约定俗称),es6新增的const声明一个只读的常量;变量:可以改变的内容,随时可以发生变化;直接量:数字、字符串、正则表达式关键字② 初始化表达式:原创 2021-11-04 17:05:46 · 503 阅读 · 0 评论 -
第三节:数据类型——Object对象
Object对象:由属性构成的无需集合;1、对象与原始类型的区别:对象有属性;对象对应的值可以是原始数据类型也可以是对象,对象的属性和对应的值这种表示方式称之为键值对,属性名又称之为键名,值称之为键值;键值可以是原始数据类型也可以是对象,也可能是一个方法;对象有方法;方法其实就是对象的特殊属性(由function对应的一个方法);对象可以改变(对象的属性可以进行改变)2、对象的分类(可能有不同的分法)内部对象,JS有17个内部对象,内部对象又可以分为错误对象(代表各种错误和报错)、常用对象原创 2021-11-04 17:04:54 · 5595 阅读 · 0 评论 -
第二节:数据类型——number和string
上节回顾:undefined为window的属性,有些程序会在函数开始置定义一个var undefined,这是因为undefined是window的一个属性,当你判断某一个东西是不是undefined的时候,计算机会到window中整体去搜索,比较消耗性能,所以在程序开始位置定义一个undefined1、number 数字类型JS中表示整数有:十进制、八进制、十六进制,正常开发一般都是使用十进制JS中数字范围为正2的53次方——负2的53次方(不用刻意记忆,一般开发都不会超过此范围)小数/浮点数原创 2021-10-25 17:04:59 · 1277 阅读 · 0 评论 -
第一节:数据类型——null,undefined和布尔值
JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值)数值(number):整数和小数(比如1和3.14)。字符串(string):文本(比如Hello World)。布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)。undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值。null:表示空值,即此处的值为空。对象(object):各种值组成的集合数值、字符串、布尔值这三种类型,合称为原原创 2021-10-22 11:31:08 · 1122 阅读 · 0 评论 -
new Date()获取当前时间前几天,后几天,日期是否失效判断
1、获取当前日期前几天//num为0则为今天,num为1则为昨天function getDate(num){ num = num ? num : 0; const currentTime = new Date().getTime() - num * 24 * 60 * 60 * 1000; const date = new Date(currentTime); let year = date.getFullYear(); let month = date.getMonth() + 1; le原创 2021-09-17 11:21:41 · 1740 阅读 · 0 评论 -
javascript正则表达式学习
REGEXP对象javascript通过内置对象RegExp支持正则表达式有两种方法实例化RegExp对象1、字面量var reg = /\bis\b/;var reg2 = /\bis\b/g; //正则规则放在//内,\bv表示单词边界,g表示全文搜索,如果没有g则只会修改符合条件的第一个值var str = 'He is a boy. this is a dog. where is she?'str.replace(reg, 'IS');//"He IS a boy. this is a原创 2021-04-05 11:26:12 · 193 阅读 · 0 评论 -
ES5新增数组方法
在 ES2015 之前,ECMAScript 规范通常按其版本命名。 因此,ES5 是 2009 年更新发布的ECMAScript 规范的官方名称在 ES2015 诞生的过程中,这个名字从 ES6 变成了 ES2015,ES2015也称之为ES6ES2017也称之为ES8浏览器对ES5的支持情况IE:IE6,IE7是完全不支持的。而IE8是只支持一些内容,IE9是大部分支持,IE10及以上完全支持。Chrome:Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方。Fir原创 2021-03-22 13:48:49 · 204 阅读 · 0 评论 -
数组方法梳理及各个方法特点
数组属于特殊对象,对象为无序列表数据存储,数组属于有序列表数据存储参考:https://www.w3school.com.cn/jsref/jsref_obj_array.asp创建数组//使用new关键字// var arr=new Array(); //创建空数组// var arr=new Array(size); //size表示数组长度,如果是2则创建长度为2的空数组// var arr=new Array(1,2,3);//数组长度为3,参数为1,2,3var arr=new Ar原创 2021-03-18 16:08:54 · 142 阅读 · 0 评论