代码改变世界

随笔分类 -  web---JavaScript

js javascript:void(0)

2012-10-25 15:47 by youxin, 485 阅读, 收藏,
摘要: void keywordThevoidoperator evaluates the givenexpressionand then returnsundefined.void expression 可以加()或者不加Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。UsesThis operator allows inserting expressions that produce side effects into places where an expression that evaluates toundefinedis desired.Thevoid 阅读全文

javascript事件委托event delegation

2012-10-24 13:20 by youxin, 416 阅读, 收藏,
摘要: Web应用都是由事件驱动运转的。我喜欢事件处理,尤其喜欢自己定义事件。它能使你的产品可扩展,而不用改动核心代码。有一个很大的问题(也可以说是功能强大的表现),是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器,事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题 (这尤其让一些新手头疼) ,以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题,你不得不承认尽量少使用事件编程是个明智的做法。于是事件委托就出现了。当页面上某个元素上的事件触发时,而在 DOM 继承关系上,这个元素的所有子元素也能接收到这个事件,这时你可以使用一个在父元 阅读全文

ppk Objects as associative arrays

2012-10-17 23:32 by youxin, 232 阅读, 收藏,
摘要: Objects in JavaScriptJavaScript is anobject orientedlanguage. However, in practice objects defined by the programmer himself are rarely used, except in complex DOM API's. Of course such standard objects aswindowanddocumentand their numerous offspring are very important, but they are defined by t 阅读全文

javascript this关键字

2012-10-16 22:26 by youxin, 330 阅读, 收藏,
摘要: javascript最重要的关键字之一是this。但是如果你不了解它的工作原理使用起来就会很困难。下面我将介绍在事件处理中如何运用它。以后我会增加this的其他用途。所有者这篇文章将要讨论的问题是:在函数doSomething()中this到底指向谁?function doSomething(){ this.style.color ='#cc0000';}在javascript中,this始终指向我们正在执行的这个函数的“所有者”,或者更确切地说,函数是哪个对象的方法this就指向哪个对象。当我们在页面中定义函数doSomething()的时候,他的所有者就是这个页面,或者说j 阅读全文

关于闭包一个常见的错误

2012-10-12 09:50 by youxin, 433 阅读, 收藏,
摘要: 看下面的一段代码才,从buttons添加不同的click事件:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" conten 阅读全文

javascript 时钟clock

2012-10-04 23:42 by youxin, 567 阅读, 收藏,
摘要: 看下面的一个javascript写的小时钟:无标题文档 点击开始按钮就开始计数,可是点击stop没有反应,为什么?另外一个clock:时!" onClick="timedCount()">请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。demo:http://www.w3school.com.cn/tiy/t.asp?f=hdom_timing_stop 阅读全文

转:用函数式编程技术编写优美的 JavaScript

2012-10-04 22:54 by youxin, 294 阅读, 收藏,
摘要: 函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行。一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。函数式编程函数式编程只描述在程序输入上执行的操作,不必使用临时变量保存中间结果。重点是捕捉 “是什么以及为什么”,而不是 “如何做”。与将重点放在执行连续命令上的过程性编程 阅读全文

javascript return function

2012-10-04 21:57 by youxin, 906 阅读, 收藏,
摘要: 用return function /object 提高效率首先来对比两段代码:代码(1)var aa = (function(){ var b = 1; alert(b); var c = b * 2; return { oo:c, ob:2 }})()alert(aa.oo);alert(aa.oo)结果:加载时先弹出1,运行两个alert(aa.oo)时再弹出两个2代码(2)var aaa = { oo:function(){ var b = 1; alert(b) var c = b * 2; return c; }, ob:2}alert(aaa.oo())alert(aa... 阅读全文

javascript 回调函数

2012-09-24 23:15 by youxin, 377 阅读, 收藏,
摘要: 什么是回调函数?wikipedia定义。A reference to executable code, or a piece of executable code, that is passed as an argument to other code.Here’s a simple example that’s probably quite familiar to everyone, taken from jQuery:$('#element').fadeIn('slow', function() { // callback function});This i 阅读全文

javascript cookie

2012-09-22 22:46 by youxin, 499 阅读, 收藏,
摘要: document.cookie存放了所有的cookie,世界上是一个字符串。形式类似下面的:fur=blue; food=biscuits; name=Cookie_monster;每个cookie有 ;分开。当创建cookie时,一定要确保名字和值不包括空格,逗号或分号。这些字符会在解析cookie时造成错误。在通过http头传输cookie的时候也会引起麻烦。要想在cookie中使用这些字符,最简单的方法是使用escape函数。这个函数会将所有的特殊字符转义。当读取cookie时,需要使用unescape解除转义。不要对=进行转义,它是作为cookie 的key value分隔符而存在的。 阅读全文

javascript 正则中的一个易错点

2012-09-22 20:26 by youxin, 261 阅读, 收藏,
摘要: 转自:http://www.laruence.com/2009/08/09/1036.html在下面例子中,同样的正则, 同样的字符串, 循环匹配结果却不一样 ,<script type='text/javascript'>var reTest = /^aid=(.*)/ig; var aData = [ 'aid=^$', 'aid=^$', 'aid=^$', 'aid=^$' ]; for (var i=0, l=aData.length; i<l; i++) { alert(reTest. 阅读全文

javascript 函数的 bind() 方法

2012-09-21 22:05 by youxin, 618 阅读, 收藏,
摘要: For a given function, creates a bound function that has the same body as the original function. Thethisobject of the bound function is associated with the specified object, and has the specified initial parameters.function.bind(thisArg[,arg1[,arg2[,argN]]])传入的第一个参数被赋值给thisthisArg :The value to be pa 阅读全文

setInterval/setTimeout 中this无效

2012-09-21 21:48 by youxin, 1076 阅读, 收藏,
摘要: The execution context,thisThe button below should change it’s value to ‘OK’, but it doesn’t work. Why?The reason iswrongthis.Functions executed bysetInterval/setTimeouthavethis=window, orthis=undefinedin ES5 strict mode. 也就是说this指向了window。The reference is usually passed through closure. The followin 阅读全文

clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总)

2012-09-21 21:33 by youxin, 7821 阅读, 收藏,
摘要: scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。一个scrollWidth和clientWidth的例子:77.htm文件在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。scrollWidth是对象实际内容的宽度。clientWi 阅读全文

javascript for循环中的闭包

2012-09-21 19:54 by youxin, 222 阅读, 收藏,
摘要: 注意我们的links.length为3;0 1 2 可是实际运行时点击任何一个链接都是 4. 为什么? 因为当闭包函数被调用时,他引用的是最后一次的赋值。 解决办法: 用一个匿名函数来激发作用域: 还有很多的解决办法: http://www.cnblogs.com/snandy/archive/20 阅读全文

精通javascript:元素的可见性

2012-09-20 18:07 by youxin, 1685 阅读, 收藏,
摘要: 元素的可见性 css有2种不同样式可以有效地隐藏元素,他们均有自己的优缺点。但会导致不同的结果。1.visibility属性在切换元素可见性的同时会保持元素普通流的属性的相关影响。他们2个值;visible 和hidden,假设一小段文本包含在b标签内,同时b的visibility设置为hidden,那么结果就是文本内有一小块空白,它的尺寸刚好等于被包裹文本的原有尺寸。比较以下2行文本普通问题// Normal text:Hello John, how are you today?// 'John' has visibility: hidden applied to itHel 阅读全文

精通javascript:元素的尺寸

2012-09-20 18:05 by youxin, 242 阅读, 收藏,
摘要: 找出元素的高度和宽度可以很容易,也可以很困难,取决于他所处的不同场合。在大多数情况下,仅仅需要使用getStyle函数的修改版本就可以得到当前元素的高度和宽度。// Get the actual height (using the computed CSS) of an elementfunction getHeight( elem ) { // Gets the computed CSS value and parses out a usable number return parseInt( getStyle( elem, ‘height’ ) );}// Get the ac... 阅读全文

精通javascript:获取位置

2012-09-20 17:27 by youxin, 326 阅读, 收藏,
摘要: To start with, let’s look at finding an element’s position within a page. You have a coupleelement properties at your disposal 在你支配下 that you can use to find this information. All modernbrowsers support the following three properties; how they handle them, however, is anothermatter:offsetParent: The 阅读全文

javascript 获取元素的真实,最终的css样式

2012-09-20 16:46 by youxin, 893 阅读, 收藏,
摘要: elem.style.xxx 只能获取内联的css属性,对<head>内的或link 外部样式的无能为力。<style>h1{font-size:1.6em;color:red;}</style></head><body><h1 id="title">hello world</h1><p>this is a test txt</p><script>var x=document.getElementById("title");docume 阅读全文

javascript对象小问题

2012-09-20 15:42 by youxin, 275 阅读, 收藏,
摘要: 看下面的代码:定义了一个对象直接量:var person={ name:"jack", setName:function(name){ this.name=name; }, getName:function(){ return name; ... 阅读全文