前端组件练习

1.请写一个表格以及对应的CSS,使表格奇数行为白色背景,偶数行为灰色背景,鼠标移上去时为黄色背景。
知识点:标签<table>选择器nth-child选择器:hover
标签table下包含三钟标签:th(head)表格的头,tr(row)表格的行,td表格单元。

 1 <table border="1">
 2   <tr>
 3     <th>Month</th>
 4     <th>Savings</th>
 5   </tr>
 6   <tr>
 7     <td>January</td>
 8     <td>$100</td>
 9   </tr>
10 </table>
View Code

 



:nth-child()选择器是CSS3中的内容,比如p:nth-child(3)是选择在元素p的父元素下(即与p同级),第3个p元素
:hover选择器是CSS1中的内容,选择当鼠标指向该元素时。
 1 <table class="table">
 2   <tr><td>11111</td></tr>
 3   <tr><td>22222</td></tr>
 4   <tr><td>33333</td></tr>
 5   <tr><td>44444</td></tr>
 6 </table>
 7 
 8 <style>
 9   .table tr:nth-child(2n-1){
10       background-color:white;
11   }
12   .table tr:nth-child(2n){
13       background-color:grey;
14   }
15   .table tr:hover{
16       background-color:yellow;
17   }
18 </style>
View Code

 

2.有一个包含数据列表的页面,数据行数不确定。每一行数据都有一个删除按钮,单击删除按钮删除该列数据,请用JavaScript实现该功能。
知识点: 事件代理、DOM操作、IE兼容性
我们可以给每个按钮绑定一个事件,但这样不高效。我们需要使用事件代理(委托),利用事件冒泡,给按钮的上层元素绑定事件,然后根据事件对象event来判断那个按钮被触发了。
IE事件和DOM事件是不一样的,这里我们就需要考虑兼容性的代码。或操作符||在兼容性代码中可替代if else判断。

 1 //DOM事件中,事件对象会被传入到回调函数中
 2 //IE事件中,如果不是调用attachEvent()函数,获取事件对象就需要访问全局的window.event。
 3 var ev = event || window.event;
 4 
 5 //DOM和IE的事件对象属性也不同
 6 //target是DOM事件,srcElement是IE事件。
 7 var target = ev.target || ev.srcElement;
 8 <ul>
 9     <li>一<button>删除一</button></li>
10     <li>二<button>删除二</button></li>
11     <li>三<button>删除三</button></li>
12 </ul>
13 <script>
14     window.addEventListener('load', function () {
15         var ul = document.getElementsByTagName('ul')[0];
16         ul.addEventListener('click', function (ev) {
17             ev = ev || window.event;
18             var target = ev.target || ev.srcElement;
19             // 当点击的元素===button元素时,移除此button所属的li元素
20             if (target.tagName.toLowerCase() === 'button') {
21                 var li = target.parentNode;
22                 li.parentNode.removeChild(li);
23             }
24         });
25     });
26     // 另一种写法(不推荐):
27     // window.onload = function () {
28     //     var btnArr = document.getElementsByTagName('button');
29     //     for (var i in btnArr) {
30     //         btnArr[i].onclick = function (ev) {
31     //             var ev = ev || window.event;
32     //             var target = ev.target || ev.srcElement;
33     //             var li = target.parentNode;
34     //             li.parentNode.removeChild(li);
35     //         };
36     //     }
37     // };
38 </script>
View Code

 

3.页面每隔1s输出1、2、3、4,输完4个数后停止输出

setInterval()是启动定时器,clearInterval()是停止定时器。

由于JS单线程的特性,当定时器到时间后,回调函数并不会立即执行,而是将任务放入任务队列,只有当同步线程上没有任务且任务队列前方无任务的情况下,回调函数才会执行,所以一般实际定时时间会稍大于设定时间。

由于回调函数传递的是函数引用,当回调函数在执行的时候,引用了上一级作用域上的变量num 和 id 。

var num = 1;
var id = setInterval(function() {
     console.log(num);
     num++;
     if(num==5)
          clearInterval(id);
}, 1000);

 

 

 

【Reference】
1. 【前端】2015阿里前端实习生在线笔试题http://www.cnblogs.com/forzhaokang/p/5184682.html

 

posted @ 2017-04-24 22:26  水煮海鲜  阅读(196)  评论(0编辑  收藏  举报