js系列
关注
分享
扫一扫
文章平均质量分 60
公子清
夯实基础，深入框架，node全栈，架构前端，谁的未来不迷茫，就看怎么实践，不忘初心，不惧未来。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
什么是DOM0,DOM2,DOM3？
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解DOM事件的那些属性和方法。1.DOM级别与DOM事件：DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。有人可能会疑惑，为原创 2022-03-29 12:50:23 · 5041 阅读 · 0 评论 -
前端基础（二）
JS中的数据类型基础数据类型数字 number字符串 string布尔 boolean空对象指针 null未定义 undefinedes6新增的唯一值类型 symbol引用数据类型对象数据类型 object普通对象 {}数组对象 []正则对象 /^$/日期对象 new Date数学函数对象 Math函数数据类型 function实践：1.基本类型 //number数字类型 let n = 10; n = 10.5; n =原创 2021-03-05 12:18:11 · 267 阅读 · 1 评论 -
vue实践动态轮播图组件
vue实践动态轮播图组件数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】分割成3个件,BannerButton,BannerPagination,BannerPlugin注意：组件命名采用驼峰式写法解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来data>return : 视图有了，就有数据，原创 2020-07-04 22:21:06 · 676 阅读 · 0 评论 -
axios常规配置项
//常规配置项axios.defaults.baseURL = 'https://127.0.0.1:9999'; //请求服务器具体的地址axios.defaults.withCredentials =true; //在跨域中允许携带凭证axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//声明传给服务器的数据，通过请求传给服务器的数据application/x-www-form-urlencod原创 2020-07-04 09:12:31 · 707 阅读 · 0 评论 -
使用ref方式实现组件通讯
refs方式实现组件通讯基于ref子组件传值子组件$parent和$children显示和隐藏只需4步：1.在子组件voteButton中data(){ return { falg = true; }}2.在子组件voteButton里面给div加上v-show="flag"3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法4.在父组件中methods:{ handl原创 2020-06-19 12:06:30 · 692 阅读 · 1 评论 -
你知道兄弟组件如何通讯传递吗？
发布订阅实现兄弟组件信息传递原理1.#app 里面有voteList，里面有很多响应式数据 ，多次调用了my-vote这个组件，相当于创建了my-vote的实例，父组件通过属性把title传给了props，my-vote里面有数据num=0（多少人参与投票），eventBus=new Vue实例，将eventBus分别通过props传给vote-content和vote-button2. H3：title/num3. vote-content supNum/oppNum/ratio props:原创 2020-06-19 11:26:38 · 418 阅读 · 0 评论 -
通过发布订阅模式子组件给父组件传值
通过发布订阅模式子传父传父发布订阅注册方法：基于自定义事件，把父组件中的某一个方法注册到任务队列中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co原创 2020-06-16 17:46:07 · 356 阅读 · 0 评论 -
深挖vue父传子中的单项数据流
vue单项数据流父传子单项数据流vue的单向数据流：父组件的更新会触发子组件的更新，但子组件的更新不会触发父组件的更新，只能是父到子，父组件可以把信息传给子组件，但是子组件不能传给父组件如果想修改子组件的data：1.把接受到的属性值复制给data，不改属性，改子组件的data2.把prop以计算属性定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2020-06-16 17:12:49 · 296 阅读 · 0 评论 -
彻底弄懂父组件给子组件传值prop
父组件给子组件传值（投票）局部组件实践和组件之间的嵌套：父组件把信息传递给子组件：props属性传递默认传递给子组件的属性值都是字符串格式的，如果需要传递数据的格式是数据本身应该具备的数据，我们需要基于v-bind实现传递（哪怕传递的属性值还是固定）可以把子组件当做一个标签，我们可以设置ID、clsaa, style等内置属性值，这些属性也会传递给子组件，vue会帮我们处理好的，该合并的合并，该覆盖的覆盖，无需我们在props中注册处理`<!DOCTYPE html><原创 2020-06-16 17:08:57 · 1414 阅读 · 0 评论 -
实践面试系列：真题1
document.prlet vs var1.let没有变量提升（但在词法解析阶段也得知某一个变量是否是私有变量）2.let不允许在相同的作用域下重复声明3.let解决了JS中的暂时性死区问题4.let创建的全局变量没有给window设置对应的属性5.let会产生块级作用域…...原创 2020-01-15 17:00:14 · 252 阅读 · 0 评论 -
JS系列：选项卡之闭包
选项卡之闭包1.元素，元素节点（类数组集合）都开辟了堆内存2.自定义属性来解决this.myIndex3.利用闭包解决分析如下:1.全局作用域 栈内存 变量存储 值存储 navList AF0 变量提升 代码执行 navList = document.querySelectAll('#navBox li')； i=0 i<3 na...原创 2020-01-09 22:44:23 · 308 阅读 · 0 评论 -
JS系列： 闭包作用域实践题
闭包作用域实践题 let obj={ fn:(function(n){ //把自执行函数执行的返回结果赋值给fn //this:window return fucntion(){}; //=>fn等于这个返回的小函数 //this:obj })(10 }; obj.fn(); //===============...原创 2020-01-09 22:43:22 · 306 阅读 · 0 评论 -
JS系列：闭包作用域
闭包作用域1.创建函数开辟一个堆内存把函数体中的代码，当做字符串存储进去把堆内存的地址赋值给函数名/变量名函数在哪里创建的，那么它执行的时候所需要查找的上级作用域就是谁2.函数执行形成一个全新的私有作用域，执行上下文，私有栈内存（执行一次形成一个，多个之间也不会有影响）形参赋值 & 变量提升代码执行（把所属堆内存中的代码字符串拿出来一行行执行）遇到一个变量...原创 2019-12-25 18:20:12 · 244 阅读 · 0 评论 -
JS系列：变量提升
变量提升浏览器能够让代码执行，首先开辟一块栈内存=> 作用域 或 执行上下文（context）1.执行代码 =>全局作用域2.存储变量及数据类型的值浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情：'把当前作用域中所以带var/function关键字的进行提前的声明和定义 = > 变量提升机制'带var的只是提前声明（declar...原创 2019-12-23 18:15:22 · 356 阅读 · 0 评论 -
JS系列：关于DOM的增删改
关于DOM的增删改createElement创建一个元素标签createTextNodeappendChild把一个元素对象插入到指定容器的末尾[container].appendChild([newEle])insertBefore把一个元素对象插入到指定容器中某一个元素标签之前[container].insertBefore([newEle])cloneNode...原创 2019-12-17 18:19:06 · 246 阅读 · 0 评论 -
JS系列：JavaScript ES6 新特性详解
JavaScript ES6 带来了新的语法和新的强大功能，使您的代码更现代，更易读const , let and var 的区别：const , let 是 ES6 中用于声明变量的新关键字。constconst定义的变量不可以修改，而且必须初始化varvar定义的变量可以修改，如果不初始化会输出undefined，不会报错letlet是块级作用域，函数内部使用let定义后...原创 2019-12-17 14:21:24 · 254 阅读 · 0 评论 -
JS系列：js节点
节点（node）在html文档中出现的所有东西都是节点元素节点(HTML标签)文本节点（文字内容）注释节点（注释内容）文档节点（document）…每一种类型的节点都会有一些属性区分自己的特征与特性nodeType: 节点类型nodeName：节点名称nodeValue：节点值元素节点nodeType：1nodeName：“DIV” //大写的标签名node...原创 2019-12-17 12:24:44 · 365 阅读 · 0 评论 -
JS系列：DOM树和在js当中获取DOM元素的方法
DOM树dom tree当浏览器加载html页面时候，首先计算DOM结构，DOM结构就是DOM树。也就是（把页面中html标签像树桩结构一样，分析层级关系）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡<...原创 2019-12-16 18:13:37 · 1525 阅读 · 0 评论 -
JS系列：js函数与argumnets
function fn(n,m){//=>形参：入口 //函数体 var total =0; total = n+m; console.log(total); } fn(10,20) ; //=>实参：给形参传递的具体值 var a=12; fn(a,1===1?10:0);//实参一定是值，即使我们写的是变量或者表达式，也是把变...原创 2019-12-16 14:17:39 · 360 阅读 · 0 评论 -
JS系列：js中的数学函数Math
js中的数学函数MathMath称为数学函数，但是它属于对象类型 typeof Math => "object" Math为数学函数，提供了很多操作数字的方法Math常用方法abs取绝对值 Math.abs(-10)=>10ceil/floor向上或者向下取整 Math.ceil(12.444)=>13 //向上Math.ceil(-1...原创 2019-12-14 20:53:58 · 320 阅读 · 0 评论 -
JS系列：真实项目中的需求
真实项目中的需求1.时间字符串格式化有一个时间字符串“2018-4-4 16:26:8” , 变为“04月04日 16时26分” 方法1 /* * 1.基于split按照kongge 把字符串拆分两部分（数组中两项） * 2.左边的这一部分继续以split按照中杠来拆 * 3.右边这一部分继续split按照冒号来拆 * 4.把需要的信息拼接在一起即可（...原创 2019-12-11 18:39:48 · 581 阅读 · 0 评论 -
JS系列：js字符串中常用的方法
js中关于字符串的一些细节知识字符串：在js中由单引号或者双引号包起来的都是字符串，由零到多个字符组成。 var str='zhufengpeixun'; str.length ->13 字符串长度 str[0] ->"z" 取第一个字符 str[str.length-1] ->"n" 取最后一个字符 str[100] ->undefine...原创 2019-12-11 14:33:49 · 249 阅读 · 0 评论 -
JS系列：js多种高性能的数组去重方法
数组去重var ary = [1,2,1,3,2,3,4,5,6,2,1];解决方案1 for循环 var ary = [3,2,3,2,2]; //1.分别取出数组中的每一项(排除最后一项：最后一项后面没有需要比较的内容) 2.逐个与后面的每一项进行比较 3.遇到相同的，我们把这个重复项在原有数组中删除掉（splice） //i<ary.l...原创 2019-12-11 12:49:46 · 314 阅读 · 0 评论 -
JS系列：js数组的常用方法
关于js数组常用方法的剖析数组也是对象数据类型的，也是由键值对组成的 var ary = [12,23,34]; 一维数组 /* * 结构 * 0:12 * 1:23 * 2:34 * length：3 */ 1.以数字作为索引（属性名），索引从0开始递增 2.有一个length属性，存储的是数组长度 ary[...原创 2019-12-11 10:59:17 · 282 阅读 · 0 评论 -
HTML系列：n种方式实现隔行变色
n种方式实现隔行变色 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...原创 2019-12-09 20:20:34 · 2699 阅读 · 0 评论 -
CSS系列： css和js隔行变色（.box li:nth-of-type属性）
两种方式让css隔行变色js和css3属性.box li:nth-of-type <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...原创 2019-12-09 20:11:32 · 593 阅读 · 0 评论 -
JS系列：js数据类型的转换
数据类型的转换【基本数据类型】数字 number字符串 string布尔 boolean空 null未定义 undefined【引用数据类型】对象 object普通对象 {}数组对象 []（Array）正则对象 （RegExp）日期对象 （Date）数学函数 （Math）…函数 function真实项目中根据需求，我们徐亚进行对数据类型转换（规则和规则之...原创 2019-12-09 19:45:07 · 205 阅读 · 0 评论 -
精通js三元运算符你的效率提高一半
三元运算符语法： 条件？成立做的事情：不成立做的事情；<=>相当于简单的if/else判断(简化写法) var num = 12; if(num>10){ num ++; }else { num--; } => 相当于三元运算符： num > 10? num++ : num--;特殊情况：...原创 2019-12-09 19:32:07 · 416 阅读 · 0 评论 -
你真得了解js函数吗？
函数 function在js中函数就是一个方法（一个功能体）基于这个函数，一般是为了实现某个功能。 var total =10; total+=10; total=total/2; total=total.toFixed(2);//保留小数点后面2位（数字有一个方法toFixed用来保留小数点后面的位数）...在后续的代码中，我们依然想实现相同的操作（加1...原创 2019-12-09 19:28:59 · 189 阅读 · 0 评论 -
JS系列：浏览器解析与运行
浏览器解析：1.当浏览器（内核、引擎）解析和渲染js的时候，会给js提供一个运行的环境，这个环境叫做“全局作用域（后端global / 客户端window scope）”2.代码自上而下执行（之前有个变量提升阶段）=> 基本数据类型值，会存储当前作用域下var a = 12; var b = a; 栈内存本身就是js代码运行的环境，所以的基本类...原创 2019-12-09 19:19:07 · 310 阅读 · 0 评论 -
js数据类型有10多种，你都知道吗？
ctrl+B加粗数据类型：1.number数字类型NaN：not a number 不是一个数 ，但它是数字类型isNaN:检测当前值是否不是有效数字，返回true代表不是有效数字，false是有效数字 //=>语法: isNaN([value]) var num =12 ; isNaN(num); //=>检测num变量存储的值是否为非有效数字 返回12 fa...原创 2019-12-09 18:41:30 · 339 阅读 · 3 评论 -
到底什么是js编程语言？
1.编程语言html+css标记语言js：轻量级的交互语言->全栈编程语言面向对象：C++JAVAPHPC# (.net doc)JS面向过程Cjava与javascript没有关系2.js学习哪些部分？ECMAScript(es) 艾克马 斯奎普特DOM :document object model 文档对象模型API（属性和方法）让JS可以获取...原创 2019-12-09 18:28:18 · 1140 阅读 · 0 评论