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

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，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. PHP的运行机制与原理(底层) [转]

    说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来处理请求.文件流.错误处理等相关操作:Zend引擎(ZE)用以将源文件转换成机器语 ...

  2. 用servlet和jsp做探索数据库

    1.建一个web文件,在里面分三层,分别是实体层:DAO层,DAO层里面包含BaseDAO(数据访问层)和DAO层:还有一个servlet层,处理数据逻辑层! 一.实体层,建立两个实体,一个membe ...

  3. 【动态规划】bzoj1663 [Usaco2006 Open]赶集

    http://blog.csdn.net/u011265346/article/details/44906469 #include<cstdio> #include<algorith ...

  4. 3_for循环的拓展应用

    HTML代码: <input type="button" value="1"/> <input type="button" ...

  5. 如何获取URL中的参数

    获取URL中的某个参数或者所有参数以便我们后续去修改这个地址,在程序中是非常必要的.网上有很多这样的代码片段,为了以后查阅方便,顺便整理思路,下面使用2种方法来获取URL中的某个参数. 方法一 ,sp ...

  6. sqlserver游标的使用方式

    ----臨時表 把數據抄寫到此表,然後做2個表的同步 SELECT [FA_NUMBER] ,[STATUS] ,[FA_REQUESTOR] ,[CALI_NUMBER] ,[AMT] FROM [ ...

  7. JS自执行匿名函数

    常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿 ...

  8. ExtJS 列表数据编辑

    在ExtJs中,GridPanel一般用于展示列表数据.同时利用一些附加的插件也能编辑数据.类似于asp.net中的DataGridView控件. 展示数据比较简单,利用Store则可以自动展示,只要 ...

  9. linux琐碎命令学习

    kill -l会把linux的信号都列出来.1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP6) SIGABRT 7) SIGBUS 8) SIG ...

  10. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...