随笔分类 - Web前端
摘要：通常情况下，在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象，但是对于像下面这种复杂的对象，要如何来应对呢？ 例如我有以下两个object： 希望合并之后的结果输出成下面这样： 通过underscore或者lodash现有的方法我们无法实现上
阅读全文
摘要：高亮光弧效果 使用CSS3实现的一个高亮光弧效果，当鼠标hover到某一个元素上时，一道光弧从左向右闪过，效果如下： 代码如下： 鼠标hover图片突出显示 类似于今日头条首页的图片，当鼠标hover到上面的时候会着重显示图片（放大效果）： 代码如下： 鼠标hover图片移动 向上移动： 代码： 向
阅读全文
摘要：UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器，具有轻量，可定制，注重用户体验等特点，基于MIT协议，功能很强大。最近在使用的过程中发现其中上传的图片（或者插入已有的表情包图片）都无法正常缩放，选中图片，用鼠标点击并拖动图片边沿的小标签，图片只能缩小不能放大。尝试过很多方法
阅读全文
摘要：使用JQuery对多个ajax请求串行执行。 HTML代码： JS: 方法类似于Node.js中的q，使用promise defer模式将所有的ajax请求放到一个数组里，然后通过$.when.apply().done()将所有ajax请求依次执行。
阅读全文
摘要：HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用，例如通过一段JavaScript代码局部加载页面的内容，你希望通过改变当前页面的URL来反应出页面内容的变化，这时该功能可以派上用场。 举个例子，当用户从首页进入帮助页面时，我们通
阅读全文
摘要：在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误，常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑，浏览器会存在同源策略，然而<script/>标签却具有跨域访问数据的能力，这就是JSONP工作的基本原理。有关同源策略以及什么是JSONP，可
阅读全文
摘要：前端JS中使用XMLHttpRequest 2上传图片到服务器，PC端和大部分手机上都正常，但在少部分安卓手机上上传失败，服务器上查看图片，显示字节数为0。下面是上传图片的核心代码： HTML JavaScript 上述代码使用FormData来实现表单数据提交。FormData是一种针对XHR2设
阅读全文
摘要：在JavaScript中对字符串进行转义和反转义操作，常用的方法莫过于使用encodeURI (decodeURI)、encodeURIComponent (decodeURIComponent)这几个方法，具体使用方法和区别可以参考这篇文章http://qianduanblog.com/post/
阅读全文
摘要：在Node.js中，我们通常使用express-session这个包来使用和管理session，保存服务端和客户端浏览器之间的会话状态。那如何才能实现当用户刷新当前页面或者点击页面上的按钮时重新刷新session的过期时间呢？类似于ASP.NET中session会话状态，只要在一定的时间内页面一直保
阅读全文
摘要：我们知道，MongoDB属于文档型数据库，其存储的文档类型都是JSON对象。正是由于这一特性，我们在Node.js中会经常使用MongoDB进行数据的存取。但由于Node.js是异步执行的，这就导致我们无法保证每一次的数据库save操作都是原子型的。也就是说，如果客户端连续两次发起同一事件将数据...
阅读全文
摘要：想通过JQuery来check或者uncheck页面上的checkbox控件，我们可能会想到用下面的代码：$('#chk-all').on('click', function(){ var checked = $(this).is(':checked'); $("input[type...
阅读全文
摘要：在ejs模板中，通常会用下面四种方式在HTML中输出服务端的变量或表达式的值：1. 直接在中写表达式或变量。这种情况通常只是用来进行表达式计算或给变量赋值，不会有任何输出，被称作无缓冲的代码。2. 在中通过=号输出变量或表达式的值。默认输出到页面中的内容会进行HTML转义。如Hello输出后会变...
阅读全文
摘要：AngularJS指令 本指南中使用过的AngularJS指令： AngularJS过滤器 本指南中使用过的AngularJS过滤器： 具体内容可以查看AngularJS快速入门指南06：过滤器。 AngularJS事件 AngularJS支持以下事件： ng-click ng-dbl-click
阅读全文
摘要：本文给出的大部分示例都可以直接运行，通过点击运行按钮来查看结果，同时支持在线编辑代码。Name: You wrote: {{ name }} 运行AngularJS基础我的第一个AngularJS指令我的第一个AngularJS指令（带data-前缀）我的第一个AngularJS表达式我的第一个...
阅读全文
摘要：是时候创建一个真正的AngularJS单页面应用程序了（SPA）。 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序： 程序代码即解释 运行 application文件"myNoteApp.js"代码： controller文件"myNoteCtrl
阅读全文
摘要：使用AngularJS，你可以在HTML中包含其它的HTML文件。 在HTML中包含其它HTML文件？ 当前的HTML文档还不支持该功能。不过W3C建议在后续的HTML版本中增加HTML imports功能，以支持在HTML中包含其它的HTML文件。 在服务端包含文件 大部分的web服务器都支持服务
阅读全文
摘要：Bootstrap是一套非常流行的样式表框架，本章用以演示如何在AngularJS中使用它。Bootstrap 为了在AngularJS application中使用Bootstrap，你需要将下面这行代码加入到页面的head部分（或者去Bootstrap官网下载包然后引用到页面上）： 查看...
阅读全文
摘要：XML数据默认是不能在客户端通过Ajax跨域请求读取的，一般的做法是在服务器上写一个简单的代理程序，将远程XML的数据先读到本地服务器，然后客户端再从本地服务器通过Ajax来请求。由于我们不能对数据源所在的环境进行任何设置和修改，所以仅通过客户端代码很难绕过这个问题。但如果请求的数据不是XML而...
阅读全文
摘要：API即Application Programming Interface（应用程序接口）。AngularJS全局API AngularJS全局API是一组全局JavaScript函数，用来进行一些常用的操作，例如：比较两个对象迭代对象进行数据格式转换 全局API函数可以通过angular对...
阅读全文
摘要：之前有一篇文章详细介绍了如何获取网页在Facebook，Twitter和LinkedIn社交平台上分享的数量，点击这里查看。这里再扩充一下！TwitterGET URL:http://cdn.api.twitter.com/1/urls/count.json?url=http://styleha...
阅读全文