- 博客(62)
- 收藏
- 关注
RSS订阅原创 css选择器及优先级
css常见选择器及优先级选择器名称选择器符号选择器优先级行内样式style={}1000id选择器#id100类选择器.className10属性选择器a[ref=‘atrName’]10伪类选择器:hover10标签选择器p1伪元素选择器::after1兄弟选择器+0子选择器>0后代选择器div p0通配符*0css优先级规则：1、css选择规则的权重值不同时，权重
2022-02-26 12:39:46
572
原创 zsh的配置及常见插件的安装
zsh的配置及常见插件的安装先交代一下背景最近刚入手了mac pro,用习惯了windows,突然一下用ios系统，别说，还真是不习惯。周末刚好有空来熟悉熟悉ios 的cmd是咋样的。ios 的shell 之前用的都是bash,现在已经被zsh取代了，当然也还有其他的shell，比如fish等等，没怎么接触过，所以就不介绍了。接下来先来点开胃小菜。编译和解释编程语言没有编译型和解释型的区别，只能说某个语言常见的执行方式为编译成新代码执行或解释器解释执行编译器的输入是A语言的源代码，而输出是B语
2022-02-12 18:11:22
3614
原创 2021-11-10
git学习笔记推送代码命令分支切换命令git merge和git rebase区别git checkout HEAD~3和git branch -f feat HEAD~3git reset 和git revertgit cherry-pickgit rebase -i推送代码命令git add . 保存改动git commit -m ‘des’ 提交改动到暂存区git push push 到远程分支分支切换命令git branch feat 新建feat分支
2021-11-10 23:21:08
233
原创 svg+蒙版实现波浪效果
<g class="layer" display="inline" id="liquid_box"> <title>liquid_box</title> <path d="m26.21596,463.68312l1.64351,-70.85607c16.14736,-9.38521 20.08664,-2.23922 42.68483,-8.03207c22.59819,-5.79285 31.06838,-11.16229 57.73104,3.5
2021-04-13 12:14:23
398
原创 svg滤镜之高斯滤镜、径向渐变
SVG阅读器处理一个图形对象时，会将对象呈现在位图输出设备上，它可以将对象的描述信息转化为一组对应的像素。在使用滤镜时，SVG阅读器不会直接将图形渲染为最终结果，而是先将像素保存到临时位图中，然后将滤镜指定的操作应用到该临时位图，其结果作为最终图形。在SVG中，使用filter元素指定一组操作(也叫基元),在渲染图形对象时，将该操作应用在最终图形上。filter标记之间就是我们想要的滤镜基元，每个基元有一个或多个输入，但是只有一个输出，输入可以是原始图形(SourceGraphic)、图形的阿尔法通道(
2021-03-30 18:06:09
203
原创 JavaScript Dom编程艺术 读后感（1）
JavaScript Dom编程艺术 读后感（1）最近既不是闲来无事，也不是空穴来风，就是买了这本书一年多了，之前看过一遍，当时看的懵懵懂懂。最近又看到这本书了，所以来重读一遍。现在已经看了一半了，所以来记录一下自己的心得。1.前三章基本都是在讲一些基本的知识：js的发展史、基础语法知识以及Dom的基本知识点，都是些比较简单的概念，知道就行；2. 重头戏应该从第四章开始，案例是建立javascript图片库，并不断进行优化和改善。html与javascript代码分离 （页面与逻辑分离）htm
2021-03-06 20:30:50
229
2
原创 数组常见方法、数组去重
数组中的常见方法变异方法（原数组会发生改变）：pop、push、unshift、shift、reverse、sort、splice非变异方法(原数组不会发生改变，返回一个新数组): slice、concat、join、indexOf、lastIndexOf、forEach、es6中新增的方法（map、reduce、filter、some、any）、扩展运算符数组常见的遍历方法：forEach:无返回值map：reducefiltersomeevery(…)//forEach:无返回
2021-02-25 17:59:28
188
1
原创 数组拍平，也即扁平化
数组扁平化数组扁平化：就是将[1,2,[3,4],[5,[6,7]],8]转化为[1,2,3,4,5,6,7,8]。方法一：采用递归的思想，并借助数组的reduce方法 function flatten(arr) { return arr.reduce((a,b)=>{ return a.concat(Array.isArray(b)?flatten(b):b) },[]) }方法二： //正则表达式 function
2021-02-25 15:10:00
154
原创 js之new运算符、构造函数
js中的new操作符和构造函数new操作符作用于一个普通函数，这个普通函数就变成了构造函数。构造函数首字母一般大写；使用new操作符创建构造函数的实例对象的步骤：在内存中新创建一个对象；这个对象的__proto__指向构造函数的prototype;构造函数内部的this指向该新对象;执行构造函数内部的代码，也就是给新对象添加属性；返回对象，如果构造函数内部返回的是基本类型，则默认会返回空对象；如果有要返回的对象，则直接返回该对象；否则返回创建的新对象。let obj=new functi
2021-02-25 10:05:58
283
原创 leetcode——重建二叉树
【题目描述】：输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。【主要思路】：前序遍历是按照根节点、左节点、右节点的顺序进行，中序遍历是按照左节点、根节点、右节点的顺序进行遍历。前序遍历序列中的第一个元素对应整个树的根节点rootNode，在中序遍历序列中找到rootNode所在位置rootIndex，rootIndex
2021-02-16 14:34:50
149
原创 leetcode——反转链表
【题目描述】输入一个链表，反转链表后，输出新链表的表头。function ListNode(x){ this.val=x; this.next=null;}function reverseList(head){ let pre=null, temp=null; while(head){ temp=head.next; head.next=pre; pre=head; head=temp; } return pre;}...
2021-02-16 14:02:55
76
原创 剑指offer——替换空格
【题目描述】请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。思路一：将字符串进行遍历function replaceSpace(str){ let arr=str.split(''); let res=arr.map(item=>item===' '?item='%20':item); return res.join('').toString();}思路二：
2021-02-16 10:50:03
79
原创 剑指offer——二维数组中的查找
【题目描述】在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。【主要思路】因为二维数组是有序递增的，每一行最左边的元素是最小的，从左到右递增。。用i（行数）,j（列数）来标记元素在当前数组中的位置。若target>array[i][j],说明目标元素比较大，此时应向数组右边移动，所以j++;若这一行所有元素都进行比较之后仍然没有找到与target相等的元素
2021-02-16 10:29:40
74
原创 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopclientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于in
2021-02-14 21:23:03
99
原创 js获取css属性值的方法
js操作获取dom元素的样式属性值obj.style: 只能获取行内属性，而无法获取定义在<style type="text/css">里面的属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-02-14 20:45:00
2272
1
原创 css计数器之小案例
css计数器counter-reset:counterName //创建或重置计数器counter-increment:counterName //递增变量content:插入生成的内容 //一般和伪类 ::before或::after搭配使用counter(counterName)或counters(函数) //将计数器的值添加到元素先展示效果图，然后下面是代码。虽然看着简单，但用到的知识点蛮多的。最重要的是代码的可扩展性<!DOCTYPE html><html la
2021-02-14 14:42:17
113
转载 [‘1‘,‘2‘,‘3‘].map(parseInt)的结果详解
[1,2,3].map(parseInt); //[1,NaN,NaN]1. map函数将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 [‘1’,‘2’,‘3’].map(parseInt) 就是将字符串1，2，3作为元素；0，1，2作为下标分别调用 parseInt 函数。即分别求出 parseInt(‘1’,0), parseInt(‘2’,1), parseInt(‘3’,2)的结果。2. parseInt函数（重点）概念：以第二个参数为基数来解析第一个参数字符串，通常用来做
2021-02-14 10:52:54
386
1
原创 对Promise的个人理解
Promiselet promise=new Promise(function(resolve,reject){ // resolve函数是当promise状态由pending转为fulfilled时执行 // reject函数是promise状态由pending转为rejected时执行 // 只有当resolve或reject函数执行之后，此时promise的状态才发生变化，才能执行promise.then或promise.catch方法，且将resol
2021-01-30 12:16:04
153
原创 ajax和jQuery封装的ajax
ajax和jQuery封装的ajaxajax:异步的javascript和xml// 1.创建AJAX实例对象let xhr ;if(window.XMLHttpRequest){ xhr=new XMLHttpRequest;}else{ //为了兼容IE5、6 xhr=new ActiveXObject('Microsoft.XMLHTTP');}// 2.打开URL(发送请求前的处理)xhr.open(method, url, async); //true 为异
2021-01-30 08:30:23
79
原创 Vue异步更新和nextTick的源码分析
Vue异步更新和nextTickVue是异步更新的。如果Vue中对一个Dom同时进行添加和删除的操作，这个时候到底该渲染哪一个呢？如果对于一个属性短时间内修改很多次，但我们只需要最后修改的结果。如果是同步更新，那每修改一次，就会重新渲染一次，这样就会渲染很多次（浪费性能），所以为了上面的各种问题以及性能方面，Vue是异步更新的。Vue的异步更新可以通过Vue.nextTick（vm.$nextTick）实现。Vue.nextTick和vm.$nextTick的唯一区别是回调函数中的this会自动绑
2021-01-26 13:17:10
134
原创 超详细的EventLoop过程讲解
超详细的EventLoop过程讲解EventLoop的主要过程：首先我们需要知道js是单线程的，是基于事件循环。1. 在主线程执行同步任务的时候，会形成一个执行栈； 2. 当主线程执行完执行栈中的同步任务，会先去执行微任务队列，执行过程中遇到微任务，直接放在队列的最后，直到执行完当前的微任务； 3. 然后主线程去执行宏任务队列中的一个事件（如果最先来的事件还没返回结果，那就去看第二先来的事件是否准备就绪，如果准备就绪就先执行它，否则继续向下找）；在处理宏任务的过程中遇到微任务，会放入微任务队列中， 4
2021-01-26 09:11:03
1983
1
原创 es6之map和set
es6之map和setes6新提供了两种数据结构map和set,都可以用来保存键值对。Map:map 的key不仅可以是字符串，也可以是其他类型的值，包括对象。由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：map的方法 map.size 属性 map.keys()//返回所有key map.values();//返回所有value map.set(key,value)//添加 map.has(key) //返回boo
2021-01-21 11:48:35
108
原创 多数元素
多数元素Leetcode169 简单题目描述：给定一个大小为 n 的数组，找到其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。思路：抵消思想(摩尔投票法)，哈哈哈，想到了动物世界里面李易峰帅气的推理。回归正题，定义变量count=1，temp=arr[0],temp作为比较数之一，一直和数组中的其他元素进行比较。从数组第二个元素开始比较，如果与temp相同，则count+1,若不同则count-1; 当c
2021-01-21 10:51:22
128
原创 只出现一次的数字
只出现一次的数字leetcode136题目描述：给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。//js的indexOf和lastIndexOf()方法var singleNumber = function(nums) { for(let i=0,len=nums.length;i<len;i++){ if(nums.indexOf(nums[i])==nums.lastIndexOf(nums[i])){
2021-01-20 22:18:01
52
转载 background-image和img的区别
background-image 和 <img/>的区别1. 是否占位background-image是背景图片，是css的一个样式，不占位；<img />是一个块状元素，它是一个图片，是html的一个标签，占位；2. 是否可操作（1）background-image是只能看的，只能设置如下属性：background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义的位置图层；background-attac
2021-01-20 10:18:18
3062
原创 vuex
vuexstate: 存放公用数据mutations：存放store中提供用来改变state中属性的一些函数。1.通过commit触发； this.$store.commit('mutation中的函数名'，传给options的参数) 2.mutations中的函数原则上必须是同步函数actions：存放的是一些用来处理异步操作的函数，但是这些函数要修改state中的数据必须通过mutations中的函数。actions中的函数通过dispatch触发this.$store.dis
2021-01-18 18:30:59
48
原创 vue组件通信
vue组件通信父子通信兄弟通信跨级通信父子通信：最常见的方法是 父传子，子组件通过props接收传递过来的数据，子组件传递给父组件数据是通过this.$emit触发相应事件并传递数据。父子通信还可以通过 this.$parent 和this.$children直接得到对应组件的实例。可以通过 给组件添加ref=“name”属性，然后利用this.$refs.name 直接获取对应的组件对象。2、3方法都是可以直接获得组件对象，且只能用于父子之间的通信。兄弟通信和跨级通信通过e
2021-01-18 11:31:06
139
1
原创 Vue.use和mixin
Vue.use解析//main.js import myPlugin from './components/myPlugin/index' //引入插件Vue.use(myPlugin) //默认调用myPlugin里面的install方法，如果没有则直接执行install函数//index.js//1. 插件是一个对象，有install方法export default { install(_){ // console.log(_); //就是Vue类
2021-01-18 10:32:10
732
原创 动态组件和 keep-alive
动态组件和 keep-alive//组件一<template> <div> 组件一 <input type="text" /> <input type="text" /> </div></template><script>export default { name: "cona", data() { return {}; },};</script>
2021-01-16 21:39:41
151
原创 vue之自定义指令
vue之自定义指令全局自定义指令局部自定义指令自定义指令钩子函数 ：bind(第一次绑定时触发，只调用一次)unbind：只调用一次，指令与元素解绑时调用inserted (被绑定元素插入父节点时调用) ，父节点一定存在，但不能保证已经插入文档中。update ：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated(指令所在vNode及其子v
2021-01-16 20:39:16
58
转载 js之EventBus
EventBus许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。对于vue来说，存在着父子组件、兄弟组件、跨级组件之间的通信问题。在Vue中组件之间的通讯有一定的原则。父子组件通信原则：为了提高组件的独立性与重用性，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。如此确保每个组件都是独立在
2021-01-16 19:10:18
3409
原创 js实现二叉树的先序，中序，后序遍历，采用递归和非递归两种方法。
js实现二叉树的先序、中序、后序遍历，采用递归和非递归方法递归方法实现：function TreeNode(x){ this.val=val; this.left=null; this.right=null;}// 递归方法function threeOrders(root){ let preArray=[],middleArray=[],lastArray=[]; //先序遍历：根、左、右 function preOrder(root){
2021-01-16 13:08:35
970
2
原创 js之function与object的原型链关系
js之function与object的原型链关系自己第一次用xmind画的图，比较丑。看红宝书的时候看到创建对象的几种方式时，突然想到这个，顺手划一波。 //构造函数模式 function Person(name,age){ this.name=name; this.age=age; this.getName=function(){ return this.name } } let p1=ne
2021-01-16 09:51:47
281
2
原创 合并两个有序整数数组
合并两个有序整数数组为一个数组。用js实现。已知有序数组A和B，返回合并后的有序数组res。主要思想是 先比较A和B的最后一个元素，将较大的元素放入res的最后一位，同时将该元素所在的数组长度减一。一直循环，直到某个数组长度为零为止。 此时，还需要判断另外一个数组是否长度为零，若不为零，则也将其全部放入res中。 // 合并两个有序数组 function merge(A, B) { let m = A.length, n = B.length;
2021-01-15 20:46:40
546
原创 高度塌陷解决方法和BFC
高度塌陷的原因及解决方法父元素没有设置高度（自适应子元素的高度），当子元素脱离文档流的时候（设置float属性或者设置positon为absolute或fixed时），就会造成父元素的高度塌陷问题。解决方案：给父元素添加高度，违背初衷，不推荐。触发BFCBFC（block formatting context）:块级格式化上下文。BFC有一个特性，计算其高度时，浮动元素也参与计算。BFC元素是一个独立的容器，容器里面的子元素不会影响到外面的元素。具体内容请参考这篇博客 触发BFC的五种方法：
2021-01-10 12:25:49
213
1
原创 三栏布局（高度已知，中间自适应）
三栏自适应布局使用float属性 .left{ float: left; width: 200px; height: 200px; background-color: pink; } .center{ margin-left: 200px; height:200px; background
2021-01-10 09:37:33
160
原创 css关于垂直居中的几种常见方法
css关于垂直居中的几种方法不知道子元素的宽度和高度的情况下，1.可以通过“子绝父相”的规则 .parent { background-color: red; width: 300px; height: 500px; position: relative; } .son { background-color: pink;
2021-01-10 08:25:19
110
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人