1.JavaScript的数据类型有哪些,如何判断某变量是否为数组数据类型?
答:string,number,boolean,undefined,null,object,symbol
用isArray() instanceof
2.已知id的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)
答:var inp = document.getElementById("id").value;
alert(inp)
3.希望获取到页面中所有的CheckBox,怎么做?(不使用第三方框架)
答:可以将所有的CheckBox赋予同一个类名,然后通过document.getElementByClassName获取
4.设置一个一已知id的div的HTML内容为xxx,字体颜色设置为黑色(不使用第三方框架)
答:document.getElementById(“ID”).style("color":"black")
5.当一个DOM节点被点击时,我们希望能够执行一个函数,应该怎么做?JavaScript的事件流模型都有什么?
答:直接在DOM里绑定事件:<div onclick=”test()”></div>
在JS里通过onclick绑定:xxx.onclick = test
通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)
那么问题来了,Javascript的事件流模型都有什么?
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
6.看下列代码输出为何?解释原因
var a;
alert(typeof a); //undefined 因为声明了但是没有赋值
alert(b) //b is not defined 根本就没有声明 b
7.看下列代码,输出什么?解释原因
var a = null;
alert(typeof a);
答:object 从逻辑角度来看,null值表示一个空对象指针,而这正是使用typeof操作符检测null值时会返回“object”的原因。
8.看下列代码,输出什么?解释原因
var undefined; // 报错
undefined == null; // true
1==true; // true
2==true; // false
0==false; // true
0==''; // true
NaN==NaN; // false
{}==false; // false
{}==!{}; // false
9.居中div浮动元素,容器宽度为300px,高为200px,请居中显示div
<html>
<head>
<style type="text/css">
.div{width:300px;height:200px;margin:0 auto}
</style>
</head>
<body>
<div class="div">居中显示</div>
</body>
</html>
10.简单介绍以下几种值得显示效果。block,none,inline-block,list-item
答: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 属性的值。
11.css3有哪些 新特性
答: 第 1 选择器
第 2 rgba多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音
12.解释一下localstorage和sessionstorage的区别。他们和cookie又有什么不同?
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
1)共享 sessionStorage不能共享 localStorage在同源文档之间共享,cookie在同源且符合path原则的文档之间共享
2)有效期:cookie在设置的有效期内有效,默认浏览器关闭,sessionStorage在窗口关闭之前有效,localStroage长期有效,直到用户删除
3)localStroage的修改会促发其他文档窗口的update事件
4)cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie,webStorage不会发送到服务器
5)cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径的cookie
6)cookie有secure属性要求https传输,浏览器不能超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k,webStroage大小支持能达到5m
13.有哪些性能优化方法?
第一:面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二:面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的
14.简述"=="和"==="的不同?
==关系运算符
===数据类型也要一样
**15.简述NAN Null undefined区别 ** http://www.cnblogs.com/phpk/p/6093216.html 这个网站更全
null:空的,无效的的意思
NaN:计算中出现错误或者计算错误。
undefined:不明确,未知,可以指出字符串,,一般是出现了未定义的字符,需要宏定义一下。
16.在JavaScript中什么是伪数组?如何将伪数组转化为标准数组?
伪数组(类数组):
无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push,pop等方法,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法,将argument转化为真正的数组
args.unshift('(app)'); console.log.apply(console, args);
};
这里把符合以下条件的对象称为伪数组:
1,具有length属性
2,按索引方式存储数据
3,不具有数组的push,pop等方法
如
1,function内的arguments 。
2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,
document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
3,特殊写法的对象 ,如
Js代码 收藏代码
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
17.Window.onload和$(document).ready的区别?
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)
23.call和apply的区别?
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。