- 博客(17)
- 收藏
- 关注
RSS订阅原创 无刷新页面切换 - pushState
前言这样的需求很常见：点击页码局部更新页面（非整体刷新），并且产生历史管理。局部刷新很容易实现，ajax可以满足我们的需要，但是这并不会产生历史管理，好在html5给我们提供了几个好用的api方便解决这个问题，见下文。正文一、API1、pushState pushState()有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。 state：与要跳转到的URL对应的状态信息
2016-11-20 22:58:20
1534
原创 构建工具-gulp
前言构建工具可以帮助我们做很多的事情，比如拼写检查，合并代码，压缩代码等等工作，对我们提高开发效率有很大的帮助。gulp作为一款出色的构建工具，值得我们学习。正文一、gulp.taskgulp是基于task运行的gulp.task(name[, deps], fn)name是任务的名称 fn定义任务要执行的一些操作二、gulp.src指定要处理的源文件的路径gulp.src(globs[, opt
2016-11-06 12:53:14
341
原创 javascript的模块化
前言现在网页的复杂度越来越高，js代码越来越庞大，早已不像原来那样实现一些特效即可。一个项目可能需要n个人来完成，分别负责不同的功能。这些不同的功能划分在我看来就是一个个模块，我们不需要了解模块内部逻辑，只关心模块的对外接口。我们需要什么功能时只需引入合适的模块即可极大的提高了多人开发时的效率。正文一、如何实现模块化按照前言所说，模块有以下两个特征：可以实现特定的功能、可以提供对外接口。var mo
2016-11-05 17:07:50
237
原创 AngularJS-Phonecat的实现思路
前言最近关于AngularJS的资料也看了一些，其官网上有个实例Phonecat很不错，硬着头皮看了一会实在是看不下去，索性自己动手实现下，遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍，那就开始吧。正文1、布局布局很简单，首页侧边栏是一个输入框和下拉框，右边是一个列表，实现时对首页不做大的修改。详情页做一些改变，尽量做一些简化，考虑加一个自定义指令（轮播图）。
2016-10-26 11:53:38
251
原创 AngularJS初探
前言现在前端的技术发展是如此之快，各种框架层出不穷，AngularJS无疑是十分耀眼的一个。仅以此篇博文开启学习AngularJS之门，共勉。正文一、AngularJS特性AngularJs是一个用于设计动态web应用的结构框架，其有很多优秀的特性，如模板机制、数据绑定、模块、指令、依赖注入、路由，这里暂且不对其原理做深入探究，毕竟还不知道怎么用这些高级的功能。二、基础知识在这篇文章的最后我要写一个
2016-10-25 16:59:57
224
原创 实现一个自己的类jq函数库
前言jq功能强大，是每个前端人的开发利器。本文用意不在实现一个像jq那样的强大函数库，只是对jq中常用功能做一个简单实现，构建一个自己的微型库。正文一、对外提供接口//为了避免污染全局变量，采用闭包来处理(function(){ function $(){} window.$ = $;})()二、选择器功能的实现//思考：在jq中$()返回一个对象，假如使用简单工厂模式即可实现，但
2016-10-25 11:34:28
499
原创 跨窗口通信
1、同域下的窗口通信 1》iframe<iframe id="myframe" src="2.iframe.html"></iframe>如果需要操作子页面，首先需要获取子页面的window对象：oMyIframe.contentWindow -> 被iframe包含的页面的window对象如果需要通过子页面操作父页面，可以通过parent获得父级页面的window对象：eg：parenteg
2016-06-04 11:18:36
274
原创 Ajax学习
一、什么叫做Ajax ajax : Asynchronous JavaScript and XML 异步JavaScript和XML用javascript异步形式去操作xml主要用于数据交互二、Ajax的基本原理 1、创建Ajax对象 var xhr = null; if (window.XMLHttpRequest) { xhr = new
2016-06-02 10:27:18
338
原创 运动函数以及抖动函数的封装
1、运动函数 考虑一下问题：有一目标处于left值为10px位置处，需要运动到left位1000px位置处。var oDiv = document.getElementById('div1');var timer = null;timer = setInterval(function(){ oDiv.style.left = parseInt(getStyle(oDiv, 'left'))
2016-05-20 09:54:12
781
原创 jQuery常用方法
1、常用方法 1》filter（） ———— 过滤 （得到具有每一特征的元素） $("div").filter("#a").css("background","yellow");//所有div里面找到id为a的div2》not（）———– 和filter( )相反 $("div").not("#a").css("background","yellow");//所有div里面找到i
2016-05-15 22:13:28
261
原创 Bootstrap学习
Bootstrap–前端框架 1.布局–栅格系统 1>容器 -container-fluid – 流体布局 -container –固定布局 width:1170px 970px 750px auto –(移动优先) 注意：最好不要让容器嵌套，同一个页面可以有不同个容器，比如头尾流动，内容固定。假如不想让容器宽度变化，可以给其加一个宽度，赋予其优先级(!importa
2016-05-08 22:01:08
415
原创 居中问题
不同的情形下居中有很多不同的方法，以下探讨了不同情况下的居中解决办法。 1.水平居中 1>行内元素 要使一个拥有块级容器的行内元素居中，可以使用：text-align: center;适用：inline、inline-block等重点内容重点内容2>块级元素 通过设置其margin-left和margin-right分别为auto可以实现居中margin: 0 auto;3>多个块级元素的居
2016-04-14 16:09:54
235
转载 Flex 布局教程：实例篇
作者： 阮一峰日期： 2015年7月14日上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局
2016-04-14 13:56:29
353
转载 Flex 布局教程：语法篇
作者： 阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现
2016-04-14 13:55:03
229
原创 如何实现三栏式布局
在分辨率不同的情况下，使用流动性布局是一个很好地选择，本文介绍常见的几种实现自适应的外部架构： 1.绝对定位 左右两边采用绝对定位的方式固定在两侧，中间部分利用margin来实现自适应宽度。<body><div id="left"></div><div id="middle"></div><div id="right"></div></body>#left{ height:1000
2016-04-14 13:27:29
316
原创 清除浮动
在我们对元素使用浮动的时候经常会遇到一些问题，比如如下代码：<body><div><img src="images/thumbnail_bigben.jpg"><p>你好</p></div></body>div{ width:200px; border:1px #00FFFF solid; }img{ display:block; float:right; } 浮
2016-04-14 11:15:44
170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人