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

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，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. linux不知道文件在哪,想查找文件内的字符串

    find . -name "*.*" |xargs grep "xxx"

  2. Dreamweaver 升级问题汇总

    Adobe的产品开始从CC (Creative Cloud) 开始转向云平台,CS将逐渐成为过去时.不过CC并不限制用户在同一台机器上同时使用CS和CC,这种策略估计要持续较长一段时间. If you ...

  3. ORACLE RAC 11G 更改 /etc/hosts文件

    来自官方文档:()Can I change the public hostname in my Oracle Database 10g Cluster using Oracle Clusterware ...

  4. php嵌套数组递归搜索返回数组key

    var rewardTypes={"experience":{"\u7ecf\u9a8c\u503c":{"1":"\u660e\ ...

  5. 程序猿，千万别说你不了解Docker！

    放在两年前,你不认识Docker情有可原.但如果现在你还这么说,不好意思,我只能说你OUT了.你最好马上get起来,因为有可能你们公司很快就会引入Docker. 今天就和大家讨论讨论这个备受好评的应用 ...

  6. 13.Xcode开发的快捷键

    1.文件 CMD + N: 新文件: CMD + SHIFT + N: 新项目: CMD + O: 打开: CMD + S: 保存: CMD + SHIFT + S: 另存为: CMD + W: 关闭 ...

  7. bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)

    bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8) Q: hubery@roaster:~$ locale loc ...

  8. iOS App打包上架的流程

    一.申请苹果开发者账号 首先需要申请苹果开发者账号才能在APP store 里发布应用. 开发者账号分为:(1)个人开发者账号   (2)企业开发者账号   主要的区别是:点击打开链接 1.个人开发者 ...

  9. 我与solr(二)--导入mysql数据库

    关于solr的搭建详见上一篇的随笔. 步骤1: 在webapps中solrhome下新建一个文件夹名字叫做mynode(名字不固定,可以随便取,但是这个名字在后面的配置中会有所关联.)然后在mynod ...

  10. POJ 2352 Stars（树状数组）

    Stars Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30496   Accepted: 13316 Descripti ...