最近在看网上的前端笔试题，借鉴别人的自己来试一下：

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推。

有一点需要注意的是：在html中<a><area>标签中都有可能出现href

html中：

<!DOCTYPE html>

<html lang="zh" >

 <head> 

        <title>demo</title>

        <style type="text/css">

        </style>

 </head>

 <body >

        <div class="box">

                <div class="item"><a href='#'>默认</a></div>

                <div class="item"><a href='#'>销量</a></div>

                <div class="item"><a href='#'>信用</a></div>

        </div>

        <script type='text/javascript' src='practice.js'></script>

 </body>

</html>

js中：

var body = document.getElementsByTagName('body')[0],

   links = document.getElementsByTagName('a'),

   len   = links.length;

var foo = function(el){

    var tagName = el.target.tagName.toLowerCase();

    if((tagName==='a'||tagName==='area')&&el.target.href){

        for(var i=0;i<len;i++){

            if(links[i]===el.target){

                alert(i+1);

            }

        }

    }

};

body.addEventListener('click',foo,false);

我所看到的文章的作者写的特别好，他说，最好将事件监听函数添加在父级元素上，这样在连接比较多的时候也能够性能比较好，毕竟js的冒泡监听机制为我们提供了这个便利。

一天一小段js代码（no.4）的更多相关文章

  1. 一天一小段js代码（no.2）

    (一)可以用下面js代码来检测弹出窗口是否被屏蔽: var blocked = false ; try { /*window.open()方法接受4个参数window.open(要加载的url,窗口目 ...

  2. 一天一小段js代码（no.1）

    10000个数字中缺少三个数,编程找出缺少的三个数字. 算法实现: /*生成10000个数中随机抽掉三个数后的数组*/ function supplyRandomArray(){ /*生成含有1000 ...

  3. 一天一小段js代码（no.3）

    //遍历属性,返回名值对 function outputAttributes(element){ var pairs = new Array(), attrName, attrValue, i, le ...

  4. 由一段JS代码引发的思考

    不知道大家在编程的时候有没有遇到过这种情况,就是在循环遍历删除一部分内容的时候,发现只能删除其中一部分,而另一部分却总也删不掉,然后觉得自己的逻辑没有问题啊,于是陷入了深深的抑郁之中…… 昨天在处理一 ...

  5. 我要崩溃了，要解出这么一段js代码背后的东西，这真是一坨啊，别被高度欺骗了，他还有宽度！！！！！试着按下方向右键

    一坨js代码: function s_gi(un, pg, ss) { var c = "s.version='H.26';s.an=s_an;s.logDebug=function(m){ ...

  6. 网页调试js时，如何知道某个事件对应哪段js代码？

    有时候我们需要知道某个事件对应的js代码,比如点击一个div元素时,出现下拉框,我想知道这个功能对应的js代码,那就可以按下图操作: 勾选click事件,重新运行,那么就会在每个click事件那里设置 ...

  7. 用一段JS代码来比较各浏览器的极限内存与运算速度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 防止横竖屏时，iphone自动缩放的一段js代码

    function orientation_change() {     var viewport = document.querySelector('meta[name="viewport& ...

  9. 一段js代码

    原文地址 [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math ...

随机推荐

  1. NOIP2014 总结

    想了很久,才开始动笔. 怎么说,感觉挺对不起自己的.愚蠢的失误让我正好卡着一等线,真希望不要是二等奖. 最难过的是,努力全葬送在愚蠢上面了. 不过也好,学会平静自己也是一种能力. 半期考试也遭的一塌糊 ...

  2. 【记忆化搜索】bzoj1652 [Usaco2006 Feb]Treats for the Cows

    跟某NOIP的<矩阵取数游戏>很像. f(i,j)表示从左边取i个,从右边取j个的答案. f[x][y]=max(dp(x-1,y)+a[x]*(x+y),dp(x,y-1)+a[n-y+ ...

  3. mac下svn问题——“.a”(静态库)文件无法上传解决

    mac下svn问题——“.a”(静态库)文件无法上传解决    “.a”(静态库)文件无法上传(svn工具:Versions)          网上查询了一下,说是Xcode自带的svn和Versi ...

  4. Java学习笔记 05 数据包装类

    一.包装类 综述 >>java.lang包中的Integer类.Long类和Short类,分别将基本数据类型int.long和short封装成一个类.这些类都是Number的子类. Int ...

  5. 关于c++

    http://www.ezlippi.com/blog/2014/12/c-open-project.html

  6. [转]jQuery实现清空table表格除首行外的所有数据

    1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分. 其中J_tab_fam是table的id. 1 $("#J_tab_fam  tr:no ...

  7. arduino 入手

    新买了个ardhuino 入门套件 1. Win7 Driver issue: Need to install the below drivers, because my windows is ins ...

  8. web前端防治重复提交

    web前端开发中防治重复提交 web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表 ...

  9. List<String[]>

    1.List<Sttring[]>的用法 List<String[]> list = new ArrayList<String[]>();//声明一个List< ...

  10. (转)linux服务器安全配置攻略

    引言: 最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关闭.把系统权限设置到最小话,这样才能保证服务器最大的安全.下面是CentOS服务器安全设置,供大家参考. ...