前端面试题目（二）

HTML、CSS面试题

1、写出你知道的一些常用的块元素和行内元素

块元素：div，p，h1~h6，ul，li，ol，dl，dt，dd

行内元素：span，em，a，b，img，input，strong

2、请写出display属性的值

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

3、可以让元素隐藏且保留的属性是什么？

visitility：hidden；隐藏后仍占位置

4、请写出透明度兼容低版本IE的写法

opacity：0.8；filter：alpha(opacity=80);

5、请写出3种定位方法，并说明一下对他们的理解

position:fixed;固定定位，相对于浏览器窗口定位
position:absolute;绝对定位，相对于父级定位
position:relative;相对定位，原位置保留
position： static 默认值，没有定位

position：inherit  继续父级的属性

6、请写出两种或两种以上清除浮动的方法

使用overflow属性来清除浮动  overflow：hidden；
使用额外标签法   .clear{clear:both;}
使用伪元素来清除浮动
.clearfix.after{content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.clearfix{zoom:1}
使用双伪元素清除浮动
.clearfix.before,.clearfix.after{content:"";display:block;clear:both;}

.clearfix{zoom:1}

7、请问css中最高优先级写法是什么？

！important

8、a标签如何打开链接？

_blank 新窗口打开链接
_self  表示“相同窗口”
_top 整页窗口

_partent 父窗口

9、a标签如何去掉下划线

text-decoration：none；

10、请写出你所知道的css选择器

1、标签做选择器名称（元素选择器）

例： div { color：bule；}

2、类名做选择器名称

例：

.bule_text { color：bule；}

类名前必须加“点”

类名是自定义的名称不能和标签重名

命名时不能以数字开头字符

3、id名做选择器名

例：

#header { font-size：30px }

说明：

id名前必须加“#”

id名是自定义的名称不能和标签重名

命名时不能以数字开头字符

在html标签内，用id属性来调用id名

例：在<div id="id名"></div>

4、后代选择器

<div class="box">

<a></a>

<a></a>

<a></a>

<a></a>

</div>

.box a{

}

会选择后代所有的特定的标签

5、子元素选择器

<div class="box">

<a></a>

<a></a>

<a></a>

<a></a>

</div>

.box>a{

}

子元素选择器必须用>号连接，不能空格

只会选择后代所有的特定的直接标签

5、交集选择器

作用：给所有选择器选中的标签，相交的那部分标签设置属性

<p></p>

<p></p>

<p></p>

<p class="pre1"></p>

<p class="pre1"></p>

<p></p>

p.pre1{color:red;}

6、并集选择器

分组定义的方式

例：

div，h1，a，p { color：red；}

.text_red，div，.box，p { background-color：green；}

注：逗号意为“和”

派生定义方式

例：

div a { color：red；}

.box a { color：red；}

.box .

注：空格意为“里”

相邻兄弟选择器css2

选择在一个元素的后一个元素

<h1></h1>

<p></p>

<p></p>

<p></p>

h1+p{color:red}

通用兄弟选择器css3

给指定选择器后面的所有选择器的所有标签设置属性

<h1></h1>

<p></p>

<p></p>

<p></p>

h1~p{color:red}

9、序选择器

同级别的第几个

:first-child选中同级别中的第一个标签

:last-child选中同级别中的最后一个标签

:nth-child(n)选中同级别中的第n个标签

:nth-last-child(n)选中同级别中的倒数第n个标签

:only-child选中父元素中唯一的元素

不区分类型

同类型的第几个

:first-of-type选择同级别中同类型的第一个标签

:nth-of-type(n)选中同级别中同类型的第n个标签

:last-of-type选择同级别中同类型的最后一个标签

:nth-last-of-type（n）选中同级别中同类型的倒数第n个标签

:only-of-type选中父元素中唯一类型的某个元素

区分类型

10、属性选择器

[attribute] 根据指定的属性名称找到对应的标签，然后设置属性 p[id]

[attribute=value] 找到有指定属性，并且属性的取值等于value的标签 p[class=cc]

最常用场景，区分input属性

1、属性的取值是以什么开头的

[attribute|=value]    （css2）

[attribute^=value]

两者之间的区别：

css2中的只能找到value开头，并且value是被“-”和其它内容隔开的

css3中只要是value开头的都可以找到，无论有没有被-隔开

2、属性的取值是以什么结尾的

[attribute$=value]

3、属性的取值是否包含某个特定的值

[attribute~=value]   css2

[attribute*=value]

两者之间的区别

css2中的只能找到value开头，并且value是被“空格”隔开

css3中只要是value开头的都可以找到，无论有没有被空格隔开

11、通配符选择器

*

12、伪元素选择器

：after

：before

：first-letter

：first-line

11、一个宽为100px的盒子如何实现上下水平都居中

div{width:100px;position:absolute;top:50%;margin-top:50px;left:50%;margin-left:50px;}

12、请问标准盒子模型与怪异盒子模型的宽度是如何计算的？

标准盒模型：一个盒子的总宽度=width+padding+border+margin
怪异盒模型：一个盒子的总宽度=width+margin（其中width的值已经包括padding和border）

怪异模式是部分浏览器在支持W3C的标准的同时还保留了原来的解析模式，主要表现在IE内核的浏览器。

13、文字与图片垂直居中对齐的属性与值是什么？

 vertical-align：middle；

js/jq面试题

1、请写出用id获取元素的方法

getElementById

2、请写出获取元素属性值的方法

setAttribute 设置属性值的方法

getAttribute获取属性值的方法

3、请说明$.ajax中url、data、type、dataType、async、cache、success、error分别代表什么？

url：发送请求的地址
data：发送到服务的数据
dataType： 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
async： 默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false 。跨域请求和 dataType: "jsonp" 请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
cache：如果设置为false，浏览器将不缓存此页面， 它的工作原理是在GET请求参数中附加"_={timestamp}"
type：请求方式（get和post），默认为get方式
success：请求成功后的回调函数

error：请求失败后的回调函数

5、请问i会输出什么？

<script type="text/javascript">
for (var i = 0; i<6; i++) {
    setTimeout(function(){
        console.log(i);
    },1000)
}
</script>

答案是：6；//输出的是i的长度

6、写一个简单的选项卡效果

<div class="anli-con" id="anlicon">
	<div class="anli" id="anli">
		<a href="#" class="active">选项一</a>
		<a href="#">选项二</a>
		<a href="#">选项三</a>
	</div>
	<p style="display:block;">你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一</p>
	<p>你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二</p>
	<p>你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三</p>
</div>

$(function(){
    $(".anli a").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(this).parent("div").siblings("p").hide();
        $(this).parent("div").siblings("p").eq($(this).index()).show();
    })
})

var oDiv=document.getElementById('anlicon');
var oAnli=document.getElementById("anli");
var aA=oAnli.getElementsByTagName("a");
var aP=oDiv.getElementsByTagName("p");
for(var i=0;i<aA.length;i++){
 aA[i].index=i;
 aA.οnclick=function(){
  for(var i=0;i<aA.length;i++){
    aA[i].className="active";
    aP[i].style.display="none";
  }
  this.ClassName="active";
  aP[this.index].style.display="block";
 }
}

8、请说一下你对ajax同步和异步的理解

同步是指： 发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！
异步是指： 发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。

9、一个按钮点击一次字体变红色，在点击字体变蓝色，点击来回切换，如何实现？

<input type="button" value="点我点我" id="btn">
<div>字体变色</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").toggle(function(){
			$(this).next().css("color","red");
		},function(){
			$(this).next().css("color","blue");
		})
	})
</script>

10、jqueryDOM操作

//删除操作
 remove（）；detach（）；empty（）；
//复制节点
clone（）；
//替换节点
replaceAll()；replaceWith()；
//内部插入
= append()，appendTo()，prepend()，rependTo()  
//外部插入
after()、insetAfter()、before()、insertBefore() 
//包裹操作

wrap();unwrap();wrapAll();wrapInner()

11、做个分页的效果，你需要后台接口给你提供哪些必要数据，实现效果的思路是什么？

12、说一下你对&&与｜｜的理解

&&逻辑与的运算符  两边的表达式结果都为true时，整个运算才能为true； &&还具有短路的功能，即如果第一个表达式为false，则不再计算第二个表达式；

｜｜逻辑或运算符  当运算符有一边为true时，整个结果都返回为true。

13、这里有两个表单元素，需要你手动post提交

$.post("http://10.10.10.10:8080/login.active",????,function(){},'json')

问号位置需要提交的数据参数该如何写（写出两种或两种以上的方法）

<form id="form1">
<input type="text" name="username" id="username">
<input type="password" name="password" id="pwd">
</form>