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

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，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. Iscroll解析

    做了一些移动端的产品,发现一些滚动效果很多会使用 iscroll 作为底层库(如阿里小蜜).iscroll 的文档已经好久没更新了,而且比较简单,经常需要直接读源码.这里写一篇总结,作为对 iscro ...

  2. java: R文件重复

    导入eclipse工程到intellij里面, 然后出现各种错误, xxx.R文件重复, 各种资源id在R文件中找不到, 后来发现是intellij默认将整个项目以及gen文件夹作为源代码目录了, 在 ...

  3. 用Backbone.js创建一个联系人管理系统(三)

    原文: Build a Contacts Manager Using Backbone.js: Part 3 欢迎回到这系列的教程,关注使用Backbone.js构建应用程序. 如果你还没看过第一,二 ...

  4. nginx搭建笔记

    1. nginx安装 Env: Mac OS 10.10 Yosemite pcre: http://pcre.org/ $tar -zxf pcre-8.34.tar.gz $cd pcre-8.3 ...

  5. 关于node.js和npm，cnpm的安装记录以及gulp自动构建工具的使用

    关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...

  6. svn服务器搭建与使用

  7. JS制作计算器（键盘版）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  8. Win7 64位 VS2015及MinGW环境编译FFMPEG-20160326

    因为又要弄MinGW了,所以顺便把FFMPEG编译了,文章主要参考这篇,防抽所以复制一遍,顺便加些自己的内容 http://blog.csdn.net/finewind/article/details ...

  9. 【转载】Adapter用法总结大全

    下面的是看到的比较好的地址: Android各种Adapter的用法:                 http://my.oschina.net/u/658933/blog/372151 Andro ...

  10. ArcGIS10.1 api for Flex开发用于ArcGIS 9.3时QueryTask 'Error #2032'错误的解决方案

    因客户GIS软件需求,将应用降级到低版本ArcGIS9.3,不仅数据有些样式.配色.字符有些问题,API也要相应“降级”,解决如下: 利用9.3+flex做QueryTask时候出现了[RPC Fau ...