- 博客(45)
- 收藏
- 关注
RSS订阅原创 ES6解构
什么叫做解构？从数组和对象中提取值，对变量进行赋值，称为解构 ；1.数组解构let arr = [1,2];var a = arr[0];var b = arr[1];console.log(a,b);`输出结果：1 2``2.对象解构 let obj = { name:'zs', age:20, x:'aaa', y:'bbb' } let { x,y } =
2021-08-25 09:14:47
198
原创 react父子组件传值应用-将军调兵
效果图：分析：我们可以这样想，总组件Main包含两个士兵子组件，通过父组件向子组件传值来确定是哪个将军，士兵数量在state中存值，在setState中修改，通过调用父组件中的方法进行调兵工作，同时，父组件中“剩余士兵的数量”也跟着减少，当调兵的数量大于剩余士兵数量值时，浏览器提示：“士兵数量不足1”代码： //总组件Main class Main extends R...
2020-01-14 07:41:46
216
原创 react中获取input输入框中的值
ref【官方推荐O(∩_∩)O】 class Main extends React.Component{ render(){ return ( <div> <input type="text" ref={(input)...
2020-01-09 15:52:08
3145
原创 react中定义组件的两种方法【函数方式、class方式】
一、函数方式函数方式定义组件时，需注意以下几点：组件名开头大写只能有一个根元素标签要闭合获取开始和闭合标签的内容要用 props.children（pops值不能修改）const Welcome = (props)=>{ return( <div> <h1>...
2020-01-09 10:31:01
2492
原创 vue-router： params和query传参的区别
代码上来看query要用path来引入，params要用name来引入，接收参数都是类似的，分别this.$ route.query.name 和 this.$route.params.name<router-link :to="{path:'/mine',query:{id:777,name:'小赵'}}">Mine-query</router-link>|<...
2019-09-21 17:57:28
231
原创 JS中必须要懂的面试题（1）
1.java和JavaScript有什么不同（注：oop：面向对象）javaJavaScriptjava是一种oop编程语言JavaScript是一种oop脚本语言它创建在虚拟机或者浏览器中运行的应用程序代码在浏览器或者node环境中运行需要编译java代码js代码都是文本形式2.什么是JavaScript？JavaScript是一种面向对象的脚本语...
2019-09-04 21:13:53
156
原创 常见的git指令
删除文件git rm filenamegit commit -m "remove a file"Git 分支查看分支：git branch创建分支：git branch <name>切换分支：git checkout <name>创建+切换分支：git checkout -b <name>合并某分支到当前分支：git merge <nam...
2019-09-02 22:16:42
192
原创 那些年，你需要知道的AJAX
什么是AJAX？AJAX = 异步JavaScript 和 XML,它是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以不重新加载整个网页的情况下，对页面的某部分进行更新，传统的网页如果需要更新内容，必须加载整个页面，有很多AJAX的应用程序案例：新浪微博、Google地图、开心网等；AJAX的工作原理1.创建 XMLHtt...
2019-08-28 14:40:49
139
原创 原生继承和ES6中的继承
在原生中的继承，例子如下：function Person(name,age){ this.name = name; this.age = age; }Person.prototype.say = function(){ console.log('我是'+this.name); }类 构造函数，属性写在构造函数中，方法写在原型下；现有一个Code...
2019-08-27 10:11:41
205
原创 CSS布局——左侧固定，右侧自适应
1.弹性盒模型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2019-08-19 13:28:28
269
1
原创 css3中增添了哪些重要新特性(面试必问)
一.选择器css3中有元素选择器、关系选择符、属性选择符、伪类、伪元素1.元素选择器* E E#id E.class2.关系选择符E F 包含选择符 CSS1 选择所有被E元素包含的F元素。E>F 子选择符 CSS2 选择所有作为E元素的子元素F。E+F 相邻选择符 CSS2 选择紧贴在E元素之后F元素。E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F。...
2019-08-17 21:11:03
354
原创 vue中存在的面试题
v-model是什么？怎么使用？ vue中标签怎么绑定事件？可以实现双向绑定,绑定事件：<input @click=fn()/>mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？一个model+view+viewModel框架。区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷请说下封装 vue 组件的...
2019-08-15 17:37:11
174
原创 ES6新增特性
1.let和const点击此处-上一篇我的博客中提到，在这里就不加描述了❤~2.解构从数组和对象中提取值，对变量进行赋值，称为解构；数组解构let arr = [1,2];let [a,b] = arr;console.log(a,b);//1,2对象解构.let obj = { name:'阿z'， age:18, x:'aaa', y:'bbb'} let {...
2019-08-12 22:12:05
595
原创 ES6 数组去重
①function fn(arr){ return [...new Set(arr)]}console.log( fn([1,2,3,4,3,5,5,6,7]) );②function fn(arr){ let result = []; arr.forEach(function(val){ if(!result.includes(val)){ result.push(v...
2019-08-09 21:14:08
377
1
原创 变量互换的几种方法
例：变量a = 5,b = 6,实现a和b互换；1.解构法解构：从数组和对象中提取值，对变量进行赋值，称为解构；`let a = 5;let b = 6;[a,b] = [b,a];console.log(a,b);//6,52.中间值法let a = 5;let b = 6;let c = a;a = b;b = c;console.log(a,b);2.不知名法...
2019-08-08 19:45:57
678
原创 let和const
const其中四条特点与let相同：1.const没有变量提升2.const不能重复命名3.块级作用域 (花括号里面)4.临时失效区 (暂时性死区) 当前作用域不允许同名变量进来5.const定义常量 不可以修改6.引用数据类型 地址不能修改 内容可以修改 <script> const a = 10; a = 20; ...
2019-08-06 17:35:10
195
原创 ES6 let和var的区别
1.let没有变量提升console.log(a);//Cannot access 'a' before initializationlet a = 10;而var有变量提升，如下代码相当于定义了变量b，并没有给其赋值；console.log(b);//undefinedvar b = 5;*相当于：*var b;console.log(b);b = 5;2.let不能重复...
2019-08-06 17:15:11
180
原创 原生JS与jQuery操作DOM对比
一.创建节点元素1.1 原生JS创建节点document.createElement(' p');1.2 jQuery创建元素节点$('<p></p>');二、创建并添加文本节点2.1 原生JS创建文本节点document.createTextNode("Text Content");通常创建文本节点和创建元素节点配合使用，比如：var textEl...
2019-08-04 20:43:17
395
原创 jquery实现选项卡(超级简便)
*之前文章里有写到选项卡，上一个使用JS写的，这次用jquery写的，与之前大不相同的是，jquery语言简便，代码量少，易懂！测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
2019-08-03 13:13:12
357
原创 jquery中的位置方法offset () 、offsetParent ()、position () 的区别与使用
ps:这三个位置属性不接受任何参数1.position():获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 注：offset parent指离该元素最近的而且被定位过的祖先元素 )2.offset():在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于document。3.offsetParent():取得离指定元素最近的含有定位信息的祖先元素。...
2019-08-01 20:23:04
569
原创 JS实现字符串倒置
昨天，听了一个大三学姐的面试，面试官问了下面这道题，与大家分享下~实现字符串倒置听到这道题，超级兴奋！！！因为我会哈哈哈哈！我的想法是先给字符串转换成数组（字符串下的方法split() ），再用数组下的方法reverse() 来实现倒置,具体JS代码实现如下： <script> var str = "abcdefghi"; arr = st...
2019-07-31 21:49:13
1689
原创 CSS布局——实现元素水平垂直都居中（常用方法）
1.定位法测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
2019-07-31 20:34:14
341
原创 CSS3实现旋转立方体特效
测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-07-29 19:31:18
268
原创 JS改变this指向方法bind使用
前文中提到的改变this指向的三种方法，想必大家对最后一种方法有疑问，bind需要手动调用为什还用呢？直接用前边两种方法不就好了，这种想法是大错特错的！call和apply在下列情况就用不了啦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...
2019-07-29 13:16:31
1632
原创 js如何改变this指向（含三种方法详细介绍）
在前文中提到this指向问题 怎样改变this指向呢 以下三种方法均可改变this指向1.call()第一个参数：this指向如果要传参，后面依次是参数，例：function fn(x,y){ console.log(this); } var obj = { name:"zs" } ...
2019-07-29 13:01:56
5136
原创 JS实现下落的树叶特效
用以上四种树叶图片在页面中随机生成大小、位置、下落速度不同的特效，点击页面任何位置，实现下落效果。具体代码如下：测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
2019-07-27 19:02:57
2588
原创 JS this指向问题
1.定时器中：this ->windowsetInterval(function(){ *this* },10)2.函数中：this ->windowfunction a(){ console.log(*this*); } a();3. this -> oDiv 对...
2019-07-27 18:42:11
134
原创 JS垂直导航菜单栏
测试代码：方法1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
2019-07-27 12:37:13
2454
1
原创 JS实现滑动轮播图
<!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-U...
2019-07-25 20:29:21
2347
原创 JS实现放大镜效果[淘宝物品放大详情]
测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-07-25 12:02:28
298
1
原创 事件委托
1.后生成元素的绑定问题2.绑定的事件少将事件绑定在父元素身上，点击子元素的时候回发生事件冒泡 ，触发父元素的点击事件，通过事件源(e.target) 判断是否是要绑定事件的子元素，执行相应的处理函数测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-07-25 09:00:01
116
原创 事件冒泡和捕获
<!-- 事件流 冒泡 从里向外 捕获 从外向里（ie不支持 ） 既有捕获 又有冒泡 先捕获 后冒泡（先从外到里 再从里向外）-->测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2019-07-25 08:41:41
297
原创 JS 绑定事件(一个事件源有不同事件处理方法)
方法：addEventListener(“事件操作”，“事件处理函数”，false) //最后一个参数一般默认值为false测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
2019-07-24 22:52:45
603
原创 JS阻止事件冒泡
不同浏览器下怎样阻止事件冒泡：标准浏览器下：e.stopPropagation();ie浏览器下：e.cancelBubble = true;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten...
2019-07-24 22:37:17
403
转载 码~ps基本概念知识
Photoshop基本概念知识 Photoshop：它是由Adobe公司开发的图形处理系列软件之一，主要应用于在图像处理、广告设计的一个电脑软件。最先它只是在Apple机（MAC）上使用，后来也开发出了for window的版本。下面是这个软件里一些基本的概念。 位图：又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的"像素"组成的图形。由其位置与颜色值表示，能...
2018-12-14 00:45:19
1038
原创 CSS3：弹性盒模型
设置一个div里面有两个子div 分别给父类div和子类div设置样式 必须在父类div中加上display:-webkit-flex;flex-grow:才能在子类div中使用 具体作用是当给父类div设置宽高时，子类div可以通过flex-grow来分配父类div几分，具体代码如下：尽管没有给子类div设置宽，但是结果子类被分配了：第一个div 500*4/5 =400的宽，...
2018-12-14 00:30:53
331
原创 零基础教你做右键点击菜单~
先来看一下效果图：先设置简单的css样式 通过oncontextmenu来设置右键单击出现菜单，在document中右键单击，所以是document的oncontextmenu 绑定事件 右键单击时触发事件➡把none的菜单先block 然后通过client来获取鼠标左边/上边的距离 点击菜单中某一项触发事件 让菜单none console.log(this.innerHTML)...
2018-12-12 01:08:35
224
原创 JS:返回所有class名为a的元素数组
自定义了一个方法 可以选中所有class名为a的数组，给其设置样式。具体代码如下效果图：是不是和你想的一样了呢~快来实践吧！嘻嘻~
2018-12-11 23:27:44
1807
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人