2015年09月_SQZHAO

转载 HTML5 本地裁剪图片并上传至服务器

转自：http://segmentfault.com/a/1190000000754560很多情况下用户上传的图片都需要经过裁剪，比如头像啊什么的。但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪完再返回给用户，来回需要 5 步。步骤繁琐不说，当很多用户上传图片的时候也很影响服务器性能。HTML5 的出现让我们可

2015-09-30 13:44:36 3004

转载 jQuery常用的元素查找方法总结

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，

2015-09-27 09:34:13 359

转载 jQuery-强大的jQuery选择器 (详解)

1. 基础选择器 Basics名称说明举例#id根据元素Id选择$("divId") 选择ID为divId的元素element根据元素的名称选择,$("a") 选择所有元素.class根据元素的css类选择$(".bgRed") 选择所用CSS类为bgRed的元素*选择所有元素$("*")选择页

2015-09-27 09:33:23 388

转载 jQuery的强大选择器详解

一基本选择器 $("input“) :选择所有是input标签的元素 $("#input1"):选择id为input1的元素 $(".acss"):选择所有包含acss 这个css类样式的代码 link

2015-09-27 09:32:37 396

转载 jquery与dom的转换

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。什么是jQuery对象？ ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。比如： $("#test").htm

2015-09-27 09:31:58 339

转载 JavaScript验证正则表达式大全

JavaScript验证正则表达式大全JavaScript验证正则表达式大全,搜集最全的JavaScript验证正则表达式,开始查看吧，这里的都是正则表达式的例子，具体和函数结合的使用方法，还请查看下篇文章《JavaScript使用正则表达式进行验证》匹配中文字符的正则表达式： [u4e00-u9fa5]评注：匹配中文还真是个头疼的事，有了这个表达式就好办了匹配双字节字符(

2015-09-27 09:30:37 432

转载 CSS和JavaScript标签style属性对照表（用javascript来控制css不再难了）

CSS和JavaScript标签对照表盒子标签和属性对照CSS语法 (不区分大小写)JavaScript语法 (区分大小写)borderborderborder-bottomborderBottomborder-bottom-col

2015-09-27 09:29:23 403

转载 Jquery取得iframe中元素的几种方法

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作DOM方法：父窗口操作IFRAME：window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作选中IFRAME中的所有输入框： $(window.f

2015-09-27 09:27:42 513 1

转载 Javascript与iframe的那些事儿

iframe 很多网站都在用，虽然方便开发与维护（可能同时有几个页面调用同一个 iframe ），不过却存在安全问题。嵌入 iframe 的页面，父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作；在完全不同域的情况下，也可以通过更改 hash 的方式进行通信。下面我在九个不同（版本的）浏览器中对此进行数据传输与更改的兼容性测试。同域或跨子域读写操作 ifram

2015-09-27 09:26:21 473

转载 JS操作JSON总结

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。本文主要是对JS操作JSON的方法做下总结。在JSON中，有两种结构：对象和数组。 1. 一

2015-09-27 09:24:50 347

转载 JS对象序列化为JSON对象

2015-09-27 09:23:47 497

原创 Javascript Tips&Dialog

Javascript Tips&Dialog

2015-09-26 01:05:42 916

原创 Javascript 矢量绘图 Sketch.js

Sketch.js 是矢量图绘制应用、动画回放；可以绑定到其他绘画工具上，通过服务器与 JSON 同步。Demo是以 Event.js, Color.Picker.js 和 Color.Space.js 为基础建立的。项目地址：https://github.com/mudcube/Sketch.jsSketch.js 一个易于使用的jQuery插件，可以直接在浏览器 c

2015-09-25 23:07:54 3663

转载关于DataURI base64编码的原理及实现

我们的图片大部分都是可以转换成base64编码的data：image。这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将canvas画布保存成img并强制改变mimetype进行下载，会在下一篇记录）但是处于好奇心，还是驱使我去了解下base64编码的原理。以便也在不支持

2015-09-25 17:49:27 1688

转载 chrome浏览器插件开发经验（一）

最近在进行chrome浏览器插件的开发，一些小的经验总结随笔。1、首先，推荐360的chrome插件开发文档：http://open.chrome.360.cn/extension_dev/overview.html2、从chrome18开始往后，chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式（固定）

2015-09-25 17:48:18 720

原创 chrome extension 如何保存图片到本地

Chrome extension 提供了 storage 接口，可以将数据存储于本地或存储于服务器上。参考资料: http://developer.chrome.com/extensions/storage.html#overview将图片其转换成 DataURI 之后，使用存储接口存于本地。全选复制放进笔记// 将图片变成 DataURIvar img = ne

2015-09-25 17:47:36 2438

转载手把手教你开发Chrome扩展

手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单手把手教你开发Chrome扩展二：为html添加行为手把手教你开发Chrome扩展三：关于本地存储数据Chrome的更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界

2015-09-25 17:43:38 906

原创关于DataURI

Data URIData URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。格式如下：data:[][;charset=][;base64],其实整体可以视为三部分，即声明：参数+数据，逗号左边的是各种参数，右边的是数据。声明：data:是URI的协议头，表明其资源是一个data URI；参数：MIME type，表示数据呈现的

2015-09-25 17:40:42 1394

原创 Javascript 保存到本地

function fake_click(obj) { var ev = document.createEvent("MouseEvents"); ev.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null

2015-09-25 16:31:31 1599

转载 CHROME插件开发入门--词典翻译

浏览器对于前端来说，基本就是一个吃喝拉撒等等都能干的地方。其中Chrome又是多数人的最佳选择，除开性能、速度、简洁的界面，它庞大而无所不能的extensions生态圈亦让人觉得很实用很牛x，这几天略看了下Chrome的插件，试了一试，先分享一下入门开发过程。以自己做的一个非常简易的词典来说明吧。先看目录结构：插件的入口就是manifest.json,这是一个

2015-09-24 16:34:00 668

转载 CHROME插件开发——消息传递机制

由于插件的js运行环境有区别，所以消息传递机制是一个重要内容。阅读了很多博文，大家已经说得很清楚了，直接转一篇@姬小光的博文，总结的挺好。后面附一个自己写过的demo，基本就对消息传递能够熟悉了。在开发 Chrome 扩展时经常需要在页面之间进行通讯，比如 background 与 content script 之间，background 与 popup 之间等等，本文结合官方文档中的例

2015-09-24 16:30:11 3524

转载让你的Chrome App支持多语言(i18n)

开始Chrome Store在上传应用时要求提供源码打包的.zip格式，因此Chrome Store会读取你的源码文件，有一些固定的目录格式，和清单列表。支持多语言化就是其中一个。这是一个固定的文件夹，在你的应用中创建_locales文件夹，并在下面创建对应你语言代码的文件夹，常用的几个：中文(简体)：zh_CN中文(繁体)：zh_TW英文：en同样还有一个固定的文件格

2015-09-24 16:28:47 2863

转载 chrome插件开发杂记

刷新当前 tab 页的3中方式// 1.chrome.tabs.getSelected(null, function(tab) { var code = 'window.location.reload();'; chrome.tabs.executeScript(tab.id, {code: code});});// 2.chrome.tabs.update(null,

2015-09-24 16:04:49 873

转载 Chrome插件开发 – UI外观

Chrome插件API中，提供了一些关于UI外观的操作。这里需要了解的几个概念：Browser Actions，右键菜单，桌面通知，Omnibox，选项页，覆写特定页，Page Actions，主题。首先我们还是需要先了解一下基本的概念和一些常用的方法：chrome插件编写中需要了解的几个概念和一些方法。1、browser action:在chrome主工具条的地址栏右侧增

2015-09-24 16:01:00 1166

转载 Chrome插件开发 – 浏览器交互

1、书签使用chrome.bookmarks模块来创建、组织和管理书签。也可参看 Override Pages，来创建一个可定制的书签管理器页面。1.1、manifest.json 中配置{ "name": "My extension", ... "permissions": [ "bookmarks" ], ...}对象和属性

2015-09-24 15:57:42 3779

转载 chrome插件编写中需要了解的几个概念和一些方法

1、插件文件结构1.1、manifest.json每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，里面存放重要的插件相关信息。一个最基本的配置例子：{ "name": "browser action demo", "version": "1.0", "permissions": [ "tab

2015-09-24 15:54:47 3963

转载 Chrome插件开发实例 – 开关灯（browser action）

这里通过一个网页开关灯的例子来演示browser action，除了browser action之外，还会涉及到其他很多的chrome api或者manifest.json配置项。这个文件包含的文件如下：background.html背景页，一个单独的长时间运行的脚本，是一个运行在扩展程序中的html页面。在应用的整个生命周期都存在，在同一个时间只有一个实例处于活动

2015-09-24 15:50:39 5595

转载 Chrome插件开发实例 – 时间通知（notifications）

1、创建notification的两种方法：// 注意：没有必要调用 webkitNotifications.checkPermission()。// 声明了 notifications 权限的扩展程序总是允许创建通知。// 创建一个简单的文本通知：var notification = webkitNotifications.createNotification( '48.pn

2015-09-24 15:47:41 3861

转载使用Backbone.js开发Chrome便签插件

开始之前在Web Store上没找到满意的便签插件，就只好自己动手写了Notty Notes，你可以试试看，多多提建议哦~Backbone的流行，与前端复杂度的提高息息相关，尤其越来越多的大型单页应用的上线，代码的组织方面就产生很多新的问题。所以MV*的概念又一次在前端应用开来，不管最后那个*被定义成为什么，M(odel)和V(iew)这两层的分离，对于代码的组织大有好处。Ba

2015-09-24 15:33:13 845

转载开发Chrome插件实现在Chrome中截取网页

之前一直在考虑一个在浏览器上实现截屏的问题，搜索了一下了解了些情况。在初期想到的是如何通过JS把网页变为图片，网上有相应的开源项目，例如https://github.com/niklasvh/html2canvas. 这个组件试了一下在本机上还是有些问题。除了这个以外，还有一个东西是PhantomJSPhantomJS is a headless WebKit with JavaS

2015-09-24 14:53:12 5337

转载 chrome插件开发

前言：　　最近有个课程项目，由于对插件开发很感兴趣，所以花了较大的功夫去研究chrome extension开发。最近一阵，读文档、别人的总结、示例代码不在少数，怕以后自己忘了，所以还是趁热打铁写下来。由于本人理解能力有限，对于一些现象给出的解释可能不全面或者有偏差，欢迎大家指正！　　写博客的经历不是很丰富，在此请允许一个小有心得的菜鸟谈谈chrome插件开发的一些知识，希望能对和

2015-09-24 14:00:49 2608

转载 Chrome插件（Extensions）开发攻略

Chrome插件（Extensions）开发攻略本文将从个人经验出发，讲述为什么需要Chrome插件，如何开发，如何调试，到哪里找资料，会遇到怎样的问题以及如何解决等，同时给出一个个人认为的比较典型的例子——获取网页内容，和服务器交互，再把信息反馈给用户。OK，准备开始吧，我尽量把文章写得好看点，以免读者打瞌睡。目录为什么需要为什么是Chrome需要准备什么如何

2015-09-24 13:58:36 3644

原创 chrome扩展中，content_scripts为页面css的图片的URL

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');引自:http://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css

2015-09-24 13:57:09 2630

转载如何做一个简单的Chrome Extension用于网页截屏

参考原文：A Simple Chrome Extension to Save Web Page Screenshots to Local DiskChrome Extension开发指南Chrome Extension OverviewChrome Extension DebuggingChrome Extension Sam

2015-09-24 13:55:34 4518

转载 Javascript网页截屏的方法

最近我在研究开发一个火狐插件，具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现，大家可以在 @程序师视野里看到用这个截图插件分享的微博的效果。之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法，这些都是在为这个插件做技术准备。技术路线很清晰，将网页的某个区域的内容生成图像，保持到canvas里，然后将canvas内容转换成图片，保存到本地，最后

2015-09-24 11:54:22 648 1

转载 Chrome扩展开发指南(转载)

我觉得不错的学习路径：【基础部分】JS/CSS，JQUERY，这三个先学，JS则是那本【JAVASCRIPT高级编程第三版】比较不错，然后可以学COFFESCRIPT，来写面向对象的程序。不过我一直不太会写OO的东西，所以，总是用组件化的方式绕过去的。然后可以试试用所谓的测试驱动来进行迭代开发吧，我因为开发的都是小插件，所以，就懒得写测试了。然后就是HTML5的所有AP

2015-09-24 11:51:23 438

原创 Chrome 插件项目

bcoe/DoloresLabsTechTalkhttps://github.com/bcoe/DoloresLabsTechTalkmageMaily lets you right-click on an image on a webpage and send it to an email address.attachmentsme/Queueberthttps://gi

2015-09-24 11:42:07 1279

原创 Bootstrap Themes & Templates

http://www.bootstrapzero.com/The largest open-source, free Bootstrap template collection

2015-09-22 23:56:43 539

转载用IT技术玩金融系列文章

用IT技术玩金融系列文章用IT技术玩金融系列文章，将介绍如何使用IT技术，处理金融大数据。在互联网混迹多年，已经熟练掌握一些IT技术。单纯地在互联网做开发，总觉得使劲的方式不对。要想靠技术养活自己，就要把技术变现。通过“跨界”可以寻找新的机会，创造技术的壁垒。金融是离钱最近的市场，也是变现的好渠道！今天就开始踏上“用IT技术玩金融”之旅！金融概念入门金融市场名词解

2015-09-22 17:38:54 634

转载让Hadoop跑在云端系列文章

让Hadoop跑在云端系列文章让Hadoop跑在云端系列文章，介绍了如何整合虚拟化和Hadoop，让Hadoop集群跑在VPS虚拟主机上，通过云向用户提供存储和计算的服务。现在硬件越来越便宜，一台非品牌服务器，2颗24核CPU，配48G内存，2T的硬盘，已经降到2万块人民币以下了。这种配置如果简单地放几个web应用，显然是奢侈的浪费。就算是用来实现单节点的hadoop，对计算资源浪

2015-09-22 17:35:14 536

空空如也

空空如也