IE和Firefox在JavaScript方面的兼容性(汇编)

IEFirefoxJavaScript方面的兼容性(汇编)

IEFirefoxJavaScript方面的兼容性(汇编)

1.document.formName.item("itemName") 问题

说明:IE,可以使用document.formName.item("itemName")document.formName.elements["elementName"];Firefox,只能使用document.formName.elements["elementName"].

解决方法:统一使用document.formName.elements["elementName"].

2.集合类对象问题

说明:IE,可以使用()[]获取集合类对象;Firefox,只能使用[]获取集合类对象.

解决方法:统一使用[]获取集合类对象.

3.自定义属性问题

说明:IE,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox,只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

4.eval("idName")问题

说明:IE,,可以使用eval("idName")getElementById("idName")来取得ididNameHTML对象;Firefox下只能使用getElementById("idName")来取得ididNameHTML对象.

解决方法:统一用getElementById("idName")来取得ididNameHTML对象.

5.变量名与某HTML对象ID相同的问题

说明:IE,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox,可以使用与HTML对象ID相同的变量名;IE下则不能。

解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

6.const问题

说明:Firefox,可以使用const关键字或var关键字来定义常量;IE,只能使用var关键字来定义常量.

解决方法:统一使用var关键字来定义常量.

7.input.type属性问题

说明:IEinput.type属性为只读;但是Firefoxinput.type属性为读写.

8.window.event问题

说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefoxevent只能在事件发生的现场使用.

解决方法:

IE:

...

IE&Firefox:

...

9.event.xevent.y问题

说明:IE,even对象有x,y属性,但是没有pageX,pageY属性;Firefox,even对象有pageX,pageY属性,但是没有x,y属性.

解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

10.event.srcElement问题

说明:IE,even对象有srcElement属性,但是没有target属性;Firefox,even对象有target属性,但是没有srcElement属性.

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

11.window.location.href问题

说明:IE或者Firefox2.0.x,可以使用window.locationwindow.location.href;Firefox1.5.x,只能使用window.location.

解决方法:使用window.location来代替window.location.href.

12.模态和非模态窗口问题

说明:IE,可以通过showModalDialogshowModelessDialog打开模态和非模态窗口;Firefox下则不能.

解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame问题

以下面的frame为例:

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象.

Firefox:只能使用window.frameName来访问这个frame对象.

另外,在IEFirefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:

IEFirefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"window.frameName.location = "xxx.html"来切换frame的内容.

如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

14.body问题

Firefoxbodybody标签没有被浏览器完全读入之前就存在;而IEbody则必须在body标签被浏览器完全读入之后才存在.

例如:

Firefox

IE&Firefox

15. 事件委托方法

IEdocument.body.onload = inject; //Function inject()在这之前已被实现

Firefoxdocument.body.onload = inject();

有人说标准是:

document.body.onload=new Function('inject()');

16. firefoxIE(parentElement)的父元素的区别

IEobj.parentElement

firefoxobj.parentNode

解决方法: 因为firefoxIE都支持DOM,因此使用obj.parentNode是不错选择.

17.cursor:hand VS cursor:pointer

firefox不支持hand,但ie支持pointer

解决方法: 统一使用pointer

18.innerTextIE中能正常工作,但是innerTextFireFox中却不行.

解决方法:

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法:

obj.style.height = imgObj.height + 'px';

Python 3.0更新内容

2007年8月31日,Python 3000的最新版本Py3.0终于释出了第一个alpha版本。因为3.0版本与之前的2.x版本不兼容,所以,Py3.0版本完全可以看作是Py的新 生。此实为Python社区盛事。虽然Py3.0的final版本要到08年8月才会释出,但我们仍然可以从a1版本看到很多Py3.0的新特性,现在我 们就来体验一下。

  下载与安装

  在http://www.python.org/download/releases/3.0/下载。提供压缩的源代码包(50MB)和Windows安装包(10MB)。

  兼容性

  早在Py3.0释出之前,Guido就放言Py3.0不再对Py2.x兼容。现在看来,的确是这样的。

  不过,提供了一个“2To3”的转换器,以便开发人员能够将Py2.x的代码转到Py3.0上来。但目前这个还没有正式的释出版本,只有SVN 仓库可以CheckOut。地址在这里:http://svn.python.org/view/sandbox/trunk/2to3/

  性能

  Py3.0运行pystone benchmark的速度比Py2.5慢30%。Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可以取得很好的优化结果。

  编码

  Py3.0源码文件默认使用utf-8编码,这就使得以下代码是合法的:

  >>> 中国 = 'china'

  >>> print(中国)

  china

  语法:

  1)去除了<>,全部改用!=。

  2)去除``,全部改用repr()

  3)关键词加入as和with。

  4)整型除法返回浮点数,要得到整型结果,请使用//。

  5)加入nonlocal语句。使用noclocal x可以直接指派外围(非全局)变量。

  6)去除print语句,加入print()函数实现相同的功能。同样的还有exec语句,已经改为exec()函数。

  7)去除元组参数解包。不能def(a, (b, c)):pass这样定义函数了。

  8)新式的8进制字面量,相应地修改了oct()函数。2.x这样:

  >>> 0666

  438

  >>> oct(438)

  '0666'

  3.0这样:

  >>> 0666

  SyntaxError: invalid token (, line 1)

  >>> 0o666

  438

  >>> oct(438)

  '0o666'

  9)增加了2进制字面量和bin()函数:

  >>> bin(438)

  '0b110110110'

  >>> _438 = '0b110110110'

  >>> _438

  '0b110110110'

  10)扩展的可迭代解包。在Py3.0里,a, b, *rest = seq 和 *rest, a = seq都是合法的,只要求两点:rest是list对象和seq是可迭代的。

  11)新的super(),可以不再给super()传参数,

  >>> class C(object):
  def __init__(self, a):
  print(
'C', a)
  
>>> class D(C):
  def __init(self, a):
  super().__init__(a) # 无参数调用super()
  
>>> D(8)
  C
8
  
<__main__.D object at 0x00D7ED90>

  12) 新的metaclass语法:

  class Foo(*bases, **kwds):
  pass

  13)支持class decorator。用法与函数decorator一样:

  >>> def foo(cls_a):
  def print_func(self):
  print(
'Hello, world!')
  cls_a.print
= print_func
  
return cls_a
  
>>> @foo
  
class C(object):
  pass
  
>>> C().print()
  Hello, world
!

  class decorator可以用来玩玩狸猫换太子的大把戏。

  14)raise语句的语法改变。

  字符串和字节串

  1)Py3.0去除了unicode类型,现在字符串只有str一种类型,但它跟2.x版本的unicode几乎一样。

  2)关于字节串。

  数据类型

  1)Py3.0去除了long类型,现在只有一种整型——int,但它的行为就像2.x版本的long。

  2)新增了bytes类型,对应于2.x版本的八位串,定义一个bytes字面量的方法如下:

  >>> b = b'china'
  
>>> type(b)
  str对象和bytes对象可以使用.encode() (str
-> bytes) or .decode() (bytes -> str)方法相互转化。
  
>>> s = b.decode()
  
>>> s
  
'china'
  
>>> b1 = s.encode()
  
>>> b1
  b
'china'

  3)dict的.keys()、.items和.values()方法返回迭代器,而之前的iterkeys()等函数都被废弃。同时去掉的还有dict.has_key(),用in替代它吧!

  面向对象

  1)引入抽象基类(Abstraact Base Classes,ABCs)。

  2)容器类和迭代器类被ABCs化,所以cellections模块里的类型比Py2.5多了很多。

  >>> import collections
  
>>> print('\n'.join(dir(collections)))
  Callable
  Container
  Hashable
  ItemsView
  Iterable
  Iterator
  KeysView
  Mapping
  MappingView
  MutableMapping
  MutableSequence
  MutableSet
  NamedTuple
  Sequence
  Set
  Sized
  ValuesView
  __all__
  __builtins__
  __doc__
  __file__
  __name__
  _abcoll
  _itemgetter
  _sys
  defaultdict
  deque

  另外,数值类型也被ABCs化。关于这两点。

  3)迭代器的next()方法改名为__next__(),并增加内置函数next(),用以调用迭代器的__next__()方法

  4)增加了@abstractmethod 和 @abstractproperty两个decorator,编写抽象方法(属性)更加方便。

  异常

  1)所以异常都从BaseException继承,并删除了StardardError。

  2)去除了异常类的序列行为和.message属性。

  3)用raise Exception(args) 代替 raise Exception, args语法。

  4)捕获异常的语法改变,引入了as关键字来标识异常实例,在Py2.5中:

  >>> try:
  ... raise NotImplementedError(
'Error')
  ... except NotImplementedError, error:
  ... print error.message
  ...
  Error

  在Py3.0中:

  >>> try:
  raise NotImplementedError(
'Error')
  except NotImplementedError
as error: # 注意这个 as
  print(str(error))
  Error

  5)异常链,因为__context__在3.0a1版本中还没有实现,这方面就不说了。

  其它:

  1)xrange()改名为range(),要想使用range()获得一个list,必须显式调用:

  >>> list(range(10))

  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  2)bytes对象不能hash,也不支持b.lower()、b.strip()和b.split()方法,但对于后两者可以使用b.strip(b’ \n\t\r\f’)和b.split(b’ ‘)来达到相同目的。

  3)zip()、map()和filter()都返回迭代器。而apply()、callable()、coerce()、execfile()、reduce()和reload()函数都被去除了。

  4)string.letters和相关的.lowercase和.uppercase被去除,请改用string.ascii_letters等。

  5)如果x <>

  6)__getslice__系列成员被废弃。a[i:j]根据上下文转换为a.__getitem__(slice(I, j))或__setitem__和__delitem__调用。

  7)file类被废弃,在Py2.5:

  >>> file
  在Py3.
0
  
>>> file
  Traceback (most recent call last):
  File
"", line 1, in
  file
  NameError: name
'file' is not defined

  感想

  Python 3.0版本是Python的革命性升级,废除了许多之前的特性,也引入了新特性(如大量使用迭代器的思想)。开发人员从2.x升级到3.0版本需要比较大的代价,不仅要重新训练自己已经僵化的手指,更要让脑子从以前的条条框框中跳出来。

  现在释出的只是alpha 1版本,还有很多特性都没有实现,根据PEP 3000的计划,到08年4月将能够实现全部新特性,到时我们将会有更强的震憾感吧?

java MD5 算法代码

package com.yam.wangbinyu.test;

import java.security.MessageDigest;

public class test {

public final static String MD5(String s) {
char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f' };
try {
byte[] strTemp = s.getBytes();
MessageDigest mdTemp = MessageDigest.getInstance("MD5");
mdTemp.update(strTemp);
byte[] md = mdTemp.digest();
int j = md.length;
char str[] = new char[j * 2];
int k = 0;
for (int i = 0; i < j; i++) {
byte byte0 = md[i];
str[k++] = hexDigits[byte0 >>> 4 & 0xf];
str[k++] = hexDigits[byte0 & 0xf];
}
return new String(str);
} catch (Exception e) {
return null;
}
}

public static void main(String[] args) {

System.out.print(test.MD5("wangbinyu"));
}
}

JavaScript OOP

1. 什么是JavaScript
JavaScript 是一种描述性的脚本语言(Script Language),它可以非常自由地被嵌入到HTML 的文件之中。使用JavaScript 可以做什么呢?它的作用很简单,就是对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做“脚本”),然后 此代码伴随Html文件一起传送到客户端的浏览器上,由浏览器对这些代码进行解释执行,而其执行期间并没有劳驾服务器帮忙,这样就减轻了服务器的负担。
许多编程高手都瞧不起JavaScript编程,认为只是小孩子的玩意。的确,JavaScript作为一种脚本语言,比起其他语言来说,显得非常简单,没有很复杂的语法,没有庞杂的体系架构。
2. 面向对象编程(Object-Oriented Programming)
一个世界,可以完全由对象组成,而将算法所基于的世界只用对象表现出来,再进行后续代码的编写,这种编程方法就被称作面向对象的编程思想。
OOP的三大要素:
1. 封装
2. 继承
3. 多态
3. JavaScript如何实现OOP
3.1. 封装(Wrap)
JavaScript的对象封装,主要依靠function来实现。以下是一个简单的示例:
//*********************************************

// 定义Pet(宠物)对象
//*********************************************
function Pet() {
//名称
this.name = null;
//颜色
this.color = null;
//获取名称
this.getName = function() {
return this.name;
};
//设置名称
this.setName = function(newName) {
this.name = newName;
};
//获取颜色
this.getColor = function() {
return this.color;
};
//设置颜色
this.setColor = function(newColor) {
this.color = newColor;
};
//定义一个需要实现的方法
this.getFood = null;
//获取宠物的描述信息
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}
3.2. 继承(inheritance)
JavaScript的继承的实现主要依靠prototype(原型)来实现,下面为Pet类编写一个子类。
//*********************************************

// 定义Cat(猫)对象
//*********************************************
function Cat() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "fish";
};
}

//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;

多层次继承
//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;
3.3. 重载(override)与多态(Polymorphism)
//重载Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};

注意:Override和Overload的区别,JavaScript是不支持Overload的,原因是……你自己想想吧。

JavaScript是一种弱类型的语言,所以不要把它与C++、JAVA等语言进行比较。
4. 附录
4.1. 完整的示例
4.1.1. Pet.js
//*********************************************

// 定义Pet(宠物)对象
//*********************************************
function Pet() {
//名称
this.name = null;
//颜色
this.color = null;
//获取名称
this.getName = function() {
return this.name;
};
//设置名称
this.setName = function(newName) {
this.name = newName;
};
//获取颜色
this.getColor = function() {
return this.color;
};
//设置颜色
this.setColor = function(newColor) {
this.color = newColor;
};
//定义一个需要实现的方法
this.getFood = null;
//获取宠物的描述信息
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}

//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "fish";
};
}

//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;

//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;

//重载Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};

//*********************************************
// 定义Dog(狗)对象
//*********************************************
function Dog() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "bone";
};
}

//声明Dog的原型,即Dog的父类
Dog.prototype = new Pet;
4.1.2. Pet.htm


4.1.3. 运行结果

弹出三个对话框,分别如下:
The pet is MiMi,it's white,and it likes fish.
The pet is WangWang,it's yellow,and it likes bone.
It's just a persian cat.
本示例在IE6.0下测试通过。

JS 面向对象编程基础

翻译说明:本文是我从Prado框架的《快速入门指南》翻译中摘录出来的,感觉对JavaScript的学习很有帮助,特贴出备忘。
Javascript简介

本指引基于Sergio Pereira的 Quick guide to somewhat advanced JavaScript tour of some OO features。
嘿,我不知道你能那样做

如果你是一个Web开发者而且与我来自同一个地方,你也许在你的Web页面中使用过相当多的Javascript,大部分用来作用户界面(UI)的粘合。

直到现在,我才知道Javascript具有比我过去使用的更多的面向对象能力,只是我没有如我所需的去使用它。当浏览器开始支持更标准的Javascript和DOM的功能集时,要为客户端上的运行而编写更复杂和多功能的代码就变得可行了。它助长了AJAX现象的产生。

当我们都开始学习它适合编写什么酷的AJAX应用时,我们开始关注到我们过去知道的Javascript不过只是冰山一角而已。我们现在知道Javascript不仅仅被用于象输入校验等简单的用户界面杂务和其他琐碎任务。现在的客户端代码更高级和分层,更象一个真正的桌面应用或一个客户端-服务器的富客户端。我们在其中看到了过去仅在服务器端的代码中见到的类库、对象模型、继承关系、模式和许多其他的东西。

突然在我们能讲到的许多方面被放到了比以前更高的位置。要为新的Web编写应用,我们必需提高我们的Javascript水平来跟上它而且要更加熟练。假如你尝试运用许多现有的javascript库,如:Prototype.js、Scriptaculous、moo.fx、Behaviour、YUI等,你最终会发现自己要阅读JS代码。或许因为你想要学习它们如何实现,或因为你的好奇,或通常因为那是知道如何使用它的唯一办法,大多数这些库象是不太注重文档。无论个案会是什么,假如你之前不了解那样的东西,你将要面对一些引起恐慌的外部技术。

本文的目的正好是解说许多我们还不熟悉的构造类型。

JSON (JavaScript Object Notation-Javascript对象表示法)

Javascript对象表示法(JSON),是围绕AJAX主题突然出现的一个新的时髦词。JSON,简单的说就是一种在Javascript中定义对象的方法。让我们马上来看看一个实例并体会它如何简单。

var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
for(i=0;i
就让我们加入些许格式让它看起来象我们平常所认识的那样:

var myPet =
{
color: 'black',
legCount: 4,
communicate: function(repeatCount)
{
for(i=0;i
alert('Woof!');
}
};
在这我们创建了一个带两个属性(color和legCount)和一个方法(communicate)的对象引用。不难发现,该对象的属性和方法用一个逗号区隔的列表来定义。每个成员通过名称来引入,接着是冒号和定义。对于属性来说很容易,仅仅是属性值。方法通过指派一个匿名函数来创建,我们下面会更好地说明。在该对象被创建并指派给变量myPet之后,我们可以如下使用它:

alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);
You'll see JSON used pretty much everywhere in JS these days, as arguments to functions, as return values, as server responses (in strings,) etc.

你想说什么?函数也是一个对象?

对于开发者来说这可能与众不同,但在JS中一个函数也是一个对象。你可以象参数一样把一个函数传送给另一个函数,就象你可以传送一个字符串一样。这些被广泛应用而且非常便利。

看看这个实例。我们将把函数传送到另一个使用它们的函数去。

var myDog =
{
bark: function()
{
alert('Woof!');
}
};

var myCat =
{
meow: function()
{
alert('I am a lazy cat. I will not meow for you.');
}
};

function annoyThePet(petFunction)
{
//let's see what the pet can do
petFunction();
}

//annoy the dog:
annoyThePet(myDog.bark);
//annoy the cat:
annoyThePet(myCat.meow);
注意,我们把没有添加"()"的myDog.bark和myCat.meow传送给它们。假如我们那样做了,我们不是传送函数,而是调用那些方法并传送它们的返回值,这里的两个个案中都未定义。

要是你想另我的懒猫起来嗥叫,你可以简单地这样做:

myCat.meow = myDog.bark;
myCat.meow(); //alerts 'Woof!'
数组、项目和对象成员

在JS中下列两行做了同样的事。

var a = new Array();
var b = [];
正如我确定你已经知道的那样,你可以通过使用方括号在一个数组中访问个别项目:

var a = ['first', 'second', 'third'];
var v1 = a[0];
var v2 = a[1];
var v3 = a[2];
但你还不限于数字索引。你可以通过使用它的名字以字符串来访问一个JS对象的任何成员。下面的例子创建了一个空对象,并通过名字加入了一些成员。

var obj = {}; //new, empty object
obj['member_1'] = 'this is the member value';
obj['flag_2'] = false;
obj['some_function'] = function(){ /* do something */};
上述代码的作用与下面的相同:

var obj =
{
member_1:'this is the member value',
flag_2: false,
some_function: function(){ /* do something */}
};
在许多情形下,在JS中对象的概念和关联的数组(杂凑)没有区别。下面两行代码都做了同样的事情。

obj.some_function();
obj['some_function']();
关于对象已经够了,我现在能有一个类了吗?

面向对象编程语言的巨大力量来源于类的使用。我不认为仅应用我之前使用其他语言的经验就能推测出在JS中如何定义类。这由你自己来判断。

//defining a new class called Pet
var Pet = function(petName, age)
{
this.name = petName;
this.age = age;
};

//let's create an object of the Pet class
var famousDog = new Pet('Santa\'s Little Helper', 15);
alert('This pet is called ' + famousDog.name);
让我们看看如何加入一个方法到我们的Pet类。我们将使用所有类都具有的prototype属性。prototype属性是一个包含任何对象的类会具有的所有成员的对象。甚至默认的JS类,如String、Number和Date拥有一个的prototype对象,它能让我们可以添加方法和属性并使那个类的任何对象自动获取这个新成员。

Pet.prototype.communicate = function()
{
alert('I do not know what I should say, but my name is ' + this.name);
};
那就是一个类似于prototype.js的库会派上用场的时候。如果我们使用prototype.js,我们能使我们的代码看起来更清晰(至少在我看来是这样)。

var Pet = Class.create();
Pet.prototype =
{
//our 'constructor'
initialize: function(petName, age)
{
this.name = petName;
this.age = age;
},

communicate: function()
{
alert('I do not know what I should say, but my name is ' + this.name);
}
};
函数作为参数,一个有趣的模式

假如你从来没有接触过支持闭合的语言,你也许会发现下面的惯用法太令人震惊了。

var myArray = ['first', 'second', 'third'];
myArray.each( function(item, index)
{
alert('The item in the position #' + index + ' is:' + item);
});
哇!在你断定我已经离题太远并且想转去比这篇更好点的文章之前,让我们在这解释一下要继续干些什么。

首先,在上述实例中我们使用了prototype.js库,它添加了each函数到Array类。该each函数接到一个函数对象的参数。这个函数对于数组中的每个项目都将被依次调用一次,对于当前项目调用时传送两个参数,item和index。让我们称这个函数为iterator函数。我们也能象这样编写代码:

function myIterator(item, index)
{
alert('The item in the position #' + index + ' is:' + item);
}

var myArray = ['first', 'second', 'third'];
myArray.each( myIterator );
我们不会象那些学校里的那些天真孩子那样做的,对吧?虽然更严格地说,后面的形式更易于理解但导致我们要进入代码中四处找寻myIterator函数。最好在它调用的同一个地方那里有迭代函数的逻辑。在本案例中,我们也不会在其他任何地方需要迭代函数,所以我们无损地把它转化成一个匿名函数。

这是this,但有时this也是那个

当使用JS开始编写我们的代码时,我们最普遍的一个麻烦就是this关键字的使用。它是一个真正的牵绊。

就象我们之前提及的那样,在JS中一个函数也是一个对象,而且有时候我们不注意我们正在传出一个函数。

拿这小段代码举个例:

function buttonClicked()
{
alert('button ' + this.id + ' was clicked');
}

var myButton = document.getElementById('someButtonID');
var myButton2 = document.getElementById('someOtherButtonID');
myButton.onclick = buttonClicked;
myButton2.onclick = buttonClicked;
由于buttonClicked函数在任何对象之外被定义,我们也许以为this关键字会包含一个window或document对象(假设这些代码位于一个在浏览器中被浏览的HTML页面中间)的引用。

但是当我们运行这段代码时,我们看到它如愿工作并显示被点击按钮的id。究竟其中发生了什么另我们使每个按钮的onclick方法包含buttonClicked对象引用,而无论之前那里有什么。现在无论按钮什么时候被点击,浏览器都会运行一些类似下行的东西:

myButton.onclick();
那毕竟不是这么混乱,是吧?只要你了解有别的对象要进行处理并想在这些对象的事件上,如点击按钮,进行什么行动后发生了什么就行了。

var myHelper =
{
formFields: [ ],
emptyAllFields: function()
{
for(i=0; i < this.formFields.length; i++)
{
var elementID = this.formFields[i];
var field = document.getElementById(elementID);
field.value = '';
}
}
};

//tell which form fields we want to work with
myHelper.formFields.push('txtName');
myHelper.formFields.push('txtEmail');
myHelper.formFields.push('txtAddress');

//clearing the text boxes:
myHelper.emptyAllFields();

var clearButton = document.getElementById('btnClear');
clearButton.onclick = myHelper.emptyAllFields;
因此你想:好了,现在我可以在我的页面上点击Clear按钮,那三个文本框就将被清空。然后你尝试点击该按钮后仅得到一个运行时错误。该错误将涉及(猜猜是什么?)this关键字。该问题是this.formFields没被定义即便this包含了一个到按钮的引用,那正是现在所发生的。一个快速的解决方案是重写我们最后一行的代码。

clearButton.onclick = function()
{
myHelper.emptyAllFields();
};
我们创建一个全新的函数,那种方法在协助对象的场景中调用了我们的协助方法。

IE6 png 透明 (三种解决方法)

第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档


第 2 种方法: 给img定义样式,页面上所有透明png即自动透明了。(这方法只对直接插入的图片有效,对背景图无效注意,要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用,否则会导致页面打开很慢!!!)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档


换成你的png图片







第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.(注意,这方法也是只对直接插入的图片有效,对背景图无效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档


把图片换成你自己的图片