• 阿里的前端前期小测验


    做完就感觉自己就是欠练。。。做题的时候着急。头脑一片白啥也想不起来了。只用了最简单的办法做还出了问题。。比如什么审题啊。又或者连题意我都没读明白就开始做了,题很简单。但是错在我自己。。把这道题粘出来以后做个教训吧。。。

    实现一个方法genCssSelector,可以根据一个给定的元素生成一个CSS选择器,通过这个选择器可以快速定位到这个元素(document.querySelector(A))
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <div id="page">
    <div class="content main">
    <div class="refer">
    <ul>
    <li></li>
    <li></li>
    ...
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>
    根据上述HTML结构,完善如下JavaScript代码中的“your code here”部分,使得click事件中的注释要求符合预期:
    var genCssSelector = function(){
    // your code here
    }

    document.addEventListener('click', function(e){
    //点击li时,返回:html body #page .content.main .refer ul li
    console.log(genCssSelector(e.target));
    })

    当时提交的方法我就不粘了。。就是个小白感觉都比我答的好。。粘一个我最后几分钟读明白题才想好的办法代码吧。当然已经来不及了。

    var genCssSelector = function(e){
            var obj = document.querySelector(e.tagName);
            var str =[];
            var i=0;
            while(1){
                if(obj.parentNode==null||obj.parentNode==''||obj.parentNode==undefined){
                    break;
                }else{
                    if(obj.className){
                        str[i] = '.'+obj.className.replace(' ','.');
                    }else{
                        if(obj.id){
                            str[i] = '#'+obj.id;
                        }else{
                            str[i] = obj.tagName;
                        }
                    }
                    i++;
                    obj = obj.parentNode;
                }
    
            }
            str.reverse();
            return str.toString().replace(/,/g,' ').toLowerCase();
        }
         
        document.addEventListener('click', function(e){
             //点击li时,返回:html body #page .content.main .refer ul li
            console.log(genCssSelector(e.target));
        })

    基本功还是不行,还是欠缺锻炼,看来还得多打代码了。

  • 相关阅读:
    Shell是linux下的脚本语言解析器
    semver 是 语义化版本
    js中限制字符串输入中英文字符的长度封装
    chalk.js(node终端样式库)
    分页
    利用Nodejs的os.networkInterfaces()模块修改vuecli项目默认打开地址
    物理像素
    长列表优化eg
    [JSOI2008]球形空间产生器
    标记不下传线段树(混蛋树)
  • 原文地址:https://www.cnblogs.com/acefeng/p/8626813.html
Copyright © 2020-2023  润新知