YLXB2的博客

原创 vue实现菜单权限控制

思路：思路：具体步骤

原创 postMessage解决前端跨域问题

我遇到的跨域问题：iframe的父子窗口传递数据和方法调用无效；解决方案：postMessage；postMessage：html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案；父窗口传递数据给子窗口，并调用子窗口的method：子窗口传递数据给父窗口，并调用父窗口的method：跨域请求的返回（父子页面都通用）：...

原创 英语备考资料免费获取（四六级和考研）

学姐在备考英语过程中踩过不少坑，最后还是都过了，现在我把自己整理的资料分享给大家，希望大家少踩坑，多考分，顺利通过考试。百度网盘链接：https://pan.baidu.com/s/1MbJXqHkFkfzeSpI_ScR3Ow提取码：sg3d...

原创 javascript学习基础

原创 前端面试-JavaScript

原创 前端面试-Vue

原创 前端面试-HTML5

原创 前端面试-JavaScript

原创 前端面试-CSS

原创 前端面试-HTML

原创 this的指向

作为对象的方法调用 当函数作为对象的方法被调用时，this指向该对象。 var a = { b:1, getB:function(){ console.log(this.b) //输出: 1 }}a.getB()作为普通函数调用 当函数不作为对象的属性被调用，也就是普通函数方式，thi...

原创 jQuery.change()

jQuery.change()描述：JavaScript 的 "change" 事件绑定一个处理函数，或者触发元素上的 "change" 事件。参数：Function()，当change事件出发时执行一个函数； obj和Function（），obj对象包含的数据键值对映射将被传递给事件处理程序（Function()）； 无参数。触发...

原创 js的getBoundingClientRect()

getBoundingClientRect()：获取元素位置，该方法没有参数。<div id="box"></div>var object=document.getElementById('box');Var rectObject = object.getBoundingClientRect();rectObject.top：元素上边到视窗上边的距离;...

原创 jQuery.extend()

jQuery.extend( target，obj1 ，obj2)描述: 将两个或更多对象的内容合并到第一个对象。参数：一个参数，jQuery对象本身被默认为目标对象。这样可以在jQuery的命名空间下添加新的功能； 多个参数（两个或多个对象），对象的所有属性都添加到目标对象。注意：使用jQuery.extend时，目标对象（第一个参数）将被修改，并且将通过$...

原创 jQuery中this与$(this)的区别

$()的作用：1.传入一个选择器字符串，获取选择器对应的DOM的内容,保存在数组中，也就是所说的jquery对象。例如：`$('.class') 、$('#id‘)、$('tag')`2.传入一个匿名函数，该匿名函数在页面加载完毕后执行。`$(function(){})`3.将javascript对象包装成jquery对象。例如：`$(this),$({a:1,b:2})` 使...

原创 实现页面跟随可视窗口缩放

1.使用：vh、vw和flexhtml：<div class="contents"> <div class="content left">left</div> <div class="content center">center</div> <div class="content ...

原创 Vue组件间的传值

Vue父子组件间的通信：props、ref、ref、ref、emit通过prop实现通信静态传值：父组件调用子组件时绑定属性： 子组件通过props接受父组件传递来的数据props:['title'] or props:{title:String}动态传值：父组件调用子组件时绑定属性： 子组件通过props接受父组件传...

原创 Vue中的计算属性（computed）与侦听属性（Watch）

computed计算属性：当依赖的属性的值发生变化时，计算属性会重新计算，否则使用缓存中的属性值。功能：双向绑定、缓存值、分离逻辑基本用法：computed: { rooms(){ return this.$store.state.rooms1 } }//当vuex里面的rooms1变化，那么计算属性就会响应式地发生变化，重新渲染计算属...

原创 事件捕获与事件冒泡

事件：JavaScript和HTML之间的交互是通过事件实现的事件流：描述的是页面接受事件的顺序事件捕获：不太具体的节点先接受到事件，最具体的节点最后接收到事件（顺序：window document html body div）事件冒泡：文档嵌套最深的节点先接收，然后逐级向上传播到不具体的节点（顺序：div body html document window）DOM事件流：包括事件捕获...

原创 JS实现数组去重

1.双循环去重。先将数组的第一个元素赋值给一个新数组，再用两个嵌套的for循环。从数组的第二个元素开始比较该元素与新数组中是否有重复的元素，如果有就跳出当前循环；如果没有就把第二个元素赋值给新的数组。然后从数组的第三个元素又开始，如此循环下去，最后返回新的数组（即去重后的数组）。如果数组很大的话就不是特别建议使用这种方法，因为这样很占内存。let arr = [1,2,2,3,2,5,6]...

原创 JS遍历数组的四种方法

for和for in :访问数组的下标 for(let i=0;i<arr.length;i++){ console.log(i) } for(let item in arr){ console.log(item) } 2.for of:访问数组里面的元素 for(let ...

原创 vue中组件需要.native才能触发原生事件

问题描述：<input@keyup.enter="myClick()"></input><el-input@keyup.enter.native="myClick()"></el-input>以上两个例子都能够通过键盘事件触发myClick()方法，为什么在<el-input></el-input>上需要.n...

原创 promise对象

Promise：是异步编程的一种解决方案，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。参数：两个resolve和rejectresolve：将promise对象从“未完成”变为“成功”reject:将promise对象从“未完成”变为“失败”promise.then(func...

原创 Vue异步加载组件（报错）

异步加载组件：报错：Syntax Error: Unexpected token (10:25)8 | el: ‘#app’,9 | components: {10 | ‘example’: () => import(’./components/example’)| ^11 | }1...

原创 Vue组件间的传值

父子组件传值 父组件调用子组件时动态绑定属性：<v-header v-bind:title="title"></v-header>子组件通过props接受父组件传递来的数据props:['title'] or props:{title:String}子组件直接使用{{title}} 父组件主动获取子组件的值 调用子组件时定义一个ref：<...

转载 CSS清除浮动方法集合

一、浮动产生原因：一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSSfloat浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。简单地说，浮动是因为使用了float:left或float:right或两者都

转载 background-image和img的区别

区别如下：1.  是否占位background-image是背景图片，是css的一个样式，不占位    是一个块状元素，它是一个图片，是html的一个标签，占位2.是否可操作    background-image是只能看的，只能设置background-position, background-attachment,  background-repeat

转载 PHP中include()与require()的区别

PHP中include()与require()的区别1. include有返回值，而require没有。 2. include()包括并运行指定文件 在处理失败时include() 产生一个警告,被导入的程序代码都会被执行，而且这些程序在执行的时候会拥有和源文件中呼叫到include()语句的位置相同的变量范围。你可以导入同一个服务器中的静态页面。3. includ

转载 关于jquery中html()、text()、val()的区别

关于jquery中html()、text()、val()的区别.html()用为读取和修改元素的HTML标签,对应js中的innerHTML .html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素 .text()用来读取或修改元素的纯文本内容  对应js中的innerText  .text()用来读取元素

原创 HTML一个页面头部的大概内容

HTML一个页面头部的大概内容(更新中):1. 规定HTML文档的字符编码2.  用以声明当前页面用chrome内核来渲染.      如果安装了GCF(谷歌内核浏览器框架), 则使用GCF来渲染页面, 如果未安装, 则使用最高版本的IE内核进                                                                    

原创 JavaScript中的几种继承方式

JavaScript中的几种继承方式:一:原型链     让原型对象等于另一个类型的实例.此时,原型对象包含一个指向另一个原型的指针,相应地,另一个原型中也包含着指向另一个构造函数的指针.     function  A(){           this.prototype = true;     }     A.prototype.getAValue = functio

原创 JavaScript中创建对象的几种模式

JavaScript中创建对象的几种模式一:Object构造函数或对象字面量创建单个对象    Object构造函数: var peopel = new Object();                                  peopel.name="Tom";      对象字面量:      var people={

转载 JavaScript判断IE各版本最完美解决方案

IE知道自身毛病很多，于是提供的一套官方的HTML hack方式：// 全部IE版本可见// IE6可见依次等等。这样的写法在其它浏览器里，完全就是一坨注释而直接遭到无视，但在IE里却不会。IE会分析里面的提到的版本号，并根据版本号确定要不要解析里面的DOM元素和文本内容。等一下！DOM元素？那岂不是可以使用js来获取里面的DOM元素？反正谁看到了，谁就是IE！于是，国外大

转载 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的新标签元素的含义在我的博客里有介绍,这里我就不赘述了.HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。以下就介绍几种方式:     第一种方法：Coding JavaScriptif lt IE 9]> (function() { if (! /*@cc_on!@*/ 0) re

转载 CSS透明opacity和IE各版本透明度滤镜filter的准确用法

Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值;opacity取值为1是完全不透明，取值为0是完全透明，只是视觉上看不见。浏览器对opacity属性的兼容性：-ms-filter:   IE8又引入了此特殊的，不过，这种写法的寿命也不长，到IE10已经不再支持。-khtml-opacity:   Safari 1.2之前的版本，是基于khtml的浏

转载 解决html中&nbsp;在不同浏览器中占位大小不统一的问题

解决html中 在不同浏览器中占位大小不统一的问题:    直接在html文档中使用 来表示空格，在不同浏览器中的占位大小是不一样的.因为不同浏览器默认的字体是不一样的，不同字体下的空格表示 占位大小不一致.    解决办法:          我们对 指定使用同样的字体就能让 显示同样的占位了.          经过测试

原创 js或jquery如何获取父级、子级、兄弟元素

js或jquery如何获取父级、子级、兄弟元素原生javascript方法：        var dom = document.getElementById("dom");      dom.childNodes; //获取a的全部子节点      dom.parentNode; //获取a的父节点      dom.nextSibling; //获取a的

转载 用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素的 5 种方法Opacity：    opacity 属性的意思是设置一个元素的透明度。这意味着将 opacity 设为 0 只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，同时它将响应用户交互。此外，元素在读屏软件中不会被隐藏。Visibility：    将visibility的值设为 hidden将隐藏我们的元

转载 对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position、Float属性的一些深入探讨盒子模型在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值

原创 background-image和<img/>的区别

是否占位：background-image是背景图片，是css的一个样式，不占位； 是一个块状元素，它是一个图片，是html的一个标签，占位。是否可操作background-image是只能看的，只能设置background-position, background-attachment,  background-repeat；是一个document对象