你是不是还在不厌其烦地为每种表单元素（input）类型（type）加上相应的class,（text、password、file...），Firefox, Opera等可以支持属性选择器input[type="???"]及其伪类:focus，那IE怎么办？我们还有javascript。
遍历所有的input元素
var input= document.getElementsByTagName("input");
for (var i = 0; i < input.length; i++)
{
input[i].className = input[i].type;
}
给相应type的input定义一个className，名称等同于type，（type="password"则它的class="password"）。focus的效果可以用onfocus和onblur
input[i].onfocus = function() {
this.className = this.className + " " + this.className + "focus";
}
input[i].onblur = function() {
this.className = this.type;
}
然后定义相应事件下的样式，比如.textfocus, .passwordfocus等。最后你当然要判断一下，因为Firefox, Opera不需要这些代码的支持，所以
window.onload = function() {
if (document.all && !window.opera) //判断是否为IE
{
styleform();
}
}
具体效果看这里
不多说，最近在做网页的时候用到了，顺便记录一下。这里可以看效果
<script type="text/javascript">
function changes(obj){
var TextIn=document.getElementById("textin");
if(TextIn.createTextRange){
//ie兼容
TextIn.focus();
document.selection.createRange().duplicate().text=obj;
}else{
//firefox兼容
var iStart = TextIn.selectionStart;
var iEnd = TextIn.selectionEnd;
TextIn.value=TextIn.value.substring(0,iStart)+obj+TextIn.value.substring(iEnd,TextIn.value.length);
endRange=iStart+obj.length;
TextIn.setSelectionRange(endRange,endRange);
}
}
</script>
<textarea cols="40" id="textin">选中这里的文字，然后点change试试看。</textarea><input type="button" onclick="changes('文字被替换了！')" value="change" />
我想prototype.js里的ajax对象肯定吸引了不少人，大量封装好的ajax逻辑的类，对于我们这些初学者使用ajax有很大的帮助。
以下用一个我的具体使用例子来解释：效果看这里
1. Ajax.Request
你可以这样创建它
var url = 'http://yoursever/your/your';
var pars = 'id=xxx';
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: yourfunction}
);
parameters表示你要传递的参数，比如id=xxx这些。XMLHttpRequest在HTTP请求期间的阶段分为：Loading, Loaded, Interactive, Complete。Ajax.Request对象在任何一个阶段都可以调用你自定义的方法，形式如onxxxxxxx:yourfunction,比如我们上面提到的onComplete，是最常用的。
例子中实际使用的代码
function sends(id)
{
c = $('content');
o = $('old-content');
c.innerHTML = "载入中...
";
o.innerHTML = c.innerHTML;
c.style.display = 'none';
o.style.display = 'block';
var myAjax = new Ajax.Request('content_'+ id + '.html', {method: 'get', onComplete:updates});
}
function updates(response)
{
new Effect.Fade($('old-content'));
new Effect.Appear($('content'));
$('content').innerHTML = response.responseText;
}
Sam Stephenson 的 Prototype JavaScript framework 库，的确是博大精深，不过似乎这位达人没有什么时间写应用文档，然后你拿到这个代码，只能自己扎进去尝试研究。
我先介绍几个我目前了解的简单方法把。
1. $()方法 －－按ID查找元素
$()的功能就是等同于 document.getElementById() ，不过更简便（很短 :)）,更强大。它可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。
一个简单的使用效果可以看这里
2. $F()方法 －－返回任何输入表单控件的值
$F()方法又是一个非常方便的缩写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。
<script src="Prototype.js"></script>
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="名字">
<input type="button" value=Test3 onclick="test3();">
3. Ajax
prototype.js的ajax对象
最近一直很忙，可以说是喘不过气来，没什么时间更新blog。五一也不知道有什么安排，希望能好好休息一下。虽然挺辛苦，但是还是有很多收获的。
比如这次介绍的这个图片Rollover效果，很酷。
图片Rollover效果：在线预览 | 下载（包括图片PSD）
里面的js库好像是很久之前国外一个达人制作的（2001年...）
最近也开始尝试在工作中使用 达人 Sam Stephenson 的Prototype JavaScript framework js库，目前版本是1.4.0，具体可以看这里。一个简单的使用效果可以看这里。
用到了Ajax的效果，另外还有Thomas Fuchs的effects.js的 Fade、Appear效果，详细看这里。
的确大大简化了写js的工作量，对这几位达人表示由衷的敬佩。
