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

JavaScript 的新领域 – 动态图片处理(SVG)

JavaScript 的新领域 – 动态图片处理(SVG)

背景 当 JavaScript 被 Netscape 公司发明出来时,它被用来做一些琐细的事情,比如校验表单、计算日期、提示用户;随着 Web 的迅速发展,这种轻巧而灵活的语言被委以越来越多的任务,动态地修改页面内容,一致地处理事件,甚至无刷新地和服务器交互。然而,与传统的客户端编程相比,JavaScript 操作的对象限制在 DOM 模型之内,无法进行图形编程。所以长久以来,我们在设计网页时都仅仅是在“搭积...

阅读全文...

手机触摸屏的JS事件

手机触摸屏的JS事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: 一、 touchstart:// 手指放到屏幕上的时候触发 touchmove:// 手指在屏幕上移动的时候触发 touchend:// 手指从屏幕上拿起的时候触发 touchcancel:// 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 二、 client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对...

阅读全文...

JavaScript判断浏览器类型及版本

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。 浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有...

阅读全文...

用Chrome开发者工具做JavaScript性能分析

用Chrome开发者工具做JavaScript性能分析

你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情。 代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇文章告诉你如何通过用Chrome开发者工具(Chrome Developer Tools)找到这几行关键的代码...

阅读全文...

常用JavaScript语法107条–WEB前端攻城狮剥壳收藏

常用JavaScript语法107条–WEB前端攻城狮剥壳收藏

1、什么是JavaScript? JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。 今天前端攻城狮剥壳给你分享107个javascript基础语法,也算是JavaScript入门教程。这些javascript语法是...

阅读全文...

javascript keycode大全

javascript keycode大全

keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode 36 = Home keycode 37 = Left keycode 38 = Up keycode 39 = R...

阅读全文...

JavaScript五种继承方式

JavaScript五种继承方式

1)继承第1种方式:对象冒充   2)继承第2种方式: call方法call方法是Function对象中的方法,因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法,call方法的第一个参数会被传递给函数中的this,从第二个参数开始,逐一赋值给函数中的参数。   3)继承第3种方式: apply方法apply方法与call方法的不同之处在于,apply方法第二个参数传递的是一个数组,而不像call方法...

阅读全文...

向非程序员解释 JavaScript

向非程序员解释 JavaScript

当我告诉非程序员我的专业工作是 JavaScript 的时候,我往往得到的回答是“是不是那个安装以后让浏览器变的缓慢的东西?”,我很惊讶: 1. 知道 Java 的人比知道 JavaScript 的人要多很多,也许是很多人都曾经被问过是否需要安装 Java。 2. 这对 Java 来说不是好事,因为它和负面的印象联系在一起。虽然 JavaScript 对 Web 来说是如此重要,但是大部分人仍然不知道它的存在。 什么是 JavaScript? ...

阅读全文...

原生JavaScript隔行换色

原生JavaScript隔行换色

JavaScript代码: window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++) { if(i%2==0) //0,2,4,6,8,10... { aLi[i].className='alt'; } } }; css样式代码 *{padding:0;margin:0;list-style:none;} #ul1{} #ul1 li{height:30px;} #ul1 li.alt{background:#...

阅读全文...

国内优秀Web前端Javascript框架库汇总列表

国内优秀Web前端Javascript框架库汇总列表

此列表会一直更新、维护下去,以帮助大家了解、推动国内Web前端技术框架的发展,欢迎大家留言补充! Como – http://www.comsome.com EdoJs – http://www.edojs.com/ DWZ – http://j-ui.com/ JX(腾讯) – http://alloyteam.github.com/JX JSI – http://code.google.com/p/jsi/ KISSY(淘宝) – http://www.kissyui.com KindEditor – https://github.com/k...

阅读全文...

js防刷新的倒计时代码

js防刷新的倒计时代码

这里做了个js防刷新的倒计时的例子,什么也不说了,直接上代码比较爽块 &lt;pre&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;head&gt; &lt...

阅读全文...

页面加载时调用js方法:简述 onload

页面加载时调用js方法:简述 onload

也许多数人对于 onload 早已是轻车熟路,可我觉得还是有必要整理一篇稍微详细一些的文章。也方便自己加深记忆。 一直没有仔细看过js文档中关于 body 的 onload 属性 和 window.onload 方法。今天就此作一小结吧。 可以从多个切面入手。比如,页面加载时,只调用一个方法,或者页面加载时需要调多个js方法。就按照这个来说吧。 1.最简单的调用 <html> // 当然也可以简写成: onload=&q...

阅读全文...

Node.js 究竟是什么

Node.js 究竟是什么

关于Node.js的传言早已甚嚣尘上。那么Node.js到底是什么呢?为什么你应当关心它呢(这可不是我一个人说的哦!)? 读写网为此特地与JavaScript开发人员、LearnBoost的创始人和CTOGuillermo Rauch进行了一次聊天采访以披露一些深刻的见解。 到底Node.js是什么呢? Rauch:Node.js是一个在浏览器外部创建互联网应用程序的框架。它使用谷歌开发的超快速JavaScript引擎V8。JavaScript的事件驱动特性...

阅读全文...

前端性能优化:写出高性能的JavaScript

前端性能优化:写出高性能的JavaScript

减少浏览器的repaint/reflow 1.什么是浏览器的repaint/reflow 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂,其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算...

阅读全文...

页面自动跳转url

页面自动跳转url

页面自动跳转其实就是一个页面加载事作,当页面加载时马上跳转到另一个URL上就行了 我介绍一个很暴力的方法,把如下代码加到HEAD之间就OK了 <script>window.onload=function(){location.href = 'http://www.web92.net';};</script>

阅读全文...

图片预加载幻灯

图片预加载幻灯

最近学习原生js,学到Image对象,就简单写了个图片预加载幻灯。 图片预加载的好处是能够让页面更快的显示,特别是遇到幻灯图片很大的时候。 但是可能会重复http的请求。 其中利弊,只能自己衡量了。 菜鸟一个,有发现bug的话多多请多包含指教。 js代码: <pre>/* * time:2012-06-04 * js图片缓存幻灯 * author:cll */ window.onload =function() { var $id = document.getEl...

阅读全文...

推荐一款弹窗

推荐一款弹窗

一个基于jQuery的弹出层。 支持拖拽,支持多窗口。内容为文字,ID,图片,SWF,URL,框架。 预览网址:http://www.web92.net/dom/2012-06-04-XY_Tips

阅读全文...

javascript基础知识大全

javascript基础知识大全

发些javascript基础知识,便于大家学习,也便于我自己查看 1.javascript的数组API <pre>//定义数组 var pageIds = new Array(); pageIds.push(´A´); 数组长度 pageIds.length; //shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 //unshift:...

阅读全文...

【js 源码】快速入门正则表达式

【js 源码】快速入门正则表达式

很长时间没看 正则表达式了,碰巧今天用到,温故知新了一把 看书学习吧 50% 的举一反三练习中的原创。 一 javascript正则表达式的基本知识 1     javascript 正则对象创建 和用法 声明javascript 正则表达式 var reCat = new RegExp("cat"); 你也可以 var reCat = /cat/;      //Perl 风格   (推荐) 2 学习最常用的 test exec match search  replace  split 6个方法 1) test  检查...

阅读全文...

DOM元素上jQuery事件几点学习

DOM元素上jQuery事件几点学习

闲着无聊看了jQuery event部分的代码,发现一个小惊喜,嘿嘿,可能我奥特曼了。以下一jQuery 1.4.4版本说事,更高级版本稍有不同,但是关系不大。 jQuery 在元素上绑定事件的时候,会在该元素上添加一个自定义属性“events”,这个属性包含了通过jQuery绑定事件的事件集合,例如: 这样一个元素: <a id="bind" href="#">这是一个绑定了事件的元素(bind)</a> ...

阅读全文...