码迷,mamicode.com
首页 > 其他好文 > 详细

阿里的前端前期小测验

时间:2018-03-22 22:39:05      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:++   UNC   char   点击   gpo   htm   replace   you   listen   

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

 

实现一个方法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));
    })

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

阿里的前端前期小测验

标签:++   UNC   char   点击   gpo   htm   replace   you   listen   

原文地址:https://www.cnblogs.com/acefeng/p/8626813.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!