2018年11月_muzidigbig

原创 npm安装插件怎么判断是--save(生产) 还是-g 还是--save--dev(开发)

npm敲到一半的时候发现：安装这个插件到底是-g呢还是--save呢还是--save-dev呢，为了上线还有依赖建议在安装插件的时候--save1.首先要先了解package.json在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package...

2018-11-28 13:17:26 2263

原创 js中神奇的Object.defineProperty方法（vue.js 2.0版的双向数据绑定Object.defineProperty方法）

vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。Object.defineProperty() ...

2018-11-27 17:55:18 852

原创 css控制溢出部分显示省略号...

假设一个显示文本的标签，溢出部分自动的显示“...”而不是写死的“...”，效果如下图：直接在文本所在的标签上设置下面样式： overflow: hidden; /*溢出隐藏*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/...

2018-11-27 15:48:01 305

转载 css3 media媒体查询器用法总结及网页布局自适应

随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。优点:无需插件和手机主题,对移动设备友好,能...

2018-11-27 15:23:56 2112

转载 jQuery实现简单分页

纯jQ简单的分页效果！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上代码：<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; c...

2018-11-27 14:54:21 933

原创 vue---router、routes、route的区别

router、routes、route的区别1.router：一般指的是路由实例。如：路由编程式导航的$router.push()2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象3.route：指路由对象。如：this.$route指的就是当前路由对象...

2018-11-27 11:38:00 11339 3

原创 jquery层次选择器：空格 > next() + nextAll() ~ siblings() prev() prevAll() find()的区别

jquery层次选择器jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。1、空格表示获取所有子孙后代元素2、 >表示获取一级子元素3、next函数获取紧接在之后的同辈元素列表4、nextAll函数表示获取之后的所有同辈元素列表5、siblings函数表示获取所有同辈元素列表，无论前后...

2018-11-27 10:41:13 776

转载 jquery---is()用法以及常见的用法

一、基本知识<body> <ul> <li class="li">muzi</li> <li class="li"><strong>digbig</strong></li> &amp

2018-11-27 10:10:01 596

转载 jQuery判断checked的三种方法、单/复选框的的选中方式

.is(":checked") vs .prop("checked") == true　　因此，特地百度了一下，结果如下：　　.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false　　.prop(‘checked’): //1.6+:true/false　　.is(‘:checked’): ...

2018-11-27 09:36:42 1217

转载 jQuery使用最广泛的api

【目录】教程　　一、选择网页元素　　二、改变结果集　　三、链式操作　　四、元素的操作：取值和赋值　　五、元素的操作：移动　　六、元素的操作：复制、删除和创建　　七、工具方法　　八、事件操作　　九、特殊效果【正文】一、选择网页元素jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库...

2018-11-26 16:50:33 148

原创 jquery的$().each和$.each的区别

$(selector).each(function(index,element))这个函数和之前项目里面用到的遍历数据的函数不是同一个呀（项目里面用到的函数：$.each(dataresource,function(index,element))），于是，就好好研究了下，果然在JS里面有两个相似的函数，于是也就有了今天的主题：1.$(selector).each(function(...

2018-11-26 16:16:37 1598

转载 DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别一、DOM对象文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时...

2018-11-26 15:44:41 165

转载 Jquery中.attr()和.data()的区别

Jquery中.attr()和.data()的区别$.attr()和$.data()本质上属于 DOM属性和 Jquery对象属性的区别。Jquery对象属性和DOM属性一个简单的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l

2018-11-26 15:02:21 485

原创事件冒泡以及onmouseenter 、 onmouseover（冒泡）、onmousemove（冒泡）的区别

一. onmouseenter、onmouseoveronmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。该事件通常与 onmouseleave（在鼠标指针离开绑定事件的那个元素上时触发）事件一同使用。onmouseenter 事件类似于 onmouseover 事件。唯一的区别是 onmouseenter 事件不支持冒泡。二. 实例演示onmousemov...

2018-11-23 16:34:31 7763

原创 Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解以及数组中查询某值是否存在

1.jquery grep()筛选遍历数组(可以得到反转的数组)// 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) => { return curre...

2018-11-23 11:18:33 1523

原创 jQuery---操作 radio、checkbox、select（select中options的属性）

一、jQuery---操作 radio补充知识：二、jQuery---操作 checkbox<body> <div class="checkbox"> <input type="checkbox" name="checkbox_name" id="handlAll" value="#"&g

2018-11-19 22:12:18 799

原创 JavaScript--查看代码运行效率console.time()与console.timeEnd()用法

程序运行时间计算：注意：测试代码运行时间的话console.time()与console.timeEnd()要一起使用，这是一个组合；这两个之间的代码就是要运行测试程序的时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&amp

2018-11-19 11:02:11 714

转载即学即用：网页常用的防复制代码

最牛的防复制代码1.将此代码粘贴到body中可以有效防选中防复制和防鼠标右键<script type="text/javascript"> document.body.oncontextmenu = document.body.ondragstart = document.body.onselectstart = document.bod...

2018-11-19 09:44:53 4042

原创 js中的reduce()函数

定义：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。案例1.数组求和 // 1.数组求和 var arr = [1,5,8,6,15,78,65,25,48,55] var sum = arr.reduce(function(total,currentValue){ ...

2018-11-17 11:42:17 522

一、有时候的根据需求计算数组中某个元素重复出现的个数var arr = ["apple","orange","apple","orange","pear","orange"];计算出来重复出现的元素个数：{apple: 2, orange: 3, pear: 1}二、代码实现 //统计一个数组中有多少个不重复的单词： // 不用reduce时： var arr = ["apple","orange","apple","orange","pear","orange"]

2018-11-17 11:30:28 22415 7

原创 highCharts提示框中显示时间

一、项目需求提示框中需要显示当前时间（常规的提示并不能达到这种效果）样式二、知识点highCharts图表tooltip属性中有一个formatter属性formatter: function() {……} 提示框内容格式化回调函数，返回 false 可以针对某个点或数据列关闭提示框，该函数里可以执行复杂的逻辑来返回需要的内容。三、代码 shared: true,//当提...

2018-11-16 18:00:11 1276

原创 input时间表单默认样式修改（input[type="date"]）

一、时间选择的种类:HTML代码：选择日期：<input type="date" value="2018-11-15" />选择时间：<input type="time" value="22:52" />选择星期：<input type="week" />选择月份：<input type=

2018-11-15 13:12:42 62512 2

原创 js--数组去重

一、普通的方法去重1、简单的去重方法 // 最简单数组去重法/** 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中* IE8以下不支持数组的indexOf方法* */function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){

2018-11-14 13:01:08 425

原创 jq获取file表单选择文件的路径、名字、大小、类型

一、问题在使用file表单时想知道选择的文件的路径、名字、大小、类型？二、知识点1.input表单会触发change事件2.获取路径触发这个事件的对象调用val()函数3.文件名触发事件后会有一个事件对象e.currentTarget.files[0].name4.文件大小 e.currentTarget.files[0].size 字节5.文件类...

2018-11-14 10:18:44 17635 8

原创 highCharts第一天学习笔记（面积图）

一、认识highCharts一张图认识highCharts二、highCharts的常用配置知识点：1.chart图表属性的常用配置 type:'area',//指定图表的类型,这里是面积图 // typeDescription:'这是一个百分比面积图',//不显示供开发者使用 borderWidth:2,//边框线宽度 borderColor: 're...

2018-11-13 18:15:30 1133

原创 web前端开发中button标签点击后导致页面刷新

一、问题 <button class="but_style" >点击清除</button>页面上有这样一个非常普通的botton按钮，每次点击这个按钮的时候，不执行事件或执行完button的click事件后，会自动的重新刷新一下当前的页面。二、原因button,input type=button按钮在IE和w3c，firefox浏览器区别：1、当在...

2018-11-13 11:05:46 3511 5

原创 css3图像处理

css3的filter属性处理图片，让图片变幻莫测。filter属性值：1.blur(px)模糊;值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。2.brightness(%)亮度;如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。3.contrast(%)图像的对比度...

2018-11-08 10:08:39 457

原创 css3修改滚动条样式

1.滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的...

2018-11-07 22:42:17 1374 2

原创 Vuex(五)--Vue核心概念actions

Action 类似于 mutation，不同在于：- Action 提交的是 mutation，而不是直接变更状态。- Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来...

2018-11-06 18:35:43 3494 1

原创 Vuex(四)--Vue核心概念mutations（唯一可以更改vuex实例中state数据状态的属性对象）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。mutation 必须是同步函数。 /** * 1) 包...

2018-11-06 16:19:08 5087

原创 Vuex(三)--Vue核心概念Getter

有时候我们需要从 store 中的 state 中派生出一些状态。如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。Vuex 允许我们在 store 中定义getter属性（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。比如...

2018-11-06 14:34:33 383

原创 Vuex(二)--Vue核心概念State（vuex的使用）

现在在上一篇Vuex(一)--为什么要使用Vuex的理解基础上使用Vuex中的State，一个正面例子来证实，同时也介绍一下Vue核心概念State。Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易...

2018-11-06 12:32:50 1634 1

原创 Vuex(一)--为什么要使用Vuex

vuex;简单来说：对vue应用中多个组件的共享状态进行集中的管理(读/写)单向数据流以下是一个表示“单向数据流”理念的极简示意：但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：- 多个视图依赖于同一状态。- 来自不同视图的行为需要变更同一状态。对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二...

2018-11-06 11:35:37 8387

原创 js的各种数据类型判断（typeof、instanceof、Object.prototype.toString.call()、constructor、in、hasOwnProperty）

1.typeofObject.prototype.toString.call()constructorinhasOwnProperty()基础类型: String、Number、Boolean、null、undefined、Symbol 存储在栈中，赋值变量和比较均为数据本身。引用类型：Object、Array、Map、Function 存储在堆中，使用new创建，赋值变量和比较均是内存地址。

2018-11-06 07:50:59 6582 1

原创 js--嵌套的数组扁平化(多维数组变成一维数组)、push()与concat()区别

数组的扁平化：将多维数组变成一维数组对于一个像这样的嵌套数组：a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组，有下面几种方法：方法一：递归一function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ ...

2018-11-06 07:38:41 9715

原创 js延迟加载的几种方法（性能优化defer、async）

这是一个面试经常问到的问题：js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度)主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，像腾讯QQ依然对程序的性能不断地做优化，让用户的体验更好，性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。解题思路 :1.def...

2018-11-06 07:30:16 8374 1

原创 javascriptvoid(0)含义以及与 ‘#’ 的区别

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是无返回值。说明： 1.javascript：void(0)这种伪协议，少写的好，如果你看过一些web标准的书就知道为什么了。（不懂，原话摘的，暂做记录）2.链接（href）直接使用javascript：void(0)在IE中可能会...

2018-11-05 23:01:53 1254

原创 vue-router导航守卫

当做Vue-cli项目的时候需要在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。钩子(...

2018-11-05 16:24:18 904 1

原创 vue-router路由元信息

一、官方文档　　路由元信息：定义路由的时候可以配置 meta 字段值对象const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', compo...

2018-11-05 15:28:05 1447

原创浅谈CSS中的<li>之间的空白间隔问题

问题：有时候，我们需要将<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻<li>之间会出现8px的空白间隔，不是margin也不是padding。<head> <meta charset="UTF-8"> <meta name="viewport" content=&

2018-11-05 13:18:35 2541

空空如也

空空如也