u012148262的博客

原创 js 的for in

 for-in 一般用来遍历对象, 也可以用来遍历数组var obj = { name: "xiaoming", age: 8};for(var k in obj) { // 此处使用 点运算符，不能获取到相应的值： // . 的作用：访问对象的属性 console.log("键为：" + k + ", 值为：" + obj[k]);}va...

原创 前端文件上传下载功能小记

vue用得顺手，就不想别的了1、首先是上传，element框架用before-upload来判断文件类型和大小，返回true或false判断是否上传，很方便。上传成功和失败的钩子就不说了。 2、接下来是下载加个按钮，可以用window.open（接口地址+文件名，打开新窗口下载）也可以用window.location.href = 接口地址+文件名（本页面下载）...

转载 Javascript 中的 && 和 || 使用小结

在 javascript 中，对于 && 不仅仅可以用于 boolean 类型，也不仅仅返回 Boolean 类型的结果。 l 如果第一个操作数是 Boolean 类型，而且值为 false ，那么直接返回 false。 l 如果第一个操作数是 Boolean 类型，而且值为 true，另外一个操作数是 object 类型，那么将返回这个对象。 l 如果两个操作数都是 obj...

原创 es6 filter不生效问题记录

list.filter(isSearched(pattern))......这么一段代码，filter后list始终是空的，后来才发现const isSearched = searchTerm => item => //console.log("title:" + item.title + "----searchTerm:" + searchTerm); /...

转载 es6对象

1、写法：允许在对象中直接写变量，这时，属性名为变量名，属性值为变量值。function f(x, y) { return {x, y};}// 等同于function f(x, y) { return {x: x, y: y};}f(1, 2) // Object {x: 1, y: 2} 2、object.assign（）用于对象的合并（可枚举）...

转载 ES6函数

1、扩展运算符：将一个数组转为用逗号分隔的参数序列 应用：1、复制数组const a1 = [1, 2];// 写法一const a2 = [...a1];// 写法二const [...a2] = a1; 2、合并数组3、与解构赋值结合4、只要具有iterator接口的，都可以用扩展运算符  2、Array.from（）：用于将两类对象转为真正的...

转载 es6函数参数

1、参数作用域一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。2、rest参数ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入...

原创 js对象（封装、继承）

1、原始模式　var Cat = {　　　　name : '',　　　　color : ''   } var cat1 = {}; // 创建一个空对象cat1.name = "大毛"; // 按照原型对象的属性赋值cat1.color = "黄色"; 这样有两个缺点，一是如果生成多个实例，写起来很麻烦，二是实例与原型看起来没有什么联系。   2...

原创 几种不应该使用的JS语法

这几天在看阮一峰的博客，发现一大神精华笔记，十分兴奋，记录一下收获。1、== ==会自动进行类型转换，规则十分难记，尽量使用全等，===和！==  2、在Javascript中定义一个函数，有两种写法：　　function foo() { }和　　var foo = function () { }两种写法完全等价。但是在解析的时候，前一种写法会被解析器自动提...

原创 JS hoisting（js提升机制）

最近在研究这个，做一下笔记。Javascript Hoisting：In javascript, every variable declaration is hoisted to the top of its declaration context.概念：在Javascript语言中，变量的声明(注意不包含变量初始化）会被提升（置顶）到声明所在的上下文。例如：输出并不是111 ...

原创 JS数字转字符串，字符串转数字

//--------------------字符串转数字---------------------------    var s = "234";    //1、纯数字转换    //字符串在运算操作中会被当做数字类型来处理    s *= 1;    //2 字符前加“+”    console.log(+s);    //string的两个转换函数，只对string有...

原创 2018625笔记数组和字符串转换相关

一、用字符连接数组.join（“字符”）；二、$nextTick 的作用_this.$nextTick(function () { _this.getXsFwSxMenu();});官方：$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，这样一看有点懵，看个实例就理解了。...

原创 使用webpack遇到的一些坑

首先，点击率很高的“学习webpack看这一篇就够了”，个人建议还是算了。。。云里雾里的，条理很不清晰，不如直接看官方guide。我参考的是一篇rails365的文章：https://www.rails365.net/articles/webpack-3-ling-ji-chu-ru-men-jiao-cheng-3-shi-xian-hello-world条理清晰很多，但是无奈技术更新快，有些地...

原创 vue+echart多图表动态自适应实现

一、首先全局定义表格对象：二、绑定和设置：如果直接跟window.onresize = myChart.resize会导致只有一个成功，因为直接调用的话后面的会覆盖。三、监听：

原创 elementUI行高设置

手册上没有找到设置行高的参数。默认都是40，只能修改框架，或者单独在元素加一个class，把其下所有列高都设置为自己想要的值。

原创 jq，hover，mouseover，mouseenter

一、mouseover和mouseenter区别：over：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。enter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。二、hover：hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。注意: 如果只指定一个函数，则 mou...

原创 jq函数使用、渐变实现、$()使用

一、jq函数使用二、渐变实现实在是太爽了三、$()使用1.    DOM选择2.    DOM创建3.    DOM加载完成

原创 列表，更多，显示下拉菜单的使用，z-index

今天想做一个hover显示下拉菜单的功能，发现上面div怎么都覆盖不了下面列表：z-index：当你定义的CSS中有position属性值为absolute、relative或fixed, 用z-index此取值方可生效。...

原创 记录一下两个inline-block的上下偏移问题

首先，inline的高度是由font-size决定的。当转换为inline-block的时候，如果没有脱离文档流，其文档线依旧存在。如图：左元素text-align=middle。右端inline-block无元素，高度设置为63，导致左元素偏移。再如图：加入元素，导致的右元素偏移

原创 CSS外级hover改变內级元素的display应用

太棒棒了。。不用写js。。。

原创 仅空白的文本节点解决

今天用em做点的时候，换行产生了，仅空白的文本节点。解决方法：1.margin-left = -5；2.代码不要换行。

原创 关于获取窗口滚动事件

今天写了个导航吸顶的功能，但是一开始怎么都没有触发。来记录一下问题所在。DOM 是为了操作文档出现的 API，document 是其的一个对象；BOM 是为了操作浏览器出现的 API，window 是其的一个对象。第一个方法卸载document.ready里。这两种写法可以正常获取。

原创 border属性对元素实际width的影响总结

今天遇到一个问题。块A包裹块B，明明在B设置了margin-bottom：12px。为什么A的高还是不变？然而，在给A设置了border-bottom后。A的高就如期待的一样了，59+12=71px 。这是为什么。首先知识点1：box-sizing默认是content-box，即实际width=设置width+边框+间距。如果设置为border-box，paddin

原创 包围元素（如div）视觉上包围浮动元素

1.添加新元素.clear{ clear：both；}2.浮动容器（不建议）3.伪类添加新内容（建议）.box : after{content: "" ;clear : both ;display：block；}4.overflow：hidden；

原创 margin为负值的应用

一、对自身的影响当元素没有width或width为auto的时候，设置负值会让增加其自身宽度。注意：margin-right也会增加宽度。margin-top为负值不会增加高度，只会产生向上位移。margin-bottom为负值不会产生位移，会减少自身的供css读取的高度，显示正常。二、对文档流的影响不会破坏文档流，后面的元素会紧贴补位。

原创 链接内的图片与文字对齐问题（图片链接莫名底部有空白问题）

今天想做一个链接形的天气预报，里面包括图片和文字。却发现怎么设置都有些怪异。一开始还以为是文字的居中没有做好，但设置span的line-height还是不行。后来才发现，需要设置img的vertical-align，这个属性直接影响了整体。

原创 背景颜色+背景图。边框设置

想做出一种效果，链接上有背景图，鼠标移动到链接上，链接背景颜色变白色。使用jq设置css("background","url（...）")和css（“background”，“white”）发现会直接覆盖。上网一查，需要把background-image和background-color 属性分开设置。设置各边不同的边框：border: rgba(0, 0, 0,

原创 float的一个应用，顶部带下拉框导航栏

之前学习float的时候感受没那么深。今天想模仿腾讯新闻首页做一个顶部带下拉框的导航栏。理解更进了一步。1.如果“更多”不用float。下拉框一弹出就会影响整体高度，导致整体位移。2.如果只是更多使用float，其他不使用。最左还是会有一个空位出来，还是会位移。所以解决的办法是都分别使用float。3.是否加框为前5个元素加框，除了可以少设置float：left以外。

原创 line-height，div文字居中

首先要了解几个概念。lineheight 行高指的是多行文本中线之间的距离应用：

原创 position属性的特点和应用

static：默认值，正常生成矩形框，作为文档流的一部分。relative：相对原文档流中正常位置的偏移。但原先的占位依旧存在。absolute：从文档流中删除，并相对于其包含流定位。包含块可能是文档的另一个元素或初始包含块。原先文档流中的空间会关闭。fixed：和absolute类似，但是相对于浏览器窗口的绝对定位。

原创 CSS学习总结2-float应用场景

1.想实现文字环绕效果。2.为了让块级元素并排。

原创 CSS学习总结1-块元素与内联元素

区别：块级元素：1.总是独占一行2.高度默认为0，由内容决定。宽度与父元素相同。3.宽高、内外边距都可控制。内联：1.和相邻元素在同一行2.宽高（width和height属性）、内外边距的上下（注意只是上下，左右还是可以设置的）都不可改变。例如：假如没有，a是没有高度的，假如有了，则a的高度由fone-size决定。而不是height，因为他

原创 $(document).ready和window.onload、<body onload=”load()”> 小结

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，文档树加载完不代表全部文件加载完）。而window.onload（）是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.o

原创 表单中的按钮问题、jQuery选择器优化效率问题

一、表单中有一旦点击就会提交表单，要给加上type=“button”属性。二、1.  Duplicated jQuery selector 两处使用了同一个id选择器，JQuery建议使用一个变量去存储这个选择器，而不是每次用的时候便拿来调用一下，它不会帮你做缓存，而是重新去取。可以参考StackOverflow上的回答：https://stackoverflow.com/questions/16

原创 JS修改伪元素

今天想模仿知乎首页做出输入为空时placeholder颜色变红的效果。发现用这种直接设置的方法无效。一查资料，发现其实：伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JS无法直接操作它。而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。那只能通过插入代码或添加切换class的方式来了。一、插入代码：$("head")

原创 绝对路径和相对路径

今天把各类文件分别放进文件夹的时候出现了样式文件无法载入的问题。原因是我习惯在样式引用的时候像linux文件那样先加个/，webstorm不会报错，但浏览器找不到。现在来总结一下。

转载 js中的==和===

原创 JS笔记

一、一些常见功能document.write("This is a heading");onclick="myFunction()">Try itfunction myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}二、js对大小写敏感三、

原创 关于修复bug

一：一些常见问题1.打字和语法错误2.特殊性和分类次序问题。理解不到位。如：3.外边距叠加二：寻找问题的一些方法1.添加边框、添加效果、bug效果扩大化。看到后面发现见仁见智，再说吧，具体情况具体分析

原创 布局笔记166

一、固定宽度布局。二、流式布局：相对浏览器宽度来设置元素宽度。%三、弹性布局：相对于字号来设置元素的宽度。em流式或弹性布局，布局宽度减少时，固定宽度的图像会产生强烈影响。解决方法：1.使用背景图像而不是图像元素。#branding{ height：  background：url（/img/branding.png）no-repeat left top}2.如果是图像