UEDspace » javascript

(转)javascript编程容易出现的11个错误

luo — Fri, 23 Sep 2011 02:32:17 +0000

javascript是比较容易学的。但是，对于这门语言需要有一些值得注意的地方。本文将指出javascript编程中可能犯过的10个错误错误1-使用全局变量如果你刚开始javascript编程，可能会觉得全局变量很好用。事实上，刚开始javascript编程，你可能不知道使用全局变量会带来什么麻烦。在同一个页面中，全局变量可以在任何内嵌的javascript代码段中或是该页面加载的不同的js文件中，都能访问到。这听起来很强大，是吗？这就使得全局变量可以随时随地的被修改赋值。事实上这样很糟！这样做会导致变量在意料之外被修改重写。假设有一个网店，需要用javascript计算并显示购物车所有商品的价格总和（当然，服务器端还会进行重新计算，这里只是为了增强用户的体验）。可能会编写代码如下： var total = 0, // total price tax = 0.05; // 5% 现在，还需要用javascript代码在网站上展示一些信息，或则是做一个商品仓库。代码如下： var total = 15; // number of tweets pulled from twitter 或则是如下代码： var tax = function () { /* … …

继续阅读 »

转：javascript contains方法

luo — Mon, 11 Jul 2011 06:26:31 +0000

IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。

继续阅读 »

转：js判断一个元素是否为另一个元素的子元素

luo — Mon, 11 Jul 2011 06:19:47 +0000

用js判断一个元素是否为另一个元素的子元素，再做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。

继续阅读 »

js小时倒计时

luo — Thu, 24 Feb 2011 09:36:32 +0000

小时倒计时，可指定具体时间

js拖拽效果

luo — Mon, 21 Feb 2011 03:24:32 +0000

自己写的js拖拽效果，有很多需要改进的地方，以后会继续改善

继续阅读 »

window.event对象详细介绍

luo — Fri, 18 Feb 2011 09:02:02 +0000

1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 2、属性： altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 3、属性详细说明：属性名描述值说明 altKey 检查alt键的状态当alt键按下时，值为True否则为False 只读 shiftKey …

继续阅读 »

在IE与火狐下window.event对象的区别

luo — Fri, 18 Feb 2011 09:01:34 +0000

window.event IE：有window.event对象 FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。通用：两者都有event.clientX和event.clientY属性。鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。标签的x和y的坐标位置：style.posLeft 和 style.posTop IE：有。 FF：没有。通用：object.offsetLeft 和 object.offsetTop。窗体的高度和宽度 IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。 FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。通用：document.body.clientWidth和document.body.clientHeight。添加事件 IE：element.attachEvent(”onclick”, func);。 FF：element.addEventListener(”click”, func, true)。通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。标签的自定义属性 IE：如果给标签div1定义了一个属性value，可以div1.value和div1[”value”]取得该值。 FF：不能用div1.value和div1[”value”]取。通用：div1.getAttribute(”value”)。父节点、子节点和删除节点 IE：parentElement、parement.children，element.romoveNode(true)。 FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

记录几道前端面试题

luo — Wed, 16 Feb 2011 09:51:25 +0000

收集的一些前端面试题在这里记录一下，以后也要常练习。

继续阅读 »

jQuery1.5的改进细节

luo — Thu, 10 Feb 2011 02:43:25 +0000

jQuery 1.5 beta1出来了，从学习跟进上来说，这一次已经比较晚了（我竟然不知道1.5什么时候出的alpha，就这么beta了）。这个1.5版本最大的更新是AJAX的完全重写，提供了更强的可扩展性。但是受制于精力和篇幅，对新的AJAX的分析还是放到下回，本篇先简单介绍一下细节方面的改进。 jQuery._Deferred和jQuery.Deferred 首先不得不说这两个新生事物，因为他们是作为基础设施存在，不把这两个东西讲明白了，有些问题根本没办法解释。首先，jQuery.Deferred是jQuery._Deferred的增强版，因此对于这个问题，从jQuery._Deferred入手，就能说明一大半的问题。什么是Deferred？从字面上看，我的第一反应是“延迟加载”，首字母大写的应该是“类型”的定义，所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上，虽然确实带有那么一点点“延迟”的意思，这个东西却不是用来实现延迟加载的。简单来说，jQuery._Deferred是一个函数队列，他的作用有以下几点：保存若干个函数。在特定的时刻把保存着的函数全部执行掉。执行过后，新进来的函数会立刻执行。感觉是不是和啥东西很像？对，jQuery的ready函数就是这样的逻辑，实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。 jQuery._Deferred提供下面的接口： done：function(fn1, fn2, …)的形式，用于把函数添加到队列中。 fire：function(context, args)的形式，使用context指定this对象，args指定参数，调用队列中所有函数。fire被调用后，_Deferred会进入isResolved状态，未来对done的调用不会再保存函数，而是直接调用函数。 resolve：相当于调用fire(this, arguments)，一个简化的方法。 isResolved：用来判断_Deferred是否在isResolved状态，具体参考前面的fire函数的解释。 cancel：取消掉整个队列，这样不管未来是不是fire，队列中的函数都不会再被调用。说明白了jQuery._Deferred，再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的，第一个称为deferred，用于保管“正常”状态下的函数；第二个称为failDeferred，用于保管“出错”状态下的函数。同时jQuery.Deferred提供了一些新的接口： then：function(done, fail)的形式，把done添加进deferred，把fail添加进failedDeferred。 fail：相当于failDeferred的done函数。 fireReject：相当于failDeferred的fire函数。 reject：相当于failDeferred的resolve函数。 isRejected：相当于failDeferred的isResolved函数。同时jQuery.Deferred取消了cancel函数。那么这个是啥用的呢？有“正常”和“出错”2个状态，同时又是异步的，很容易就能想到……对，给AJAX用的，在下一篇分析中再详细说明。 jQuery.ready的变化因为有了jQuery._Deferred这个东西，jQuery.ready函数变成依赖于函数队列，具体的变化有：原来的readyList变量已经不再是一个数组，而变成了jQuery._Deferred对象。原本在DOMContentLoaded时，调用readList中所有函数的逻辑，现在也使用了jQuery._Deferred中，原来的代码： while ( (fn …

继续阅读 »

jQuery 1.5发布 Ajax模块重写

luo — Thu, 10 Feb 2011 02:15:06 +0000

美国时间1月31日John Resig在jQuery官方博客发表文章，宣布jQuery 1.5正式版已经如期开发完成，可以下载使用。压缩版本jQuery Minified 29KB，不压缩版本jQuery Regular（用于阅读和调试）207KB。由于jQuery已经成为目前最流行的JavaScript库，得到广泛的支持，新版本的发布当然非常引人注目。 jQuery创始人John Resig在CSDN TUP活动上演讲（相关报道）另外，微软和Google也为jQuery 1.5提供了CDN支持，可以直接导入：微软：http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js Google：https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js （发稿时为止尚未上线）新版本的主要改进可以参见变更日志：http://api.jquery.com/category/version/1.5/。 John Resig总结了几点比较引人注目的变化。 1. Ajax重写 Ajax模块完全进行了重写。新增一个jXHR对象，为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。（详情可以参见：jQuery.ajax文档）此外，系统的可扩展性大大增强，可以附加各种数据处理器、过滤器和传输机制，为开发新的Ajax插件提供了方便。（详情参见：Ajax扩展文档） 2. 延迟对象延迟对象（Deferred Object，jQuery.Deferred对象）是一个可链接的（chainable）实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的，其结果是在jQuery中能够将依赖于某个任务（事件）结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜，Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象，因此现在通过jQuery编写Ajax程序将自动获得这一功能。开发人员借此可以使用无法立即获得的返回值（如异步Ajax请求的返回结果），而且第一次能够附加多个事件处理器。例如，使用了新的jQuery内部Ajax API就可以实现下面的代码了： // Assign handlers immediately after making the request, …

继续阅读 »