潘少宁的博客 » javascript教程

javascript 面向对象和 javascript 类

scofield — Thu, 16 Sep 2010 02:29:38 +0000

先来看个例子：

var user = {'username':'gosoa','userage':20};
alert(user.username);

上面的js代码会alert出来 gosoa 。其中 user 就是一个javascript对象。username和userage可以看成是 user的两个属性。

再看一段代码：

var user = {
	username:'fei',
	userage:20,
	usersex:function(_username){
			if(_username=='pan'){
				return '男';
			}
			if(_username=='fei'){
				return '女';
			}
		}
};
alert(user.usersex('fei'));

在这段代码中，会alert出来 “女” 。
这里面，user是一个javascript对象，其有usersex 这样一个属性，其可以根据传递的参数，返回不同的结果。
这是 javascript对象的属性的另一种写法。

上面的两个例子是 javascript对象的创建方法。

我们再来看下 javascript类的实现。
其实 javascript类并不像java或者C#或者PHP等类一样，有 class xxx{} 这样的定义。
javascript的类其实也是方法。看下面的例子：

function USER(uname,age){
	this.username = uname;
	this.age = age;
}

var pan = new USER('panpan',26);
alert(pan.username);

这段代码会alert出来 panpan ，function USER(uname,age)我们可以看做是定义了类，var pan = new USER(‘panpan’,26); 可以看做是实例化了一个类。this.age = age; 是类的属性。
上面的代码中，我们还可以通过 prototype 来定义类的属性。
看下面的代码示例：


function USER(){}
USER.prototype.username = 'pan';
USER.prototype.userage = 29;
USER.prototype.sex = function (_username){
    if(_username=='pan'){
        return '男';
    }else if(_username=='fei'){
        return '女';
    }
}
var pan = new USER();
alert(pan.sex('pan'));

在上面这段代码中，我们通过prototype 来给USER()类添加了一些属性和方法。
当我们 new一个 USER() 实例pan的时候，pan便拥有了 USER()的所有属性和方法。
在js中，所谓的类的继承便是通过 prototype 来实现的。

json 格式与PHP json 格式

scofield — Wed, 24 Mar 2010 10:05:10 +0000

以前转过一篇关于json格式的文章。今天再重新整理个json格式的例子，以及php json格式与js json之间的调用。

我们先来看个js函数，

function jsontest()
{
	var json = [{'username':'张三','userage':'20'},{'username':'李四','userage':'30'}];
	alert(json[1].username);

	var json2 = [['张三','20'],['李四','30']];
	alert(json2[0][0]);
}

这个函数，第一个alert(json[1].username); 会提示 “李四”。 json 变量是一个数组对象。所以要采用 obj.username 这样的格式来调用。

第二个 alert(json2[0][0]); 会提示 “张三”。 json2变量是完全的一个json格式。 json和json2变量都达到了相同的效果，但json2明显要比json精简了很多。

这是 JavaScript 的json 格式。

下面我们来看看php 与json格式。

先来看一段代码

$arr = array (
  array (
	  'catid' => '4',
	  'catname' => '招聘信息',
	  'meta_title' => '招聘信息标题'
	),

	array (
	  'catid' => '55',
	  'catname' => 'php教程',
	  'meta_title' => 'php教程标题',
	)
);
$jsonstr = json_encode($arr);
echo $jsonstr;

这段代码中，$arr是一个数组，我们采用 json_encode 将$arr 转换为了 json 格式。

这段代码会输出

[{"catid":"4","catname":"\u62db\u8058\u4fe1\u606f","meta_title":"\u62db\u8058\u4fe1\u606f\u6807\u9898"},{"catid":"55","catname":"php\u6559\u7a0b","meta_title":"php\u6559\u7a0b\u6807\u9898"}]

这就是php对于json数据的处理。

对于json数据，php 也可以采用 json_decode()函数将json数据转换成数组。

比如上述代码中，我们采用json_decode函数处理下。又会打印出上面的数组。

$jsonstr = json_encode($arr);
$jsonstr = json_decode($jsonstr);
print_r($jsonstr);

接下来，我们看看，php json数据和 js json数据如何相互调用。

我们新建一个 php_json.php 文件

代码如下：

  '4',
 'catname' => '招聘信息',
 'meta_title' => '招聘信息标题'
 ),

 array (
 'catid' => '55',
 'catname' => 'php教程',
 'meta_title' => 'php教程标题',
 )
);
$jsonstr = json_encode($arr);
?>
var jsonstr=;

补充下，在php_json.php文件末尾 var jsonstr=; 这一句。这是将json格式的数据赋值给 jsonstr 变量。
我们再建立一个 json.html 文件
代码如下：

这样，我们在查看 json.html的时候，loadjson(jsonstr) 就会提示 “招聘信息”和“php教程”

这样也实现了js跨域调用。

点击这里查看示例

优化JavaScript脚本【转】

scofield — Wed, 27 Jan 2010 17:15:58 +0000

语言层次方面

循环

循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本(平时使用时)等价。

而事实上，如何使用这两个循环，则有很大讲究。我在测试中有些很有意思的情况，见附录。最后得出的结论是：

如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或—操作符。

如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。

不使用Eval

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版(关于闭包的内容请参考函数式编程的有关内容)

减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。

字符串连接

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要连接多个字符串，应该少使用+=，如

s+=a;s+=b;s+=c;

应该写成

s+=a + b + c;

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢?使用JavaScript数组来收集，最后使用join方法连接起来，如下

以下是引用片段：
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

类型转换

类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。

1. 把数字转换成字符串，应用”" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

以下是引用片段：
(“” +) > String() > .toString() > new String()

这条其实和下面的“直接量”有点类似，尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。

2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

另外，和第二节的对象查找中的问题不一样，Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。

使用直接量

其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]来直接表达一个数组，以往我们都使用new Array(param,param,…)，使用前者是引擎直接解释的，后者要调用一个Array内部构造器，所以要略微快一点点。

同样，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作

对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。

高级对象

自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询

使用[“”]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点，其实这样做无法保证代码的有效性，字符串操作效率低，所以应该是用 document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用 createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他

脚本引擎

据我测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多，无论是执行速度还是内存管理上，因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。

总结

本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则：

直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。

尽可能少地减少执行次数，比如先缓存需要多次查询的。

尽可能使用语言内置的功能，比如串链接。

尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

参考

http://www.umsu.de/jsperf/ 各种浏览器的测试对比

http://home.earthlink.net/~kendrasg/info/js_opt/

附录1

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

以下是引用片段：
var print;if(typeof document != “undefined” ){ print = function(){ document.write(arguments[0]); }}else if(typeof WScript != “undefined” ){ print = function(){ WScript.Echo(arguments[0],arguments[1],arguments[2]); }}function empty(){}function benchmark(f){ var i = 0; var start = (new Date()).getTime(); while(i < pressure){ f(i++); } var end = (new Date()).getTime(); WScript.Echo(end-start);}function internCast(i){ return “” + i;}function StringCast(i){ return String(i)}function newStringCast(i){ return new String(i)}function toStringCast(i){ return i.toString();}function ParseInt(){ return parseInt(j);}function MathFloor(){ return Math.floor(j);}function Floor(){ return floor(j);}var pressure = 50000;var a = “”;var floor = Math.floor;j = 123.123;print(“————-nString Conversion Test”);print(“The empty:”, benchmark(empty));print(“intern:”, benchmark(internCast));print(“String:”);benchmark(StringCast);print(“new String:”);benchmark(newStringCast);print(“toString:”);benchmark(toStringCast);print(“————-nFloat to Int Conversion Test”);print(“parseInt”);benchmark(ParseInt);print(“Math.floor”);benchmark(MathFloor);print(“floor”)benchmark(Floor);function newObject(){ return new Object();}function internObject(){ return {};}print(“————nliteral Test”);print(“runtime new object”, benchmark(newObject));print(“literal object”, benchmark(internObject));

附录2

代码1：

以下是引用片段：
for(var i=0;i<100;i++){ arr[i]=0; }

代码2：

以下是引用片段：
var i = 0; while(i < 100){ arr[i++]=0; }

代码3：

以下是引用片段：
var i = 0; while(i < 100){ arr[i]=0; i++; }

在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过;而在IE 6.0下，测试压力较大的时候(如测试10000次以上)代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小(如5000次)，则代码2>代码3>代码1。

代码4：

以下是引用片段：
var i = 0; var a; while(i < 100){ a = 0; i++; }

代码5：

以下是引用片段：
var a; for(var i=0;i<100;i++){ a = 0; }

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

以下是引用片段：
var a; var i=0; while(i<100){ a=i; i++; }

代码7：

以下是引用片段：
var a; var i=0; while(i<100){ a=i++; }

代码8：

以下是引用片段：
var a; for(var i=0;i<100;i++){ a = i; }

代码9：

以下是引用片段：
var a; for(var i=0;i<100;){ a = i++; }

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6, 8 < 7, 9;

最后我们来看一下空循环

代码10：

以下是引用片段：
for(var i=0;i<100;i++){ }

代码11：

以下是引用片段：
var i; while(i<100){ i++; }

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。

tinyMCE插件开发之插入html,php,sql,js代码，并高亮显示

scofield — Wed, 06 Jan 2010 10:49:27 +0000

前几天，觉得blog的插入代码不够好用。于是，将sina的html编辑器更换为了tinyMCE。并且开发了一个简单的插入代码的功能。。。

下面就是我开发的过程。

首先，我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) 。下载地址 http://tinymce.moxiecode.com/download.php

tinyMCE插入代码，需要调用 tinyMCE的 tinyMCE.execCommand(‘mceInsertContent’,false,value); 方法。其中参数无需改变，value 就是你要插入的内容，

比如我写了一个函数，

function InsertHTML(value)

{

      tinyMCE.execCommand('mceInsertContent',false,value); 

}

后面，针对该例子，提供下载。在例子中。一共涉及到三个文件。

tinyMCE.html insertcode.php save.php 这三个文件。

tinyMCE.html 是tinyMCE文本框页面。

主要代码如下

其中js代码是初始化 tinyMCE。下载的例子中，并未包含 tinyMCE，你需要自己下载。然后更改js代码的 src 即可。

上面这段代码，是用来打开insertcode.php文件的。

接下来，我们来看下 insertcode。php 这个文件的代码。

首先是 js 代码

其次是 PHP 和 html 代码

\\';

	$content = htmlspecialchars($content);

	echo $content;

	echo \\'

	

	\\';

}else

{

?>





  选择要插入的代码类型

在insertcode.php中，insertcode() 函数用来调用 tinyMCE.html页面的 insertHTMl()函数，并将代码插入到 tinyMCE.html 页面中。

代码中，我们为什么要 ‘+value+’ 呢？

因为我们在显示页面，将会采用 SyntaxHighlighter 插件来高亮显示代码。

还有一点要说明，在这里，$content = htmlspecialchars($content); 我们对于代码本身，进行了 htmlspecialchars 转义操作。这样，插入数据库的代码则会是安全的。

OK,我们再来看 save.php,该页面用来显示提交的内容。

主要代码如下：

OK，完了。

有什么问题，可以给我留言。。。

^_^ ~~~

点击这里下载tinyMCE插件开发示例

浏览器兼容手册

scofield — Wed, 23 Dec 2009 14:07:22 +0000

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。

javascript部分

1. document.form.item 问题
问题：
代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements["elementName"]

2. 集合类对象问题
问题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event
问题：
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：
onMouseMove = "functionName(event)"
function functionName (e) {
e = e || window.event;
……
}

4. HTML对象的 id 作为对象名的问题
问题：
在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能
解决方法：
使用对象变量时全部用标准的 getElementById("idName")

5. 用 idName 字符串取得对象的问题
问题：
在IE中，利用 eval("idName") 可以取得 id 为 idName 的HTML对象，在FF中不能
解决方法：
用 getElementById("idName") 代替 eval("idName")

6. 变量名与某HTML对象 id 相同的问题
问题：
在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行
最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与 event.y 问题
问题：
在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x

8. 关于frame
问题：
在IE中可以用 window.testFrame 取得该frame，FF中不行
解决方法：
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'

9. 取得元素的属性
在FF中，自己定义的属性必须 getAttribute() 取得

10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes
问题：
childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点
解决方法：
可以通过 node.getElementsByTagName() 来回避这个问题
问题：
当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点
问题：
FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题
问题：
在IE中不能使用 const 关键字
解决方法：
以 var 代替

12. body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
解决方法：
一切在body上插入节点的动作，全部在onload后进行

13. url encoding
问题：
一般FF无法识别js中的&
解决方法：
在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

15. 元素属性
IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17. 调用子框架或者其它框架中的元素的问题
在IE中，可以用如下方法来取得子元素中的值
document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
在FF中则需要改成如下形式来执行，与IE兼容：
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName

18. 对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 obj.style.height = imgObj.height + "px";

19. innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;

21. 禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

22. 捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

CSS部分

div类

1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto

2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;
不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上子div 到父div 的距离为父padding + 子marign
IE里 y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里 y 轴上父padding=0 且 border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

，

，
，
和
是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
，，，，，和是 inline 元素的例子

2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题
全部注意补齐 width，height 属性

2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

转于蓝色理想 http://bbs.blueidea.com/thread-2941700-1-2.html

javascript 日期时间函数大全

scofield — Tue, 03 Nov 2009 10:39:13 +0000

var myDate = new Date();
    myDate.getYear();       //获取当前年份(2位)
    myDate.getFullYear();   //获取完整的年份(4位,1970-????)
    myDate.getMonth();      //获取当前月份(0-11,0代表1月)
    myDate.getDate();       //获取当前日(1-31)
    myDate.getDay();        //获取当前星期X(0-6,0代表星期天)
    myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours();      //获取当前小时数(0-23)
    myDate.getMinutes();    //获取当前分钟数(0-59)
    myDate.getSeconds();    //获取当前秒数(0-59)
    myDate.getMilliseconds();   //获取当前毫秒数(0-999)
    myDate.toLocaleDateString();    //获取当前日期
    var mytime=myDate.toLocaleTimeString();    //获取当前时间
    myDate.toLocaleString( );       //获取日期与时间

Json格式和数据类型介绍

scofield — Sun, 31 May 2009 14:18:56 +0000

点击这里查看 json 格式与PHP json 格式

1.前几天，我才知道有一种简化的数据交换格式，叫做yaml。

我翻了一遍它的文档，看懂的地方不多，但是有一句话令我茅塞顿开。

它说，从结构上看，所有的数据最终都可以分成三种类型：

第一种类型是scalar（标量），也就是一个单独的string（字符串）或数字（numbers），比如“北京”这个单独的词。

第二种类型是sequence（序列），也就是若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，东京”。

第三种类型是mapping（映射），也就是一个名/值对（Name/value），即数据有一个名称，还有一个与之相对应的值，这又称作hash（散列）或dictionary（字典），比如“首都：北京”。

我恍然大悟，数据构成的最小单位原来如此简单！难怪在编程语言中，只要有了数组（array）和对象（object）就能够储存一切数据了。

2.

我马上想到了json。

21世纪初，Douglas Crockford寻找一种数据交换格式，能够在服务器之间交换数据。这其实需要二步，第一步是将各种数据转化为一个字符串，也就是数据的串行化（serialization），第二步才是交换这个字符串。

当时通用的数据交换语言是XML，但是Douglas Crockford觉得XML的生成和解析都太麻烦，所以他提出了一种简化格式，也就是Json。

Json的规格非常简单，只用一个页面、几百个字就能说清楚，而且Douglas Crockford声称这个规格永远不必升级，因为该规定都规定了。

1）并列的数据之间用逗号（“，”）分隔。

2）映射用冒号（“：”）表示。

3）并列数据的集合（数组）用方括号(“[]“)表示。

4）映射的集合（对象）用大括号（“{}”）表示。

上面四条规则，就是Json格式的所有内容。

比如，下面这句话：

“北京市的面积为16800平方公里，常住人口1600万人。上海市的面积为6400平方公里，常住人口1800万。”

写成json格式就是这样：

[
{"城市":"北京","面积":16800,"人口":1600},
{"城市":"上海","面积":6400,"人口":1800}
]

如果事先知道数据的结构，上面的写法还可以进一步简化：

[
["北京",16800,1600],
["上海",6400,1800]
]

由此可以看到，json非常易学易用。所以，在短短几年中，它就取代xml，成为了互联网上最受欢迎的数据交换格式。

我猜想，Douglas Crockford一定事先就知道，数据结构可以简化成三种形式，否则怎么可能将json定义得如此精炼呢！

3.

我还记得，在学习javascript的时候，我一度搞不清楚“数组”(array)和“对象”(object)的根本区别在哪里，两者都可以用来表示数据的集合。

比如有一个数组a=[1,2,3,4]，还有一个对象a={0:1,1:2,2:3,3:4}，然后你运行alert(a[1])，两种情况下的运行结果是相同的！这就是说，数据集合既可以用数组表示，也可以用对象表示，那么我到底该用哪一种呢？

我后来才知道，数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。

4.

当然，数组和对象的另一个区别是，数组中的数据没有“名称”（name），对象中的数据有“名称”（name）。

但是问题是，很多编程语言中，都有一种叫做“关联数组”（associative array）的东西。这种数组中的数据是有名称的。

比如在javascript中，可以这样定义一个对象：

var a={“城市”:”北京”,”面积”:16800,”人口”:1600};

但是，也可以定义成一个关联数组：

a["城市"]=”北京”;
a["面积"]=16800;
a["人口"]=1600;

这起初也加剧了我对数组和对象的混淆，后来才明白，在Javascript语言中，关联数组就是对象，对象就是关联数组。这一点与php语言完全不同，在php中，关联数组也是数组。

比如运行下面这段javascript：

var a=[1,2,3,4];

a['foo']=’Hello World’;

alert(a.length);

最后的结果是4，也就是说，数组a的元素个数是4个。

但是，运行同样内容的php代码就不一样了：

$a=array(1,2,3,4);

$a["foo"]=”Hello world”;

echo count($a);

最后的结果是5，也就是说，数组a的元素个数是5个。点击这里查看 json 格式与PHP json 格式

（完）

jQuery技巧完全总结 [转]

scofield — Thu, 18 Dec 2008 14:18:13 +0000

一、简介

1.1、概述
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。
官方站点：http://jquery.com/  中文站点：http://jquery.org.cn/

1.2、目的
通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：

引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明：以上文档都放在了【附件】中)

四、语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(“msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(“#msg”)[0]，$(“div”).eq(1)[0]，$(“div”).get()[1]，$(“td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：
$(“div”).eq(2).html();    //调用jquery对象的方法
$(“div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$(“#msg”).html();    //返回id为msg的元素节点的html内容。
$(“#msg”).html(“new content“);
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(“#msg”).text();    //返回id为msg的元素节点的文本内容。
$(“#msg”).text(“new content“);
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

$(“#msg”).height();    //返回id为msg的元素的高度
$(“#msg”).height(“300″); //将id为msg的元素的高度设为300
$(“#msg”).width();    //返回id为msg的元素的宽度
$(“#msg”).width(“300″); //将id为msg的元素的宽度设为300

$(“input”).val(“); //返回表单输入框的value值
$(“input”).val(“test”); //将表单输入框的value值设为test

$(“#msg”).click(); //触发id为msg的元素的单击事件
$(“#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$(“p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$(“tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$(“p”).click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$(“p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
主要包括以下几种方式：
$(“#msg”).css(“background”);    //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色
$(“#msg”).height(300); $(“#msg”).width(“200″); //设定宽高
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(“#msg”).addClass(“select”); //为元素增加名称为select的class
$(“#msg”).removeClass(“select”); //删除元素名称为select的class
$(“#msg”).toggleClass(“select”); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件
$(“p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
function(){
$(this).addClass(“out”);
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(“Load Success”)})
//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(“p”).toggle(function(){
   $(this).addClass(“selected”);
},function(){
   $(this).removeClass(“selected”);
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$(“p”).trigger(“click”);    //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$(“p”).bind(“click”, function(){alert($(this).text());}); //为每个p元素添加单击事件
$(“p”).unbind(); //删除所有p元素上的所有事件
$(“p”).unbind(“click”) //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i a
lert(“Item #”+i+”: “+tempArr[i]);
}
也可以处理json数据，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(“  hello, how are you? ”); //返回”hello,how are you? “

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery(“div p”).hide();
// 使用其他库的 $()
$(“content”).style.display = ‘none’;

点击这里下载 JQeury

潘少宁的博客 » javascript教程

javascript 面向对象 和 javascript 类

json 格式与PHP json 格式

优化JavaScript脚本【转】

tinyMCE插件开发 之 插入html,php,sql,js代码，并高亮显示

浏览器兼容手册

javascript 日期 时间 函数 大全

Json格式和数据类型 介绍

jQuery技巧完全总结 [转]

javascript 面向对象和 javascript 类

tinyMCE插件开发之插入html,php,sql,js代码，并高亮显示

javascript 日期时间函数大全

Json格式和数据类型介绍