现在的位置: 首页 > 综合 > 正文

javascript 实用小技巧之一

2012年11月21日 ⁄ 综合 ⁄ 共 2652字 ⁄ 字号 评论关闭

以前没有怎么使用过this 关键字对象,也没怎么用心去理解过,最近接触到了,走了不少弯路,现记载下来,跟需要的朋友分享,望高手多多支持新人的成长。。。。

1

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5<title>hhhh</title>
 6<script type="text/javascript">
 7function ff()
 8{
 9  alert(this.id);
10}

11
</script>
12</head>
13
14<body>
15<div id="div1" onclick="ff()"> click on me</div>
16
17<div id="div2">this is son</div>
18</body>
19</html>

 

代码说明:想通过点击div1 的onclick事件来控制div2的相关属性,但以上函数出现了问题,问题就处在了 this 上面,参考来自http://topic.csdn.net/u/20081021/01/4ef4ed08-0f34-4587-8d61-0d1649bede98.html 的文章解释:

对于ff这个函数:

function ff(){
    alert(this.id);
}
这个函数是全局函数,这种全局函数实际上是属于window的(可以通过window.doSomething来访问),如果直接调用,那么根据“this always refers to the “owner” of the function we're executing”,那么函数中的this就是window,但是window没有id属性,所以显示“undefined”;

在html元素中这样调用

<div id="div1" onclick="ff();">div1 </div>

这时也会显示“undefined”,这就相当于如下代码:

document.getElementById("div1").onclick = function(){doSomething();}
当点击div1时,调用属于window的doSomething函数,所以也是显示“undefined”;

也可以进行验证:

function ff(){
    alert(this.id);
}
alert(window.ff);//证明了doSomething是属于window的
}

2.那我们可以怎么进行改进呢

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>hhhhhh</title>
 6 <script type="text/javascript">
 7 function ff()
 8 {
 9   alert(this.id);
10 }
11 </script>
12 </head>
13 <body>
14 <div id="div"> click on me</div><br />
15 
16 <div id="div2">this is son</div>
17 <script type="text/javascript">
18  
19  var s= document.getElementsByName("div");
20  for(var i=0;i<s.length;i++)//若是模板生成div,并且是对奇数次的div 添加onclick事件的话,可以用i+=2           
21  {
22     s[i].onclick = ff
23 
24  } 
25  
26   </script>
27 </body>
28 </html>

如上也是可以实现的,不同的是动态添加了onclick 事件。

3.下面还有一种最为简单的 ,也是开始没有想到的

 

Code

 

好了,到这朋友们可以看出那种方法比较简单了,多提一点,就是当div1 和div2 全是模板替换生成的时候,可能就没id 的属性,那么怎么用第一个div去控制第二个div的属性呢,比如去控制display属性,这也是平时用到的比较多的, alert(a.nextSibling.id); 不就正可以实现么。呵呵

 

不当之处,欢迎指正。

抱歉!评论已关闭.