前端面试题

前端面试题

Web前端笔试题（一）

第一部分：结构与样式

1、列举10个html块元素标签和5个html行内标签，并简述块元素与行内元素的区别

块：div dl form h1 h2 h3 h4 h5 h6 hr ol li ppre table td tr

行内：a b s i u span br img input textarea subsup

两者区别：

以图例来表述行内元素和块级元素的区别会更加直观：

注：行内元素会再一条直线上，是在同一行的。我是行内元素SPAN标签   我是行内元素strong标签

注：块级元素各占一行。是垂直方向的！

我是块级元素div标签

我是块级元素P标签

如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。

行内元素不可以控制宽和高，除非你想将它转变成为块级元素。它的宽和高，是随标签里的内容而变化。

参考：http://www.w3cwhy.com/css-html/html-hkmarka.html

2、如何在IE浏览器下使元素拥有布局

参考：

http://www.nowamagic.net/librarys/veda/detail/1395

http://www.cnblogs.com/ShepherdIsland/archive/2010/06/29/IE_Haslayout.html

3、写出使DIV#box (宽度为200px，高度为100px)水平垂直居中的样式代码

div#box {

   position:absolute;

   left:50%;

   top:50%;

    margin-left: -100px;

    margin-top: -100px;

}

4、描述CSS定位（什么是定位？定位分类？区别？其他有关定位知识）

参考：http://www.w3school.com.cn/css/css_positioning.asp

5、请简化下面的CSS代码

a)margin:0px;

b)padding:10px 0 10px 0;

c)border-width:1px; border-style:solid;border-color:#ff5500;

margin:0;

padding: 10px 0;

border: 1px solid #f50;

6、应用CSS方法实现隐藏下面DIV（至少三种方法）

div{

  display:none;

  visibility: hidden;

  position: absolute/relative

  left: -10000px;

}

第二部分：JavaScript与jQuery

7、使用JS在页面上循环输出1-100的奇数

function getOddNumber(){

    for(var i=0; i<length; i++){

        if(i%2==1){

              document.write(i);

}

}

}

8、编写js函数，用于计算a+(a-1)+(a-2)+….+1的和

方法一：

function sum1(a){

   varsum = a;

   for(vari=a; i >= 1; i--){

       sum+= (i-1);

   }

   returnsum;

}

alert(sum1(3));

方法二：

function sum2(a){

 if(a==1){

   return1;

 }else{

   returna + sum2(a-1);

  }

}

alert( sum2(3) );

方法三：

function sum3( a1, an, d ){

   varn = (an - a1)/d + 1;

   returnn*a1 + n*(n-1)*d/2;

}

alert(sum3(1,5,1));

9、编写js函数，用于获得输入参数的后缀名，如输入abc.txt，返回.txt

function getSuffix(filename){

  var dotLast = filename.lastIndexOf(".");

  if(dotLast==-1){

   return"文件名格式不正确";

  }else{

   returnfilename.substr(dotLast);

   }

}

alert( getSuffix("a.jpeg") );

10、写出下列代码的执行结果

(1)

var i=2;

for(vari=0,j=0;i<5;i++){

    console.log(i);

}

console.log(i);

0,1,2,3,4,5

(2)

var a =(1&&2&&5) || 3;

console.log(a);

5

(3)

var a = [5,6];

var b = a;

b[0] = ‘MyValue’;

console.log(a);

["MyValue", 6]

 

11、完成下列程序段，实现b数组拷贝a数组，实现每个元素的拷贝(方法越多越好)

var a =[1,”yes”,3];

var b;

方法一：

var a = [1,"yes",3];

var b = new Array();

for(var i=0; i<3; i++){

   b.push(a[i]);

}

alert(b);

方法二：

var a = [1,"yes",3];

var b = [].concat(a);

alert(b);

方法三：

var a = [1,"yes",3];

var b = a.slice(0,a.length);

alert(b);

12、写出jQuery事件绑定方法（至少三种）

on() bind() live() delegate()

13、描述parent()、parents()与closest()方法的区别，find()与filter()方法的区别

parent(): 查找父元素

parents()：查找祖先元素

closest(): 从自身开始查找祖先元素，找到即刻返回

find():查找后代元素

filter():筛选集合中的元素

14、写出选择选择器~、>、+、““对应的四个方法

nextAll() children() next() find()

第三部分：Ajax及后端相关

15、简述JSONP实现的方法，写出关键语句

<scripttype="text/javascript"   src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">

</script>

parseResponse({"Name":"Cheeso", "Id" : 1823, "Rank": 7})

16、已知XHR对象实例创建为xhr，写出向后台index.php同步发送数据为name=user, age=20的语句

xhr.open(‘POST’,‘index.php’,false);

xhr.send(‘name=user&age=2’);

17、已知后台数据页面为data.json, 写出获得改json文件，异步，成功在控制台打印”OK”, 失败打印”fail”的语句。（应用jQuery框架实现）

$.ajax(){

 url:” data.json”,

 dataType: “json”,

  data: “name=user&age=20”,

 success:function(dada){

  console.log(‘ok’);

},

error: function(){

 console.log(‘fail’);

}}

18、写出应用PHP函数打印 2014-05-10 17:53:27 的语句

echo date(“Y-m-d H:i:s”);

19、编写PHP程序，实现将字符串”a|b|c|d”拆分开，分别在页面上换行打印

$str = ”a|b|c|d”;

$exp = explode(“|”,$str);

for(var i=0;i<count($exp);i++){

  echo$exp[i].”<br/>”;}

 

20、写出 SQL语句的格式 : 插入，更新，删除

表名：User
表字段和数据如下：

Name	Tel	Content	Date
张三	13333663366	大专毕业	2006-10-11
张三	13612312331	本科毕业	2006-10-15
张四	021-55665566	中专毕业	2006-10-15

(a) 有一新记录(小王 13254748547 高中毕业 2007-05-06)请用SQL语句新增至表中
(b) 请用sql语句把张三的时间更新成为当前系统时间
(c) 请写出删除名为张四的全部记录

insert into User(Name,Tel,Content,Date)values('小王','13254748547','高中毕业','2007-05-06');

update User set Date=now() where Name=’张三’;

delete from User where Name=’张三’