欢迎大家不吝赐教。
No.21
‘data-’属性的作用是什么?
data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性,lightbox库推广了rel属性,HTML5提供了data-做替代,这样可以更好地使用自定义的属性。
No.22
请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。
var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); if (!Array.prototype.shuffle) { Array.prototype.shuffle = function() { for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); return this; }; } alert(data.shuffle());
No.23
CSS的“伪类”和“伪元素”有什么区别?请举例伪元素的几种应用场景。
No.24
页面中有个id为J_banner的区块,请使用CSS实现在普通屏幕上使用图片banner.png为背景,在retina屏幕上显示更高分辨率的图片banner_retina.png作为背景
<div id="J_banner"> ... </div>
css3的images-set属性
background-image: url(1x.png); background-image: -webkit-image-set(url(1x.png) 1x,url(2x.png) 2x);
No.25
下面是一段html代码,展示效果如图A所示。请给出一段css,使这段代码达到图B的展示效果。
<ul> <li> <a href="#"><img width="100" height="100" src="a.jpg /></a> <p>文字一</p> </li> <li> <a href="#"><img width="100" height="100" src="a.jpg" /></a> <p>文字二</p> </li> </ul> <ul> <li>文字三</li> <li>文字四</li> <li>文字五</li> <li>文字六</li> </ul>
要求:
1.不允许修改html结构;
2.css不必考虑浏览器默认样式的因素,布局正确即可;
3.不要求严格对齐,如有需要,元素尺寸可自定义。
页面上有一个节点 <div id=”a” style=” width:200px; height:200px;”></div>, 请实现当鼠标移至该节点时,该节点的透明度从 100 渐变为 20:
No.26
var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一个合并过的数组[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]
No.27
//请补全下面的函数,仅当p为数组时返回true.
//可给出多种实现方式,每种实现方式不一定完美,如果不完美,需要说明每种实现的限制
function isArray(p) {
//你的代码在这里
}
No.28
<p>1</p> <p>2</p> <p>3</p>
请编写一段css,让数字1颜色变蓝
p:first-child{color:blue}
No.29
请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动
No.30
用HTML实现下面表格的结构: