1.最少写出5个jq中的伪类选择器:
答案:
$(‘.box li:first‘)
$(‘.box li:last‘)
$(‘.box li:eq(3)‘)
$(‘.box li:odd‘)
$(‘.box li:even‘)
-------------------------------------------------------------
2.请写出jq中怎么来获取样式、以及怎么来设置一个样式、还有怎么来批量设置样式:
答案:
alert($(obj).css(‘width‘))
$(obj).css(‘width‘,‘100px‘);
$(obj).css({‘width‘:‘100px‘,‘height‘:‘100px‘,‘background‘:‘red‘});
------------------------------------------------------------
3.请写出jq动画方法animate里面所有的参数:
答案:
$(‘#box‘).animate({‘width‘:‘300px‘,‘height‘:‘300px‘},
{duration:1000,easing:‘easeOutElastic‘,complete:function( ){}});
-----------------------------------------------------------
4.写出jq中获取属性,设置属性,以及设置批量属性,还有删除属性:
答案:
获取 $(obj).attr(name)
设置 $(obj).attr(name,value)
设置批量 $(obj).attr({name:value,name1:value1......})
删除 $(obj).removeAttr(name)
-------------------------------------------------------
5.请写出jq中的dom操作的添加的:4个方位的方法:
先写一个html代码:
<div id="div1">
<h2></h2>
</div>
答案:
1.div1内部h2的后面! $(‘<h2>wefwefewf</h2>‘).appendTo(‘#div1‘);
2.div内部h2的前面! $(‘<h2>wefwefewf</h2>‘).prependTo(‘#div1‘);
3.div1的前面! $(‘<h2>wefwefewf</h2>‘).insertBefore(‘#div1‘);
4.div1的后面! $(‘<h2>wefwefewf</h2>‘).insertAfter(‘#div1‘);
---------------------------------------------------
6.请写出jq中的事件冒泡俩个方法:
答案:
ev.stopPropagation( );//单纯阻止事件冒泡
return false;//也可以阻止冒泡,但是阻止默认事件
------------------------------------------------------
7.请写出jq中的阻止默认事件的俩个方法:
答案:
return false;//阻止默认事件,但是也可以阻止冒泡
ev.preventDefault( ); //单纯阻止默认事件
------------------------------------------------------
8.用jq怎么来获取元素的单纯的宽?
答案:
$(‘#box‘).width( )
1.获取到的是单纯的元素宽
2.得到的结果是number类型
-------------------------------------------------------
9.用jq怎么来获取元素的盒模型的宽:
答案:
$(‘#box‘).outerWidth( ) ---和原生的offsetWidth一样!
1.盒模型的宽高(包括padding和border)
2.得到的结果是number类型
------------------------------------------------------
10.用jq怎么来获取元素距离左边的距离:
答案:
$(‘#box‘).offset( ).left
相当于原生offsetLeft
------------------------------------------------------
11.编写一个最简单的jq插件:让一个div变红!写出编写插件的代码及其使用代码:
答案:
$.fn.toRed=function( ){
this.css(‘background‘,‘red‘);
}
$(function( ){
$(‘div‘).toRed( );
})
---------------------------------------------------------
12.写出拖拽使用的三个事件名称代码:
答案:
鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup
-------------------------------------------------------
13.写出清除浮动的三种方式!代码以及描述:
答案:
方法一:.clearfix:after{
display:block;
clear:both;
content: ‘ ‘;
}
方法二:给浮动的最后一个元素加clear:both
方法二:给夫级加overflow:hidden
-------------------------------------------------------
14. 写出maigin的两种bug的场景代码:
答案:
margin 塌陷
<div class="div1"></div>
<div class="div2"></div>
css:
div1{margin-bottom:100px;}
div2{margin-top:100px;}
正常思维:200px
bug:100px 那个值大就听那个的
拖拽夫级
<div>
<p></p>
</div>
css:
p{mrgin-top:100px;}
正常思维:
p距离div的上方是100px;
bug:div 距离body上方是100px
解决方案: a.只用一个方向的margin
b.用padding代替margin拖拽父级
解决方案: a.加边框
b.用padding
c.overflow:hidden;
------------------------------------------------------
15. 写出解决图片被标签所包时底部产生的几像素bug的俩种方法---切记写全了,解决的代码加给谁:
答案:
1.img { vertical-align:top; }
2.img { display:block; }
-----------------------------------------------------
16.请写出以下内容的优先级:默认、标签、class、行间、继承、id、*
答案:
行间 > id > class > 标签 > * > 默认 > 继承
-----------------------------------------------------
17.写出一个div在浏览器中绝对居中的代码
方法一:已知元素的高宽
#div1{
width:100px;
height:100px;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top:-50px ; /*二分之一的height,width*/
margin-left: -50px;
}
方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
margin:auto;
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0;
}
-----------------------------------------------------
18.写出在原生js中获取一组元素的方法最少3个:
答案:
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
----------------------------------------------------
19.写出原生js中获取一个元素的方法最少2个
答案:
document.getElementById/
document.querySelector
-----------------------------------------------------
20.写出3个原生js的DOM操作的方法
答案:
创建:createElement(‘li‘)
添加:appendChild(要添加的标签,添加在这个位置标签之前)
删除removeChild( )
------------------------------------------------------
21.写出classList的添加,读取,删除方法
答案:
添加class名:classList.add( )
删除class名:classList.remove( )
查找class名:classList.contains( )
---------------------------------------------------
22.写出3个截取字符串的方法
答案:
slice( )
substring( )
substr( )
---------------------------------------------------
23.写出2D转换的所有方法。移动,缩放,旋转,倾斜
答案:
translate(100px,100px)
scale(1,2)宽和高
rotate(20deg,)角度
skew(2deg,3deg)角度
---------------------------------------------------
24.写出background的css3的新增属性
答案:
background-clip
background-origin
background-size(100%,100%) 背景图片大小 一个值代表宽 两个值代表宽和高
--------------------------------------------------
25.IE和DOM事件流的区别
答案:
1.执行顺序不一样
2.参数不一样
3.事件加不加on
4.this指向问题
---------------------------------------------------
26.写出angular的自定义服务的4种方式
答案:
factory provider service value constant
1.$provide.factory(‘$factoryService‘,function(){
return(a:1,b:2)
})
---------------------------------------------------
27.写出angular的5种基本过滤器
答案:
currency 格式化数字为货币格式。
filter 查找关键字。
lowercase 格式化字符串转为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
例: {{a|data}}
---------------------------------------------------
28.写出声明的3种方式,并描述他们的区别
答案:
var let const
var :声明变量
函数作用域
let :声明变量
有{}作用域(块级作用域)
不能重复声明
代替封闭空间解决I值的问题
const :声明常量
常量不能重新赋值
常量不能二次修改 初始化的时候 必须都设置值!
---------------------------------------------------
29.ES6写出复制数组的方法
答案:
Array.from( )
[...arr]
---------------------------------------------------
30.写出4种循环的基本结构
答案:
for in
for of
while
do while
---------------------------------------------------
31.例举3种强制类型转换和2种隐式类型转换?
答案:
强制parseInt( ) parseFloat( ) Number( )
隐式 == !!
---------------------------------------------------
32.split() 、join() 的区别
答案:
split()是切割成数组的形式
join() 是将数组转换成字符串
---------------------------------------------------
33.写出css过渡的使用方式。
答案:
transition:1s all ease 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
----------------------------------------------------
34.那些css属性可继承?不可继承
答案:
可继承: font-size font-family color, ul li dl dd dt;
不可继承 :border padding margin width height ;
----------------------------------------------------
35:超链接访问后hover样式就不出现的问题是什么?如何解决?
答案:
解决方法是改变CSS属性的排列顺序:
L-V-H-A(link , visited , hover , active)
----------------------------------------------------
36.说说display属性有哪些?可以做什么?
答案:
display:block行内元素转换为块级元素
display:inline块级元素转换为行内元素
display:inline-block转为内联元素
----------------------------------------------------------------
37.写出原生ajax的代码基本实现步骤
答案:
1、创建XMLHttpRequest对象
2、建立连接(连接到服务器)
3、发送请求
4、获取相应数据(接收返回值)
var Ajax= {
get: function (url, fn) {
// XMLHttpRequest对象用于在后台与服务器交换数据
var obj = new XMLHttpRequest();
obj.open(‘GET‘, url, true);
obj.onreadystatechange = function () {
// readyState == 4说明请求已完成
if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
fn.call(this, obj.responseText); //从服务器获得数据
}
};
obj.send();
},
// datat应为‘a=a1&b=b1‘这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
post: function (url, data, fn) {
var obj = new XMLHttpRequest();
obj.open("POST", url, true);
// 添加http头,发送信息至服务器时内容编码类型
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
obj.onreadystatechange = function () {
// 304未修改
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
fn.call(this, obj.responseText);
}
};
obj.send(data);
}
}