关注前端开发微信微信号web007007

HTML5语音输入(淘宝语音搜索)方法

HTML5语音输入(淘宝语音搜索)方法

谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可,例子如下: <input type=”text” x-webkit-speech /> 这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示 这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。 语音输入其他...

阅读全文...

jQuery选择器大全

jQuery选择器大全

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过...

阅读全文...

程序员如何保持优秀

程序员如何保持优秀

1. 小范围的选择一些有用技术,透彻的学习它们,拥抱它们。然后不断的扩展这个范围。 2. 理解各种数据结构的优点和缺点,包括它们在内存中和在硬盘上的各自表现。 3. 理解各种算法的优点和缺点。 4. 了解你的工作领域。关上电脑,去做你的用户们在做的事。 5. 有准备,有愿望,有能力在任何时候投入到多种技术层面中。你必须知道表象下的技术原理。在“各个技术层面的掌握程度”和“编程能力”上有着...

阅读全文...

让pre标签自动换行

让pre标签自动换行

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行。 下面介绍一个方法让 <pre > 标签中的内容自动换行并符合 W3C 标准(多浏览器支持) pre{ whi...

阅读全文...

什么是好的用户体验?

什么是好的用户体验?

说今天是一个体验为王的时代,一点也不过分。 做大众消费品的人可能已经感觉到,今天消费者的话语权越来越强,如果你的产品做得好,不久就会口口相传;如果你的产品做得烂,不久就会骂声一片。所有这一切在过去是不可想象的。但今天,每个人都可以发布信息,每个人的声音即使弱小,也总能被别人听到。在互联网时代,产品是否能够成功,用户体验越来越变成一个关键,用户买了你的产品,并非是与你...

阅读全文...

深入浅出Node.js(一):什么是Node.js

深入浅出Node.js(一):什么是Node.js

【编者按】:Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹。从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟Joyent获得企业资助,再到今年发布Windows移植版本,Node.js的前景获得了技术社区的肯定。InfoQ一直在关注Node.js的发展,在今年的两次Qcon大会(北京站和杭州站)都有专门的讲座。为了更好地促进Node.js在国内的技术推广,我们决定开设“深入...

阅读全文...

浏览器渲染原理

浏览器渲染原理

基本概念 WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程。 渲染过程 1. 用户输入网址(假设是个 HTML 页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回 HTML 文件; 2. 浏览器开始载入 HTML 代码,发现 <head> 标签内有一个 <link> 标...

阅读全文...

reflow(回流)

reflow(回流)

基本概念   浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow(回流)。有时 reflow 页面中的一个元素会 reflow 它的祖先元素以及所有子元素。   由于 reflow 的开销非常之大,因此要尽可能的避免 reflow 的发生。   产生 reflow 的原因   ● 调整窗口大小; ● 改变字体; ● 增加或者移除样式表; ● 内容变化,比如用户在 ...

阅读全文...

监听文本框输入(input & textarea)

监听文本框输入(input & textarea)

基本概念 Firefox、Chrome、IE9&IE9+ 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。 onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl ...

阅读全文...

阻止事件(取消其默认行为并阻止其传播)

阻止事件(取消其默认行为并阻止其传播)

功能描述 取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播。 实现代码 function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } } 只阻止事件继续传播(不取消默认行...

阅读全文...

让IE也支持html5标准

让IE也支持html5标准

相信HTML5标准在全球广泛的使用已经是大势所趋。HTML5能为我们的网页带来更高效简洁的代码,但是IE8以下版本仍然不支持HTML5标签。不过我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5标签支持的问题。 可以从网上直接加载下面的脚本: <!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> 这是...

阅读全文...

让IE也支持圆角

让IE也支持圆角

css3的圆角属性,能为开发者提高开发的效率。可惜主流的ie6 7 8并不支持该属性。下面介绍一种让ie也支持圆角的方法。 1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。 下载地址:百度网盘下载 使用方法: .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

阅读全文...

HTML5须知十件事

HTML5须知十件事

一两年前,HTML5似乎还是一个模糊的概念,只有少数几个互联网的书呆子才会关心。而现在,却感觉仿佛HTML5无所不在了。感谢Mozilla 和Chrome的快速发布,以及微软IE9的部署(IE 10现在也处于“技术预览”状态了),数量有限(或者说比有限要更好些)的支持HTML 5的浏览器已将近人人皆可享受。开发人员开始利用那些得到广泛实现的功能特性。不出1年HTML 5就将得到完全支持,而规范也正在迅速到达稳定...

阅读全文...