前端组件练习

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

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

 

:nth-child()选择器是CSS3中的内容，比如p:nth-child(3)是选择在元素p的父元素下(即与p同级)，第3个p元素。
:hover选择器是CSS1中的内容，选择当鼠标指向该元素时。

<table class="table">
  <tr><td>11111</td></tr>
  <tr><td>22222</td></tr>
  <tr><td>33333</td></tr>
  <tr><td>44444</td></tr>
</table>

<style>
  .table tr:nth-child(2n-1){
      background-color:white;
  }
  .table tr:nth-child(2n){
      background-color:grey;
  }
  .table tr:hover{
      background-color:yellow;
  }
</style>

 

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

//DOM事件中，事件对象会被传入到回调函数中
//IE事件中，如果不是调用attachEvent()函数，获取事件对象就需要访问全局的window.event。
var ev = event || window.event;

//DOM和IE的事件对象属性也不同
//target是DOM事件，srcElement是IE事件。
var target = ev.target || ev.srcElement;
<ul>
    <li>一<button>删除一</button></li>
    <li>二<button>删除二</button></li>
    <li>三<button>删除三</button></li>
</ul>
<script>
    window.addEventListener('load', function () {
        var ul = document.getElementsByTagName('ul')[0];
        ul.addEventListener('click', function (ev) {
            ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            // 当点击的元素===button元素时，移除此button所属的li元素
            if (target.tagName.toLowerCase() === 'button') {
                var li = target.parentNode;
                li.parentNode.removeChild(li);
            }
        });
    });
    // 另一种写法(不推荐)：
    // window.onload = function () {
    //     var btnArr = document.getElementsByTagName('button');
    //     for (var i in btnArr) {
    //         btnArr[i].onclick = function (ev) {
    //             var ev = ev || window.event;
    //             var target = ev.target || ev.srcElement;
    //             var li = target.parentNode;
    //             li.parentNode.removeChild(li);
    //         };
    //     }
    // };
</script>

 

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