web_hwg的博客

原创 jq根据json数据，动态生成一个二级联动菜单

jq根据json数据，动态生成一个二级联动菜单htmljson数据jq循环html蔬菜：<select name="vegetable" id="vegetable"> <option value="0">请选择类别一</option> </select>水果：<select name="fruit" id="fruit"&gt...

原创 js数组去重与js数组求重

原创 git最常用的一些命令

git基础命令

转载 vue调试工具vue-devtools安装及使用

本文主要介绍 vue的调试工具&amp;nbsp;vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装:&amp;nbsp;1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包...

原创 同时可用git命令clone和TortoiseGit拉取代码不需要密码

因为工作需要在windows7下使用git分布式版本控制系统，需要同时可以在git命令行模式或TortoiseGit拉取代码而不需要每次输入密码。这时候需要同时安装git和TortoiseGit。git使用命令ssh-keygen -C “邮箱地址” -t rsa产生的密钥在TortoiseGit中不能用。TortoiseGit&nbsp;使用扩展名为ppk的密钥，而不是ssh-keygen...

原创 安装TortoiseGit2.6最新版本详细图解

Git下载地址：https://git-for-windows.github.io/Tortoisegit及语言包下载地址：http://tortoisegit.org/download/注：Tortoisegit是Git的一个插件，Git程序本身还是要安装的。一开始都是默认，下一步。 点击完成 选择语言 选择git安装目录 填写名称和邮箱如果里需要配置github公钥...

转载 10个最佳ES6特性

原文作者 原文链接ES6，正式名称是ECMAScript2015，但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准，但是它已经广泛用于编程实践中。如果你还没用过ES6，现在还不算太晚…下面是10个ES6最佳特性，排名不分先后：函数参数默认值模板字符串多行字符串解构赋值对象属性简写箭头函数PromiseLet与Const类模块化...

原创 移动端遮罩层滚动时，禁止底部滑动

参考文章关键css：body.modal-open { position: fixed; width: 100%;}关键js:// 解决移动端弹出层滚动穿透问题var ModalHelper = (function(bodyCls) { var scrollTop; return { afterOpen: function() {...

转载 使用@RequestBody 取POST方式的json字符串

【转载地址】https://blog.csdn.net/BigBad/article/details/78138547 关于@RequestBody 映射实体类的方法，网上大量讨论，不再细说。但前端提交复杂结构，或动态性比较大的数据结构时，就可能不能映射固定类。用map方式貌似也不太灵（没有仔细研究，过程中，前端json结...

原创 flex弹性布局基本属性

参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html注：父元素设为flex后，子元素的float、clear和vertical-align属性将失效一、容器属性1、flex-direction：属性决定主轴的方向（即项目的排列方向）row（默认值）— — 主轴为水平方向，起点在左端。row-reverse...

转载 iScroll5 API速查

版本针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。目前我们有以下版本：iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又

转载 理解BFC的原理及其作用

一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档

原创 cookie与session

cookie注意：①函数有返回值②php设置的cookie不能立即生效，要等到下个页面才能看到；JavaScript设置的cookie立即生效③cookie没有显示的删除函数，可以设置expire过期时间，自动触发浏览器的删除机制 用途： cookie通常用来存储一些不是很敏感的信息，或者进行登录控制，也可用来记住用户名、记住免密码登录、防止刷票等，cookie不是越多越好，会增加宽带，增加流

原创 三种左边定宽，右边自适应布局方式

css左边定宽，右边自适应

原创 三种不定高的div垂直居中方式

css垂直居中

转载 彻底理解JS中this的指向

【转载地址】https://mp.weixin.qq.com/s/LwnhJYQPVt1rSzjTjEDjBQ初步理解：谁调用的就指向谁（后面会介绍到这句话不完全正确）进一步解析：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。如

转载 CSS垂直居中的11种实现方式

转载地址[http://www.cnblogs.com/zhouhuan/p/vertical_center.html] ① 使用绝对定位和负外边距对块级元素进行垂直居中：<div id="box"> <div id="child">我是测试DIV</div></div>#box { width: 300px; height: 300px; background:

转载 JavaScript不借助第三个变量交换a,b两个变量值

[转载地址]http://blog.csdn.net/q1056843325/article/details/53223914交换变量值方案一最最最简单的办法就是使用一个临时变量了 不过使用临时变量的方法实在是太low了var t;t = a;a = b;b = t;首先把a的值存储到临时变量中 然后b赋值给a 最后拿出临时变量中的a值赋给b 这个办法是最基本的了交换变量值方案二下面的

原创 jq+ajax请求本地数据加载商品列表页并跳转详情页

效果：json文件：{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"},

转载 css制作三角形

【转载地址】http://www.cnblogs.com/xiaofeixiang/p/5022570.html 原理：定义空div，宽高为0，看成是两横两竖的盒子，两横在上面，箭头指向哪，哪边边框就为0，两边的边框就会靠在一起，形成一个顶点，两边的边框颜色则透明，三角形就是中间重叠部分切出来的HTML：<ul> <li class="row"> <span>四个三角<

原创 如何使用github客户端在github上搭建项目？

Github for windows（客户端）是什么 GitHub 使用 git 分布式版本控制系统，而 git 最初是 Linus Torvalds 为帮助Linux开发而创造的，它针对的是 Linux 平台，因此 git 和 Windows 从来不是最好的朋友，因为它一点也不像 Windows。GitHub 发布了GitHub for Windows，为 Windows 平台开发者提供了一个易

原创 git上传本地单独修改的文件

前言：只针对环境已经部署，并且之前已经将全部文件上传成功的情况下1.检测本地修改过的文件（git status）2.添加修改过的文件到索引库（git add -u）3.再次检测（git status）4.将修改从暂存区提交到本地版本库（git commit -m “modify”）5.从远程获取最新版本并merge到本地（git pull）6.将本地版本库的分支推送到远程服务器上对应的分支（git

转载 如何使用命令行在github搭建项目？

[转载地址]http://www.cnblogs.com/lijiayi/p/githubpages.html最近发现 github 改版了，已没有像原来的 Launch automatic page generator 这样的按钮等，所以我对我的文章也进行了修正，对于新版来说，步骤更加简单了。欢迎享用。 －－－－－－华丽丽的分割线，以下是在原版的基础上的修正版－－－－－－－ 学了前端小半年

原创 offset、client、scroll

offset：偏移 offsetHeight：height+padding+border offsetTop：border边界到padding边界的垂直距离（本元素的padding+本元素的margin）client：可视区 clientHeight：height+padding clientTop：borderscroll：滚动 scrollHeight：height+padding

转载 jQuery与Zepto的异同

【转载地址】http://www.cnblogs.com/colima/p/5289386.html一、同：　　Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Z

原创 详解css中px、em和rem的区别

一.概念1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是

原创 :before/:after和::before/::after的区别

以前见过单冒号和双冒号的写法但没太注意，刚好学习css3碰到了::befroe/::after写法，就简单的总结下自己了解到的。 :before/:after这种写法css2中就有，叫伪类；::befroe/::after这种写法是css3中的，叫伪元素，但两种写法的作用是一样的。后者无法兼容IE低版本，如果要求兼容IE低版本请使用前者。注：对于img和input元素两者都不起作用用法：关键是

原创 js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别

1.offsetLeft/offsetTop 在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。2.offset().left/offset().top 返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。示例：#par

转载 如何实现浏览器内多个标签页之间的通信

转载地址http://blog.csdn.net/lxcao/article/details/52777066 题目点评本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。 解题方法 方法一：使用localStorage使用localS

原创 css3实现三种不同的loading加载动画效果

HTML：<div class="box"> <div class="loader"> <div class="loading-1"> <i></i> </div> </div> <div class="loader"> <div class="loading-2"> <i></i

原创 css3实现下拉框动画效果

HTML：<div class="content"> <div class="select"> <p>所有选项</p> <ul> <li data-value="所有选项" class="selected">所有选项</li> <li data-value="html">html</li>

原创 bind()、live()、delegate()、on()比较

1.bind()：jq所有版本支持，但jq1.7以上官方推荐使用on()，向匹配元素添加一个或多个事件处理器，只针对已存在元素2.live()：jq1.9以下支持，jq1.9已删除，用on()代替，向当前或未来元素添加一个或多个事件处理器3.delegate()：jq1.4.2及其以上版本支持，delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序， 适用于当前或未来的元素

原创 四种js求数组最大值的方法

var arr = [7,2,0,-3,5];1.apply()应用某一对象的一个方法，用另一个对象替换当前对象var max = Math.max.apply(null,arr);console.log(max) 由于max()里面参数不能为数组，所以借助apply(funtion,args)方法调用Math.max()，function为要调用的方法，args是参数列表，当function

转载 CSS3中和动画有关的属性transform、transition 和 animation

CSS3中和动画有关的属性有三个  transform、 transition 和 animation。下面来一一说明:        transform    从字面来看transform的释义为改变，使…变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？ none 表示不进行变换； rotate 旋转            tran

原创 纯css实现三栏式布局

1.相对定位+float+margin负值（圣杯布局）<div id="parent_rela"> <h3>使用relative:relative定位（圣杯布局）</h3> <div id="center_rela">我是中间</div> <div id = "left_rela">我是左边</div> <div id = "right_rela">我是右边<

转载 前端JS经典6道面试题

转载原地址http://www.qdfuns.com/notes/17461/35a73030daad2a55940f2fb52ce0f1e8/page/2.html总共6道题。下面是答案，做完再看看。1。 [“1”,”2”,”3”].map(parseInt) 为多少？2。console.log(0.1+0.2 == 0.3) 输出什么？3。var a = b =10; (funct

转载 新闻列表中标题和日期的左右分别对齐的几种处理方法

[链接原地址](http://blog.csdn.net/fungleo/article/details/50315437) 新闻列表中标题和日期的左右分别对齐的几种处理方法前言在新闻列表中，有标题和日期，然后分别对齐，这种应用场景非常广泛。而在前端实践中，其也有很多中布局方式。很多前端新手在入门时，可能会稍微有点迷茫。今天我列举几个常用的布局方法，便于新手学习。 这里只是为了实现

原创 js数组遍历的三种方法

var arr=[ {'name':'zs','age':'20'}, {'name':'ls','age':'21'}];forfor(var i=0;i<arr.length;i++){ console.log(arr[i].name);}for…infor(var i in arr){ console.log(arr[i].name);}foreachar

原创 return false、event.preventDefault与event、stopPropagation区别

当return false时，点击a标签不跳转，控制台输出：a链接 当event.preventDefault()时，点击a标签不跳转，控制台依次输出：a链接、父类 当stopPropagation()时，点击a标签跳转到百度一下，控制台输出：a链接 附：break是退出循环或switch时使用