Category Archives: Frontend

利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式

先看一段代码：

那这些代码是如何生成的咧？ 先看下这些代码“data:image/jpg;base64,iVBORw0KGgoAAAANSUhE……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。 等同于：

显示结果： Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。 语法： data:image/jpg;    声明数据协议及类型名称 base64,               编码形式为base64 /9j/4AAQSkZ……    base64编码结果 最后附上Data URL的生成方法（PHP）：

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。 from:http://www.lvtao.net/dev/php-image-data-url.html

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 2.<li><a href="#" id="item1">jquery获取父节点</a></li> 3.<li><a href="#">jquery获取父元素</a></li> 4.</ul>   我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下几种方法： 1、parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 代码如下 1.$('#item1').parent().parent('.parent1'); 2、:parent 匹配含有子元素或者文本的元素 代码如下   1.$('li:parent');  3、parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 代码如下  1.$('#items').parents('.parent1'); 4、closest([expr]) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。 closest对于处理事件委派非常有用。 1.$('#items1').closest('.parent1'); from:http://www.cnblogs.com/weixing/archive/2012/03/20/2407618.html

jQuery Ajax 简单的实现跨域请求

html 代码清单： <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax(     {         type:’get',         url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',         dataType : 'jsonp',         jsonp:"jsoncallback",         success  : function(data) {             alert("用户名："+ data.user +" 密码："+ data.pass);         },         error : function() {             alert('fail');         }     } ); }) </script> 服务端 validate.php 代码清单： <?php header('Content-Type:text/html;Charset=utf-8'); $arr = array(     "user" => $_GET['loginuser'],     "pass" => $_GET['loginpass'],     "name" => 'response' ); echo $_GET['jsoncallback'] . "(".json_encode($arr).")"; 效果图：   from:http://blog.csdn.net/liruxing1715/article/details/18707605

推荐 14 款基于 JavaScript 的数据可视化工具

俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果缺少合适 工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。 AnyChart 链接：http://www.anychart.com/ AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。 amCharts 链接：http://www.oschina.net/p/amcharts amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库，在应用中不依赖任何其他第三方类库，就可直接编译运行。除了提供最基本的规范要素外，amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时，用鼠标 hover 图表内容，可以与其进行交互，使图表展示细节信息，其中呈现信息的容器被叫做 Balloon（气球）。除此之外图表可以动态动画的形式被绘制出来，带来了了非常好的展示效果。 Cesium 链接：http://www.oschina.net/p/cesiumjs Cesium 同样专注于地理数据可视化，它是一个 Javascript 库，可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外，它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议，支持商业及非商业项目。 Chart.js 链接：http://www.oschina.net/p/chartjs Chart.js 是一个简单、面向对象，为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5，响应式，支持所有现代浏览器。同时它不依赖任何外部工具库，本身轻量级，且支持模块化，即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。 Chartist.js 链接：http://www.oschina.net/p/chartist-js Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具，它支持 SVG 格式，图表数据转换灵活，同时也支持多种图表展现形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分离，因此代码比较简洁，在应用时配置流程十分简单。它生成的是响应式图表，可以自动支持不同的浏览器尺寸和分辨率，更多的是，它也支持自定义 SASS 架构。 D3 链接：http://www.oschina.net/p/d3 2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3，它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式，例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置单独的对象以及功能集，并通过标准 API 进行 DOM […]

js操作select标签

html中的select标签 javascript对它们的操作 一、基础理解 复制代码代码如下: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签 1:options[ ]数组的属性: length属性———长度属性 selectedIndex属性——--当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3…..)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值……….) 2:单个option的属性(—obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个—) text属性———返回/指定 文本 value属性——返回/指定 值，与<options value="…">一致。 index属性——-返回下标, selected 属性——-返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项 defaultSelected 属性—--返回该对象默认是否被选中。true / false。 3:option的方法 增加一个<option>标签—--obj.options.add(new("文本","值"));<增> 删除一个<option>标签—--obj.options.remove(obj.selectedIndex)<删> 获得一个<option>标签的文本—--obj.options[obj.selectedIndex].text<查> 修改一个<option>标签的值—--obj.options[obj.selectedIndex]=new Option("新文本","新值")<改> 删除所有<option>标签—--obj.options.length = 0 获得一个<option>标签的值—--obj.options[obj.selectedIndex].value 注意: a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效. b:obj.option中的option不需要大写,new Option中的Option需要大写 二 、应用 复制代码代码如下: <html> <head> <script language="javascript"> function number(){ var obj = document.getElementById("mySelect"); //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 //obj.options.add(new Option("我的吃吃","4"));再添加一个option //alert(obj.selectedIndex);//显示序号，option自己设置的 //obj.options[obj.selectedIndex].text = "我的吃吃";更改值 //obj.remove(obj.selectedIndex);删除功能 } </script> </head> <body> <select id="mySelect"> <option>我的包包</option> <option>我的本本</option> <option>我的油油</option> <option>我的担子</option> </select> <input […]

javascript:history.go()和History.back()的区别

<input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button value=前进 onclick="window.history.forward()"> <input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 onclick="window.history.go(-1);window.location.reload()">在C# Web程序中，如为页面按钮写返回上一页代码 this.RegisterClientScriptBlock("E", "<script language=javascript>history.go(-2);</script>"); 其中，history.go(-2)，要写为-2，因在按钮事件触发前，已刷新一次页面，所以应是-2。 Response.Write("<script language=javascript>history.go(-2);</script>"); 此处也要写为“-2”。跟直接写脚本的有所不同。history.back()是会上一页 i=1 history.go(i)去指定的某页 如果是history.go(0)那就是刷新这两个属于JS代码，相当于IE的前进、后退功能。 具体的用处就要看什么时候需要这个就用上。比如用户注册时的验证是后台验证，不符合要求的时候就可以用这个，可以最大限度保证用户少重复输入数据。 例如：载入页面： function onLoadPage(){ if(event.srcElement.tagName=="SPAN"){ oFrame=top.window.middle.frames[2]; oTxt=event.srcElement.innerText; switch(oTxt){ case "前 进": oFrame.history.go(1); case "后 退": oFrame.history.back(); case "刷 新": oFrame.location.reload(); } } } 打开一个jsp页面,肯定是用客户端脚本进行刷新了。 Javascript刷新页面的几种方法： 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href   from:http://www.mikebai.com/Article/2009-11/757.html

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求，当时也是纠结了很久，也是google了很久，没有碰到合适的demo，今天特意研究了下这方面的的问题，所以也就做了个简单的demo来实现 本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前，先让我们来了解以下知识点： HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，并且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法： 1. readBinaryString 2. readAsText 3. readAsDataURL  将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。 4. readAsArrayBuffer 5. abort. 而我们现在要用的是第三种，所以解释了下，其他的具体可以看相关的资料，这里不多解释。 IE：document.selection    即资料解释如下： selection   对象 代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。 selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。 用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。 一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。 下面是JSFiddle 中的DEMO链接如下： 下面是HTML代码如下：

  JS代码如下：

  from:http://www.2cto.com/kf/201402/281430.html

HTML5 基础知识，第 3 部分: HTML5 API 的强大功能

什么是 API？ 应用程序编程接口 是编程指令集合和访问软件应用程序的标准。通过一个 API，您可以利用 API 提供的服务设计出强大的产品。 HTML5 提供了一些新的 API。例如： 用于渲染图形或其他可视图像的新 canvas 元素所使用的 2D 绘图 API 支持离线 Web 应用程序的缓存 API 使用新 video 和 audio 元素来播放视频和音频的 API 支持浏览历史访问和添加页面的历史 API draggable 属性支持的拖放 API contenteditable 属性支持的编辑 API 使用 JavaScript API 进行键-值对存储的客户端存储及嵌入式 SQL 数据库 本文主要关注于两个 API：Geolocation 和 Web Worker。首先，本文将分析 API；然后，再创建一个使用这两种 API 的页面。 商机无处不在：Geolocation 您可以使用 Geolocation API 来确定和分享地理位置。这个 API 会返回经度和纬度坐标 — 企业可以利用这些信息向这个坐标附近的区域提供服务。这些服务一般指的是基于位置的服务 (LBS)。 LBS 指的是用于确定所监控设备的物理位置的地理数据源，因此也可以确定该位置的人们。这个功能最有趣的地方是它使人们能够围绕某些关注的地理位置点周围的市场进行交互。 企业实际上是为客户创造优质、实用的服务和价值，同时为利益干系人、债权人、股东、员工和供应商创造经济和财务效益。由 Geolocation 支持的 LBS 能够使用非浏览器设备或浏览器来简化对货物或人的追踪和监控。在商业应用上，地理位置指的是利用地理信息来确定人或事的位置，然后将这些信息销售给任何需要使用这些信息的人， 他们可能利用这个位置信息来进行社交活动、商业应用或其他用途，前提是这些信息的拥有者已经授权使用这些信息。 如何获取地理信息 Geolocation API 是基于新增加的全局对象 navigator：navigator.geolocation。JavaScript 对象 navigator 包含了很有用的有关访问者的浏览器和系统的信息。Geolocation 可以使用 IP 地址、基于 Web 的数据库、无线网络连接和三角测量或 GPS 技术来确定经度和纬度。一定要注意 Geolocation 所提供信息的精确性会由于获取信息的方式不同而有所差别。有时候，您可能无法精确地读取某些位置的地理信息，甚至完全无法读取。 脚本可以使用 navigator.geolocation 对象来确定用户所使用设备的位置信息。在获得了位置信息之后，脚本会基于所获得的数据创建和生成一个位置对象。 navigator.geolocation 对象具有 […]

HTML5 基础知识，第 4 部分: 最后的完善

HTML5 作者集设计者和开发者于一身，他们的主要任务就是构建高效的丰富 Internet 应用程序 (RIA)，尤其是富 UI。我所说的高效 是指进行系统的、全面的改进，以数字的方式为站点所有者、所有者代理和站点使用者之间的对话提供便利。 RIA 是满足用户体验的本源和工具，因此也是任何以网络为中心的成功企业的关键组成部分。实质上，以网络为中心的活动在某种程度上是协作性的活动。当机构想在各个级别（包括市场营销和管理）上取得成功时，实现数字协作的成功方法至关重要。站点的成功主要取决于站点满足访问用户的质量要求的效率。 如您所见，HTML5 是专门为实现具有跨平台功能、融合电信、统一语言、广泛计算和开源系统的协作式 “网络世界” 而量身定制的。本系列的前 3 篇文章主要关注语义、适合的编码方法、输入在关键转换过程中所扮演的角色以及站点管理的最佳实践，所有这些都是为创建有组织的、符合逻辑的 RIA 打下基础。贯穿每篇文章共同线索是丰富用户体验的创建和管理对于实现站点所有者的代理目标的重要性。HTML5 Canvas 在开发高效 RIA 的过程中扮演重要角色。 常用缩略语 2D：二维 Ajax：异步 JavaScript + XML API：应用编程接口 HTML：超文本标记语言 HTML5：HTML 版本 5 UI：用户界面 什么是 Canvas？ HTML5 Canvas 是一个极其有用的绘制和动画元素。Canvas 使用 JavaScript 直接在页面上绘制图形。Canvas 能够定义和控制矩形区域，并允许以动态方式或通过脚本呈现 2D 形状和位图。 对于生成能够增强 UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言，HTML5 Canvas 非常完美。Canvas 元素可以通过几种方法来绘制路径、矩形、圆形和字符。 Canvas 坐标 在画布上进行绘制的前提条件是熟悉网格和坐标空间。空间区域的长度和宽度的单位为像素。用户可以围绕 x 和 y 坐标构建画布。当坐标为x=0, y=0 时，画布位于左上角。 矩形画布区域的默认宽度为 300 像素，高度为 150 像素，但您可以通过修改这两个属性来获得所需的画布大小。图 1 显示了如何实现 x 和 y 坐标。 图 1. 画布坐标 图 1 显示了长宽都为 100 像素的画布区域： 左上角的坐标为 x=0, y=0。 x 值在水平方向增加，而 y 值在垂直方向增加。 右下角的坐标为 x=100, y=100。 中心点的坐标为 […]

最高级别的可用模式显示内容

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。 目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码： <meta http-equiv="X-UA-Compatible" content="IE=7" /> 这样我们才能使得页面在IE8里面表现正常！ 浏览器市场份额的激烈竞争，给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本，IE6、IE7、IE8 等等。当然使用诸如 IETester，多版本 IE 共存解决方案之类的第三方集成工具，可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。 X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。 各种兼容模式代码示例如下：

像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。

无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 […]