前端组件练习

来源：互联网发布：微信朋友圈淘宝链接编辑：程序博客网时间：2024/06/05 16:34

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>

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

0 0