初级前端面试题
-
用css实现点击按钮图片切换。
思路：用css实现图片切换效果，我们需要用一个足够宽的div装图片，用一个div来显示图片，宽度应该和图片大致一样，超出部分隐藏，设置里面的div（也可以用ul li ）左浮动，使其横向排列；每个图片设置两个按钮，一个是向前，一个是向后都用a标签包起来，这样就可以跳转了。
body代码如下：
<body>
<div id="allbg">
<div id="picbg">
<div id="pic1">
<img src="img/pic1.jpg" />
<a class="pre" href="#pic3"><b>Previous</b></a>
<a class="next" href="#pic2"><b>next</b></a>
</div>
<div id="pic2">
<img src="img/pic2.jpg" />
<a class="pre" href="#pic1"><b>Previous</b></a>
<a class="next" href="#pic3"><b>next</b></a>
</div>
<div id="pic3">
<img src="img/pic3.jpg" />
<a class="pre" href="#pic2"><b>Previous</b></a>
<a class="next" href="#pic1"><b>next</b></a>
</div>
</div>
</div>
</body>
css代码如下：
<style type="text/css">
#allbg{
width: 90px;
height: 128px;
margin: 0 auto;
}
#picbg{
width: 90px;
height:128px;
margin:0 auto;
overflow: hidden;
}
#allbg>#picbg>div{
float: left;
}
img{
width:90px;
height: 82.2px;
}
</style>
这里我用的图片是900*830左右的，不是很规矩，所以用开发者工具调试的效果，为显示方便，所以对图片进行了一下设置。
参考：http://www.cnblogs.com/jianyeLee/p/4759025.html
- 添加、删除、替换、插入到某个节点的方法
|
添加 |
append |
在被选元素内部的结尾插入指定内容 |
|
appendTo |
将被选元素插入指定内容的内部结尾 |
|
|
repend |
在被选元素内部的开头插入指定内容 |
|
|
rependTo |
将被选元素插入指定内容的内部开头 |
|
|
插入 |
after |
在被选元素之后插入内容 |
|
insertAfter |
a.insertAfter(b)的意思是b在前a在后 |
|
|
before |
在被选元素之前插入内容 |
|
|
insertBefore |
a.insertBefore(b)的意思是a在前b在后 |
|
|
移除 |
remove |
移除本身及子元素 |
|
empty |
移除子元素 |
|
|
复制 |
clone |
$("标签1").click(function(){ $(this).clone().appendTo("标签2");意思是点击标签1把标签1追加到标签2，其中clone括号内有两个值，一个是true一个是false，true复制事件处理程序，默认false不复制事件处理程序 |
|
替换 |
replaceWith |
$("标签1").replaceWith("标签2");意思是选中标签1用标签2替换 |
参考：http://www.jb51.net/article/91727.htm http://www.jb51.net/article/34480.htm
-
用js循环输出1到100之间的数，并且要求10个数显示在一行。
注意：难点在于如何实现10个一换行，需要加一个if判断语句，当i的值能被整除的时候需要加入换行符</br>。
|
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> span{ display: inline-block; width:40px; height:30px; text-align: center; position: relative; left:32%; background-color: #00ff00; } </style> </head> <body> <script> for (var i = 1; i <= 100; i++) { if (i % 10 == 0) { document.write("<span>" + i + " " + "</span>"+"</br>"); } else { document.write("<span>" + i + " " + "</span>"); }; }; </script> </body> </html> |
- 用Js实现一个Tab选项卡。
|
A |
B |
C |
|
点击谁显示对应标签的内容 |
||
参考：http://www.jb51.net/article/77548.htm
