![](https://img-blog.csdnimg.cn/20210304204304778.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript、jquery
文章平均质量分 77
在学习javascript、jquery整理的部分笔记,后面会持续更新,有些是我自己对语法的理解,有错误的地方欢迎大佬指导
十九万里
扶我起来 我还能继续学!!!
展开
-
javascript事件(零基础详解)
一、javascript事件基础js基础太重要了,在后面操作的时候感觉有些不熟,回来又重新复习了一遍js的知识点,所以最近更新的都是一些js零碎的知识点。js事件是在获取元素之后进行的操作,如果不不知道怎么获取元素的可以看其他博主的知识点、1、什么是事件js使我们有能力去创建动态页面,事件就是可以被js侦测到的行为简单理解就是用户操作鼠标或者键盘后,触发了js事件,然后产生对应的机制比如我们点击一个按钮,弹出对话框2、事件的三要素事件源>事件类型>事件处理程序事件源原创 2021-04-09 23:44:06 · 6393 阅读 · 19 评论 -
javascript中类型转换
javascript中类型装换javascript是一种弱类型的语言,变量和类型无关,所以有时需要我们进行类型转换一、数字型转换(number)两种方法:number: 类型转化走的是v8引擎最底层机制的转化规则parseFloat、parseInt:是提供额外的方法转化规则number先将引用类型转化为字符串(tostring)方法,在把字符串转化为数字字符串 => 数字:非有效数字转化为字符串布尔值 => 数字 :1或0null => 数字 : 0;underf原创 2021-03-05 15:56:52 · 2041 阅读 · 9 评论 -
深入学习JavaScript系列(七)——Promise async/await generator
(1) 什么是promsie?从语法上讲:Promise是一个对象(类),从它可以获取异步操作的内容消息;从本意上讲,它是承诺,承诺它过一段时间会给你一种结果,Promise有三种状态:pending(等待),fulfiled(成功),rejected(失败);状态一旦改变,就不会再变,创造promise实例后,他会立即执行如果还不明白,我把他打印出来:从上图中可以看到 promise是一个对象,本身就有all reject,resolve等方法;原创 2023-03-30 08:46:40 · 504 阅读 · 0 评论 -
深入学习JavaScript系列(五)——原型/原型链
JavaScript 是一种**基于原型的语言** (prototype-based language),这个和 Java 等基于类的语言不一样。每个对象拥有一个**原型对象**,对象以其原型为模板,从原型继承方法和属性,这些属性和方法定义在对象的构造器函数的 prototype 属性上,而非对象实例本身。上面这句话就比较绕,没关系,我们一点一点来分析:首先 JavaScript中的对象 都会有一个内部属性`__proto__`),该属性指向当前对象的原型;原型也是一个对象(普通对象),包含了原创 2023-03-30 08:45:34 · 246 阅读 · 0 评论 -
深入学习JavaScript系列(四)——JS闭包
函数体和创建函数时的作用域就是在一个执行上下文中创建的函数,如果访问了这个执行上下文中变量对象的值,那么闭包就产生了水平有限,很多地方写的不够严谨,下面几篇是我在学习过程中觉得很好的文章,想继续深入了解的同学可以去看看。参考一:# [译]发现 JavaScript 中闭包的强大威力参考二:# JavaScript闭包的底层运行机制参考三:# 我从来不理解JavaScript闭包,直到有人这样向我解释它…参考三:# 破解前端面试(80% 应聘者不及格系列):从闭包说起。原创 2023-03-30 13:30:00 · 661 阅读 · 1 评论 -
深入学习JavaScript系列(二)——作用域和作用域链
在 JavaScript 中,每个函数都有一个作用域链,它是一个由当前函数和所有外层函数的变量对象组成的列表。当 JavaScript 引擎查找一个变量时,它会先在当前函数的变量对象中查找,如果找不到,就会在外层函数的变量对象中查找,直到找到该变量或者到达全局对象为止。每个函数内部声明的变量和函数都只能在该函数内部访问,外部无法访问。但是,如果一个函数内部嵌套了另一个函数,那么内部函数可以访问外部函数的变量和函数,这就是作用域链的作用。作用域链的创建是在函数定义时确定的,而不是在函数调用时确定的。原创 2023-03-30 13:15:00 · 399 阅读 · 0 评论 -
深入学习JavaScript系列(一)——ES6中的JS执行上下文
执行上下文是js中基础的概念,闭包,作用域等都由此展开,所以我也把他作为深入学习JavaScript系列的第一章,通过文章学习了执行上下文的相关概念,值得反复研读。在熟悉了执行上下文的概念,类型和创建,以及词法环境,变量环境原理之后,就可以继续下面的学习了。# 深入学习JavaScript系列(二)——作用域和作用域链参考一:# [译] 理解 JavaScript 中的执行上下文和执行栈参考二:# ES2018 最新 【译】理解Javascript中的执行上下文和执行栈。原创 2023-03-30 08:44:36 · 851 阅读 · 0 评论 -
JS基础之——作用域和作用域链
上一篇提到 在js的执行上下文中词法环境中会包含作用域链,同时词法环境解释阶段生成,在执行完毕后会被销毁,这也说明了作用域链的生命周期是随着函数的创建与销毁的。先通过两个问题来引出一下在 JavaScript 中,每个函数都有一个作用域链,它是一个由当前函数和所有外层函数的变量对象组成的列表。当 JavaScript 引擎查找一个变量时,它会先在当前函数的变量对象中查找,如果找不到,就会在外层函数的变量对象中查找,直到找到该变量或者到达全局对象为止。原创 2023-03-13 09:03:16 · 218 阅读 · 0 评论 -
ES6中的JS执行上下文
js的执行上下文整体过程:创建变量对象(Variable Object):JavaScript引擎会创建一个变量对象,用于存储当前执行上下文中的变量、函数声明和形参等信息。建立作用域链(Scope Chain):JavaScript引擎会建立一个作用域链,用于解析变量和函数的作用域。确定this指向:JavaScript引擎会确定当前执行上下文中的this指向。执行代码:JavaScript引擎会执行当前执行上下文中的代码,包括变量赋值、函数调用、条件语句、循环语句等。原创 2023-03-13 09:01:56 · 333 阅读 · 0 评论 -
前端学习知识点补充
补充学习的前端基础知识原创 2021-12-19 22:50:01 · 569 阅读 · 0 评论 -
JQuery基础学习
jquery基础学习笔记原创 2021-12-19 21:51:40 · 694 阅读 · 0 评论 -
防抖和节流代码实现
1、防抖触发高频事件n秒后函数只会执行一次,如果n秒内高频事件再次呗触发 则重新计算时间:function debounce(fn){ let timeout = null //创建一个标记用来存放定时器的返回值 return function(){ clearTimeout(timeout) //每次用户输入的时候把钱一个settimeout clear掉 timeout = setTimeout(() => {原创 2021-12-11 15:03:42 · 679 阅读 · 0 评论 -
JS中常用的方法总结(算法,js编程题必备)
总结这些方法的初衷呢是自己在做js编程题练的时候,发现对于JavaScript的许多方法 包括ES6中的方法不熟练,所以呢需要去mdn中查找方法这样非常耽误,就自己总结一下js常用的方法 按照数据类型进行分类,有错误的地方欢迎大佬指导!!1、数学方法:MathMath本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法1、只保留正数部分:parselnt2、向上取整,有小数就整数部分加1:Math.ceil3、四舍五入: Math.round4、向下取整.原创 2021-10-25 16:26:56 · 3320 阅读 · 2 评论 -
JavaScript中new运算符的实现机制及手写
官方解释:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。总结:创建自定义对象或者构造函数的时候使用这里我通过几个小问题的方式来解释new运算符1、怎么创建一个自定义对象呢:1、通过编写函数,定义对象类型2、把编写的函数通过mew来创建对象实例2、new运算符有哪些参数:1、 construtor:是一个类或者函数 ,作用在于指定对象实例,没有参数一般可以省略为圆括号2、arguments:列表。被construtor调用,比如construor有多个函数原创 2021-10-11 14:23:15 · 587 阅读 · 0 评论 -
JavaScript数据结构与算法基础笔记
1、基础数据结构1.1数据结构种类数组栈队列和双端队列链表集合字典和散列表递归树二叉堆和堆排序在写每个知识点的时候 我自己总结的方式是按照定义>javascript实现方式>对应的方法>算法实现的结构去写的 后面有想法在继续补充1.2 数组1.2.1 数组定义js数组其实就是API的调用 是一种最简单的内存数据结构 数组存储一系列同一种数据类型的值注:javascript中数组可以保存不同类型的值 但是一般不推荐哈1.2.2 数组创建在javasc转载 2021-10-09 10:10:27 · 303 阅读 · 0 评论 -
Promise入门学习
1、promise概述Promise是ES6中原生的一个方法 代表着未来要发生的某件事情,在javascript中来说就是异步操作,所以在js中promise就是异步操作常见的一种方法,异步操作常见方法:1、callback回调函数2、事件监听3、promise4、发布/订阅模式5、async/await6、generator链式调用这里我们主要学习PromisePromise主要的优点在于能把异步操作通过同步操作的流程表示出来,避免了异步的嵌套回调。产生回调地狱。2、promis原创 2021-06-22 13:40:25 · 211 阅读 · 1 评论 -
正则表达式巧妙实现字符串去重
今天上午看到新浪的一个面试题: 将字符串 "adsfjjbkk"处理,就是连一起重复的字符删除,变成“adsfjbk”,写出实现代码。 当然了,实现思路有很多。但是如果你用正则实现出来的话,估计会给你加分不少。下面我实现如下: 对于去除简单的相邻重复的情况,我们可以用正则实现如下: <span style="font-size:14px;">var str = "adsfjjbkk"...转载 2021-06-01 22:33:19 · 4048 阅读 · 0 评论 -
5种方式实现数组扁平化
数组扁平化概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]实现1. reduce遍历数组每一项,若值为数组则递归遍历,否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten...转载 2021-06-01 22:13:47 · 569 阅读 · 0 评论 -
js中replace的用法
replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。为了帮助大家更好的理解,下面举个简单例子说明一下 Js代码 1. <script language="javascript"> 2. &...转载 2021-06-01 22:03:40 · 47185 阅读 · 1 评论 -
为什么css放头部、js放尾部
(题图:梵高-向日葵)我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。为什么外链css为什么要放头部?#首先整个页面展示给用户会经过html 的解析与渲染过程。而外链css无论放在html的任何位置都不影响html的解析,但是影响html的渲染。如果将css放在尾部,html的内容可以第一时间显示出来,但是会阻塞html行内css的渲染。浏览器的这个策略其实很明智的,想象一下..转载 2021-06-01 09:14:53 · 1580 阅读 · 0 评论 -
JS根据设备宽度设置根节点(html)font-size字体大小
JS根据设备宽度设置根节点(html)font-size字体大小 JS根据设备宽度设置根节点(html)font-size字体大小(function () { document.addEventListener('DOMContentLoaded', function () { var deviceWi...转载 2021-05-31 23:19:39 · 1243 阅读 · 0 评论 -
ES6 7 8 9 10新特性总结
ES6新特性:1、let&const2、解构赋值3、模板字符串4、简化对象5、箭头函数6、允许函数的默认值设置参数7、symbol 独一无二的值8、迭代器9、生成器10、promise11、 set集合12、MapES7新特性:1、求幂运算符(**)2、Array.prototype.includes()方法3、函数作用域中严格模式的变更ES8新特性:1、异步函数(Async functions) async await2、Object.values(),Ob原创 2021-05-26 21:48:32 · 1789 阅读 · 1 评论 -
带你看懂javascript函数柯里化(currying)
1、什么是柯里化这里参照百度百科:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。一句话概述:柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术函数柯里化有什么用:我这里放几张知乎大佬的回答:是不是还是搞不懂它是什么意思,没关系我也不懂,我们接着往下看,2、一个简单的柯里化函数function sum (a, b, c) {原创 2021-05-06 21:59:40 · 1288 阅读 · 0 评论 -
拿捏javascript数据结构与算法(上)
本文参考《学习javascript数据结构与算法》,根据自己整理写下,如有错误的地方,欢迎大佬指正。知识点:第一章:javascript简介第二章:ECMAscript和TypeScript概述第三章:数组第四章:栈第五章:队列和双端对列第六章:链表第七章:集合第八章:字典和散列表第九章:递归第一章js基础比较简单,在这里我就不浪费时间重复了,直接从第二章开始第二章:ECMAscript和TypeScript概述2.1 ECMAscript还是TypeScript2.2 EC原创 2021-05-02 22:19:24 · 1851 阅读 · 10 评论 -
javascript事件模型
三、事件模型1、定义事件是用户与浏览器产生交互的时浏览器中发生的动作,其本质是程序各个组件之间的一种通讯方式。今天所讲的事件。主要是DOM事件2、DOM事件流DOM结构是一个树型结构,当一个html元素产生事件后,该事件会在元素节点与根节点之间按照一定的顺序传播。路径所经过的节点丢回接收到该节点的事件。然后做出相应的反应。这个过程称为DOM事件。3、两种事件顺序事件捕捉和事件冒泡首先我们先明白事件传播的三个阶段1.事件捕获阶段2.事件目标阶段3.冒泡阶段冒泡事件:事件像水泡一样原创 2021-04-27 21:35:41 · 298 阅读 · 0 评论 -
前端面试之DOM树
二、DOM树什么是DOM文档对象类型,是 W3C 组织推荐的处理可扩展标记语言的标准编程接口通过这些 DOM 接口可以改变网页的内容、结构和样式深层理解:从网络传给渲染引擎的HTML文件字节流无法直接被渲染引擎理解的,所以要将其转化为渲染引擎能够理解的内部结构,这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述DOM分类核心DOM:是用于XML与HTML的共用接口;XMLDOM:XML专用接口;HTML DOM:HTML专用接口;DOM事件模型:定义DOM能够响应的事件;原创 2021-04-27 21:32:51 · 583 阅读 · 6 评论 -
事件模型
文章写的非常好,转载一下事件模型 事件模型 来自《JavaScript 标准参考教程(alpha)》,by 阮一峰目录EventTarget 接口EventTarget.addEventListener()EventTarget.removeEventListener()EventTarget.dispatchEvent()监听函数HTML 的 on- 属性元素节点的事件属性EventTarget.addEventListener()小结this 的指向事件的传播事件的代理Event 对象概述Ev.转载 2021-04-27 00:01:52 · 274 阅读 · 0 评论 -
正则表达式入门|常见的js正则表达式(建议收藏)
知识点:正则表达式概述正则表达式的创建内容含义常见的正则验证代码js中常见的正则表达式一、正则表达式概述正则表达式(Regular Expression) 是用于匹配字符串中字符串组合的模式,在js中,正则表达式是对象(js万物皆对象)用于:创建密码 提交表单,匹配字符串,过滤敏感词,提取特定的字符串。用于搜索前端目前主要利用正则表达式来完成表单的验证通俗来说就是匹配信息主要有精准匹配和模糊匹配两种二、正则表达式的创建两种方式:1.RegExp 创建Var regex原创 2021-04-11 19:44:50 · 1283 阅读 · 9 评论 -
JQuery中 $(function(){})和$(document).ready(function(){})
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)二是onload,指示页面包含图片等文件在内的所有元素都加载完成。用jQ的人很多人都是这么开始写脚本的:$(function(){// do something});其实这个就是jq ready()的简写,他等价于:$(document).ready(function(){//do something})/转载 2021-04-04 08:30:35 · 343 阅读 · 0 评论 -
javascript实现定时器倒计时
话不多说直接上代码、<!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"> <原创 2021-04-10 21:06:36 · 2060 阅读 · 13 评论 -
javascript中BOM浏览器对象模型详解
主要知识点:BOM 概述window 对象的常见事件定时器JS 执行机制location 对象navigator 对象history 对象1、BOM概述1.1 什么是 BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W原创 2021-04-10 07:53:04 · 283 阅读 · 1 评论 -
javascript闭包(一看就懂)
1、闭包闭包就是能够读取到其他函数内部变量的函数闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域。闭包的特性:1、函数内在嵌套函数2、内部函数可以引用外层的参数和变量3、参数和变量不会被垃圾回收机制回收对闭包的理解:1、使用闭包主要是为了设计私有方法和变量,闭包的优点可以避免全局变量的污染。缺点是闭包会一直在内存中,会增大内存的使用量,使用不合理是容易造成内存泄漏。在原创 2021-04-08 07:49:24 · 262 阅读 · 0 评论 -
javascript代码实现选项卡(14行js代码)
一html部分<div id="main"> <!-- active是默认选中的div --> <button class="active">11</button> <button>22</button> <button>33</button> <!-- 三个div在css中都设置为none 这里的display:block原创 2021-04-03 11:03:10 · 582 阅读 · 0 评论 -
javascript变量(声明,定义,数据类型)
学习javascript变量已经好几遍了,今天系统的来整理一下,主要是从定义,声明,数据类型几个方面入手一、变量声明js所有的声明变量,均使用var关键字最开始我也不理解这句话,为什么不能用let。后来仔细理解了一下,这里说的是声明变量,没有定义变量或者赋值,let必须初始化,所以只能使用varvar a; //声明一个变量 avar b,c,d; //同时申明多个变量时,变量名之间用逗号隔开console.log(a); //在控制台显示变量a的值,输出为.原创 2021-03-26 09:28:57 · 7892 阅读 · 1 评论 -
javascript常见的四种继承方式
继承知识点:常见的四种继承方式,各个继承的优缺点继承面试考点。js中的继承,主要是依靠原型链来实现的,原型链是继承的主要工具和方法。继承的四种方式原型继承组合 继承寄生组合继承es6的extend继承1、原型继承原型继承额核心是把父类的实例作为子类的原型特点:父类的实例可以作为子类的实例父类原有和新增的方法和属性,子类都能访问到简单容易实现缺点:创建的子类实例不能传参子类实例共享了父类构造函数的引用属性var person = { friends : ["Van"原创 2021-03-14 20:57:05 · 274 阅读 · 0 评论 -
浅析js闭包
闭包知识点:作用域 > 执行栈和执行上下文> 闭包> 闭包的作用> 闭包的应用> 闭包引起的问题一、作用域和作用域链在js中的变量不是在所有地方都能使用,一个变量生效的范围,就是这个变量的作用域。作用域又分为全局作用域和局部作用域,function fn1() {let a = 1;}fucntion fn2 () {let b = 2;}在声明的这两个函数中,fn1 和fn2 创建了两个私有作用域,即a和b只能对应在fn1 和fn2中使用。每个函数都原创 2021-03-14 10:30:57 · 455 阅读 · 8 评论 -
javascript中this用法
javascript中this用法一、this定义this是一个对象,在不同情况在指向不同的对象当一个函数被调用的时候回产生一个对象(调用方式,调用地点,参数等等)一般来说我们用this指向全局作用域或者局部作用域来代替当前使用的对象。使用的用途主要有:1,作为对象方法来调用2,作为构造函数来调用3.使用call或者apply改变this方向后调用二、this指向先上结论1、对象调用this,调用那个对象this指向那个对象2、没有定义就直接调用this函数 ,this指向全局作用域原创 2021-03-07 14:06:46 · 2997 阅读 · 0 评论 -
javascript函数
javascript函数一、javascript函数函数的概念函数就是用关键词function把一段需要经常使用的代码包含起来,在调用function时会调用该代码块js函数的声明方式:1,直接声明 function func1(a, b) { console.log(a + b); } func1(2,3);//52、函数表达式(匿名函数)var func1 = function (a, b) { console.log(a + b );原创 2021-03-07 11:05:40 · 223 阅读 · 0 评论 -
条件循环语句,数据类型检测
javascript阶段二(条件循环语句,数据类型检测)一、条件语句ifif是最基本的判断语句,条件成立则执行if函数。var a = 5,var b ,if(a = b){console.log(b);}if-elseif-else判断语句var a=5;var b;if(a==b){ alert("b=5");}else { //如果a1=b则执行下面内容 alert("b1=5");}else-if这是if语句的多重if,在用于多种情况的时原创 2021-03-06 20:17:03 · 722 阅读 · 0 评论 -
javascript基础一
javascript阶段一(js变量,运算)js编写位置第一种方法是在html中javascript语句必须编写在标签中可以把js脚本写在和中<head> <script> //js代码1 </script></head><body> <script> //js代码2 </script></body>w3c建议js脚本放在head标签中两原创 2021-03-05 17:31:40 · 257 阅读 · 4 评论