当前标签: js

innerHTML的一个BUG——丢失绑定事件04/23/2009

在编写一个后台的小应用的过程中,我碰到了这个bug,由于该系统之前已经开发完成,在验收阶段,客户要求加入这个快速输入的小功能,省却重复输入之烦恼。为了让程序在修改了千疮百孔之后依然显得可维护性很强,我不得不考虑动态创建元素。于是,在我快乐的敲入完代码以后,快乐的拿起鼠标点击生成的链接的时候。。。。点击链接的时候。。。。我点,我点。。。我连续的点击到我的鼠标明显的感到有意见的时候,程序都没有按照我的意愿去执行。什么原因呢?我们来看看我之前写的那段代码:

太给力了,让我看完 »

| 2条评论分类: web前端编程 标签:  

JS对IE下表单元素name和id不同步的取值异常BUG03/08/2009

随着小生与IE的交往越来越深入,这个并不陌生的老朋友的坏脾气也一天一天的被挖掘出来,尽管她试图遮遮掩掩,蒙混过关……
这次的bug出在一个表单验证上,我用javascript对用户的输入进行客户端验证,由于需要在之前已经完工的表单上加入一个新的元素来显示一些额外信息,意外的,我将这个元素的id取了一个和之前已经存在的表单元素的name相同的名字,我的表单验证使用document.forms['form_name'].elements['element_name']来定位元素,因此未给之前的任何元素id属性。呼呼!bug就这样出现了,当我们验证之前元素的checkd属性时,总是返回undefined,这实在太奇怪了!我们将其与SVN中的上个版本比较,发现只是增加了一个元素,回溯到上个版本,一切正常,问题就在这个元素上了,我们去除了这个新增元素的id属性,表单验证的js代码又能工作了。
     今天,我仔细研究了一下这个问题,发现:只要表单元素的id和name值不同,即会引发javascript取元素不准确的bug,最后我还发现form.elements['element_name']取表单元素如果id和name相同的值却指向不同的元素,该方法居然只能返回undefined,不管在ie还是firefox、opera下。
     看我做的一个示例来重现这个bug吧,我故意将第一个元素的id和第二个元素的name值设为相同,第二个元素的name等于第一个元素的id,而第三、四两个元素的设置是正常的,接着使用了三种方法:getElementById、getElementsByName、elements来获得value,结果在ie6、ie7下,无论是使用getElementById还是getElementsByName都不能取到第二个元素(文本框)的value,在ff、opera下却都能正常工作。

点击查看ie下name和id不同步导致的js取值异常的demo

| 2条评论分类: web前端编程 标签:  

js dom元素查找方法的总结11/22/2008

一直艳羡jquery的强大的元素查找功能,但是,随着对HTML DOM了解的加深,终于这层神秘的光环也渐渐退去。呼呼,那我好好总结一下Javascript dom的元素查找方法吧。

  1. getElementById:这个最司空见惯的根据id定位对象的方法
  2. getElementsByName:根据name(名称)获取一组对象的集合
  3. getElementsByTagName:根据标签名来获得一组对象集合
  4. getElementsByClassName:其实不存在这个方法,但是我们可以根据前面的几个方法来自定义,不错吧
  5. nextSibling:获得下一个元素对象(大概兼容性存在点问题)
  6. previousSibling:获取上一个元素对象(兼容性有点问题)
  7. parentElement:获取当前元素的父对象
  8. children:所有子元素对象的集合
  9. firstChild:第一个子节点
  10. lastChild:最后一个子节点
  11. parentNode:父节点
  12. childNodes:所有子节点的集合

这里需要注意的是:parentNode 、childNodes、firstChild、lastChild、nextSibling、previousSibling 这些节点的定位方法,在某些时候IE和FF返回的结果竟是迥然不同的,不得不在此表示对IE的鄙视一下!

| 3条评论分类: web前端编程 标签:  

用JS动态构造GET请求之谜(ajax跨域的另类解法)10/31/2008

有的时候,会有这样一种情况,当我们需要收集一些用户的页面数据或者浏览器、屏幕分辨率等时,而且这些数据是尽可能的真实的,如果让用户填写一个表单来提交,这有很多人是不愿意去做的,除非你正在举行一个抽奖,他们大概才会乐此不疲,数据亦缺乏准确性,解决方法是使用JS,对!使用Javascript脚本就能轻松的取得我们需要的数据,但怎么提交到服务器就成了一个问题,使用AJAX确实是一个优越而又可行的办法,可是,有的时候我们不用表现的如此优雅,直接使用JS动态构造一个GET请求,不由分说的提交到服务器,问题也就解决了,这过程中同样不需要用户的介入,OK,看看我的一点拙劣的做法吧。
众所周知的一件事情是:使用script标签,能在页面中新开一个通信连接(当然你可以说iframe,object标签也可以),如果我们将script标签的src指向一个php文件,那么它就可以向服务器提交数据了。动态创建script标签的方法有两种,其实实质上是一样的。

这里我先创建了一个js文件,供后面将动态创建的元素的src直接指向该文件s.js内容很简单:

1
2
3
4
5
6
if(v !=''){
alert(v);
}
else{
alert('生活于三山两水间,无比惬意释然。');
}

1、使用createElement动态创建script元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var v='';
try{
v='7777';
var script_el=document.createElement("script");
script_el.type="text/javascript";
script_el.src="s.js?"+Math.random();
h=document.getElementsByTagName("head")[0];
h.appendChild(script_el);
}
catch(e){
alert(e);
}
v='改哈子看看有嘛效果';
</script>

2、使用document.write直接写入

1
2
3
4
<script type="text/javascript">
var v='其实这个例子举得非常失败,我。。。';
document.write('<script type="text\/javascript" src="s.js?"'+Math.random()+'><\/script>');
</script>

这两种都能轻松的动态创建一个script标签,来构造get请求,可以根据实际情况选择使用2种方法。
给出完整的演示:https://www.zendstudio.net/libs/use-js-create-script-tag-demo/ajax中的跨域问题也就可以这么解决了,获取远程服务器数据,不再是难题,这种方法不好使用XML而已。

忘记说那个“迷”了,之前我用createElement创建了script标签,没有使用appendChild方法进行附加,导致请求没有起作用,特此记录。

| 2条评论分类: web前端编程,我爱PHP 标签:  

用JS onpaste事件禁止向控件粘贴内容10/21/2008

应该是快钱看到的实现,叫我确认手机号码,我就想偷懒,把上面填了一遍的复制下来,结果不让!

气的我不得不看一下代码(自动接触PHP后落下的这职业病,现在怕是要陪伴我一生了)
[codes=html]
<input name="mobileNo1" class="width150px" tabindex="2" type="text" maxlength="11" value="" onpaste="return false;"/>
[/codes]

额,原来是这么个新鲜事件onpaste,从字面上理解是“粘贴事件”,看了相关资料

onpaste Event

Fires on the target object when the user pastes data, transferring the data from the system clipboard to the document.

Platform Support
IE  Netscape  Mozilla      Opera  Safari
4.0+  no            no    no            1.0+

当用户从系统剪贴板粘贴数据、传输数据时,激活此事件。只有IE和Safari是支持该事件的,难怪我都不曾见过(借口!!)

不过,我发现,用Ctrl+拖动,还是可以将内容复制过来滴。。。。

| 发表评论分类: web前端编程 标签:  

自己制作google桌面小工具 有趣的学习JS10/04/2008

     这是个很有意思的工作,你一边在方便了自己日常事务的同时,会略微感到惬意,因为这个使你方便的工具是你自己创造的,更不可思议的是,它是用javascript打造的,当然JS是核心,这个应用称之为“web应用”更贴切些,为了美观,我们需要用到图片(以PNG最为常见),CSS样式表来支撑这项工作,它就是google桌面小工具。
    这个小玩意儿让我看到,web应用和桌面应用的分界越来越模糊了,因为这个几乎全部是用js写的东西却的的确确的在你的桌面上运行着,像一个士兵一样负责任的为你工作着。。。。当然,出于无聊,我试着自己打造一个小小的应用,就是显示一下今天的日历,以我认为美丽的方式,在网络找了一圈,没有发现合适的,这里我想起了毛主席他老人家的谆谆教诲—“自己动手,丰衣足食”。

    GOOGLE提供了桌面小工具的开发工具包的下载,整个大小也就4M多,还包含了N多的例子教程,所以,我料想它也不会复杂到哪儿去,去google看了下这个SDK的介绍,果然是简单!
    做法我就不细说了,我倒是觉得用这玩意来学习JS,感觉乐趣平添了不少,做前面的日历,先弄几张图片,作为背景,画几个控件,分别放年月日。然后用js new Date()一个,然后分别获取当前年月日,控件innerText之,就算完成,然后打包,或者直接安装上,它就会在侧边栏上了,你就能天天看了,颇有几份成就感。

当然,这个着实简单,另外,google提供了丰富的api,让JS轻松的和系统通信,爽哉!

这种机制还真的不错,妙不可言呐。。。。。

| 9条评论分类: web前端编程 标签:  

SWFObject 2.1 最新版语法调用示例09/10/2008

我一直都在用SWFObject 插入flash,好处多多,代码简洁,不会出现微软的“单击此处以激活控件”的提示(据可靠消息,这个是微软惹的官司,其结果是害苦了用户)。不过先前的调用方法着实有些繁琐,先实例化->添加参数、变量->写入,搞的跟把大象装冰箱里头一样麻烦。好在作者终于注意到这一点,在新的2.x版本中,其最简单的调用竟只需一句话,并且不需要等待页面加载完成,这意味着你可以将这句话写在页面的任何地方,由此可见人类的科技水平进步之快,下面我们就来列举几个我们在日常开发中最常用到的几个调用实例。 让我膜拜一下全文吧 »

| 发表评论分类: web前端编程 标签:  

js实现的轮换效果 图片+简介同步轮换 兼容多浏览器03/31/2008

自己写的一个javascipt实现,用于某网站的辅导员轮显,其中辅导员图片和寄语是同步的,使用innerHTML做了数据与表现的分离,这样更方便从数据库调用数据进行集中初始化。可能SEO稍微的显得不够友好,但同时本段代码也将表现的div减到最少。
没有实现淡入淡出效果,这个有时间我得补补CSS滤镜的课,呵呵,初步的效果就是这样的了
详细的演示地址:https://www.zendstudio.net/libs/js-trun-pictures/
全部的代码如下: 让我膜拜一下全文吧 »

| 3条评论分类: web前端编程 标签:  

网上铺天盖地的纯CSS实现lightbox效果的一点小改动03/21/2008

lightbox还是很好玩的东西,闲下来的时候就在网上乱翻,发现了超多叫做纯CSS Lightbox效果 的,google出来的代码完全一样(说明全是转载,到底是谁转载谁,就不得而知了),号称无JS,如果吹毛求疵的讲,控制那个层显隐的还是JS嘛!(*^_^*偶尔钻下牛角尖)不过还是蛮实用的,除了用js做出的渐显和渐隐,效果几乎是一样的啦!在IE下运行的时候,因为会在右边出现空白边,所以我加了一句body{margin:0}来解决这个问题。好吧,人云亦云一回,以下是那个铺天盖地的代码,我做了一点点改动. 让我膜拜一下全文吧 »

| 10条评论分类: web前端编程 标签:  

在网页中调用实现显示最新的QQ签名 PHP代码01/15/2008

    难得,真的很难得,今天得偷闲了一天,无聊着呢,就想让偶的个性签名显示在博客上,于是整,找到一个曲径通幽的方法,就是找滔滔(差点打成套套),我用PHP写的一段代码,就一个字符串出来,无甚技术含量,倒是之前找调用点——api费了半天脑筋,OK,看代码。 太给力了,让我看完 »

| 6条评论分类: 我爱PHP,网络通信协议 标签:  

PHP界大牛们
反人类不分昼夜
牛掰级朋友圈子