JavaScript获取HTML DOM节点元素的方法的总结

  在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
  1. 通过顶层document节点获取:
  (1)document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
  如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。

, , , ,

JS全选复选框兼容google浏览器

这个代码可以兼容各个浏览器来实现全选,直接用getElementById是不兼容FF的。

<script language="javascript">
function selectIt(action,frm){
//act为1表示全选为0表示反选,如果没有checkbox会出错
 var es=frm.elements["checkbox"]
 for(var i=0,e;e = es[i],i<es.length;i++)
 e.checked=(action)?1:(!e.checked)
}
</script>

, , , , ,

彻底搞懂ajax乱码,javascript读取中文乱码

使用ajax乱码我相信谁都遇到过,而且头痛。我们一般都有自己习惯,比如两个网页都是用的gb2312,那就简单,不要去用什么转换函数,关键是后面这一点看清楚。网上讲的真是害人,可以把你说晕,乱转换。即使是两页的编码不一样,也不需要转换,不要在一页中混杂不同编码的字符就行了。

'我们在html页面使用js发送请求时要写明编码:
setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=gb2312");
'然后ASP页面中也要设置http头,不要以为保存成统一编码就行了,试试吧不会乱了。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%Response.Charset="GB2312"%>
'随便说一下,要用responseText 而不是 body ,body是生成的二进制编码,js中无法处理。

最后再简单的总结,假设我有两个网页,一个是html页,负责ajax方式调用asp页的内容。一个是asp页。asp页负责显示一些中文。
如果两个都是gb2312,那好办,html中setrequesthead中写明gb2312,asp页中加上response.charset=gb2312就可以了。
如果html页是gb2312,asp页是utf8,那么html中head还是设置为gb2312跟本文件编码一致,asp网页保持utf8格式的文本即可。
如果html页是gb2312,asp页是utf8,asp页又去调用了gb2312的网页呢,按上面说的必须保证asp显示的为utf8,也很简单,读取过来的文字虽然为gb2312,不是有个函数可以直接转吗 BytesToBstr(xmlhttp.responsebody,gb2312) 这样就行了。

, , , ,

天气预报代码和农历代码日期JS代码

效果图见下:

天气的代码是:
<iframe src="http://m.weather.com.cn/m/pn7/weather.htm " width="195" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
完整日期的代码: 
<SCRIPT language=javascript src="http://www.suntw.com/wp-content/uploads/time.js" type=text/javascript></SCRIP>
<!--注释-->

当然你完全可以把这个js下载到自己网站,不用引用我网内的。

, ,

JS滑动图层,滑动门,舌签特效代码

鼠标移到标签上,显示对应的内容,鼠标点击标签,显示对应的内容。有的说是滑动门特效,有的说是舌签,反正意思就是这样的。现在网页布局都很紧凑,这个功能是必不可少的,很多网站都在用,以后不用去乱找了,这个代码很经典的。
顺便在这里也发一下,菜单延迟特效的代码,不至于鼠标移上去就执行。 代码详见内页

,

用js方式读写Cookies

function   setCookie(name,value) {
     var Days = 30;   //此cookie 将被保存30天
    var  exp =  new Date();    //new   Date( "December   31,   9998 ");
     exp.setTime(exp.getTime() + Days*24*60*60*1000);
     document.cookie = name + "= "+ escape(value) + ";
     expires= "+ exp.toGMTString();
}
function getCookie2(objName){ //获取指定名称的cookie的值
   var arrStr = document.cookie.split("; ");
    for(var i = 0;i < arrStr.length;i ++){
    var temp = arrStr[i].split("=");
    if(temp[0] == objName) return unescape(temp[1]);
   }
}

, ,

JS实现选中的复选框高亮背景

1
2
3
4
5
function chaCloor(field){
var pig = field.checked;
pig?field.parentNode.style.backgroundColor="yellow":field.parentNode.style.backgroundColor="";
}//这个效果非常酷,觉得有用别忘了顶。
 <li><input type="checkbox" onClick="chaCloor(this);" />选项</li>

, , ,

JS平滑毫秒倒计时特效

这个倒计时不会卡,代码很简单,很值得参考借用,可以平滑的显示剩余时间毫秒数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id=msg></div>
</body>
<script language="javascript"> 
function clock(){ 
document.getElementById('msg').innerHTML="本窗口将在"+i+"秒后关闭";
if(i==0){
clearTimeout(st); 
window.opener=null; window.close();} 
i = i -1; 
st = setTimeout("clock()",10); 
} 
var i=10000;
clock(); 
</script>

,

读取任意QQ空间音乐列表代码

QQ空间音乐读取器可以在线窃取好友的音乐列表,只需要输入对方的qq号,便可以直接下载,或者在线播放,十分方便,玩qq空间的朋友必备,嘿嘿

源码下载地址:http://www.suntw.com/qq/qqLoadmp3.rar
在线演示地址: http://www.suntw.com/qq

, ,