笔试题整理（二）
京东：
1、jQuery属性操作方法
val():设置或返回匹配元素的值。
html():设置或返回匹配的元素集合中的 HTML 内容。
jQuery文档操作
text():设置或返回被选元素的文本内容。
2、fadeIn()逐渐改变被选元素的不透明度，从隐藏到可见。
fadeOut()逐渐改变被选元素的不透明度，从可见到隐藏。
fadeToggle()用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。
所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。
fadeTo()把被选元素逐渐改变至给定的不透明度
3、ES6规范
4、canvas
5、HTML5中的拖放API
1)draggable属性
如果网页元素的draggable属性为true，这个元素就是可以拖动的。
<div draggable="true">Draggable Div</div>
在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。
2）拖放事件
dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drop：有其他元素拖放到了本元素中，拖放落下时触发，应在目标元素监听该事件。
dragend：元素被拖动结束时触发，在被拖放的对象上监听该事件。
6、nodejs回调陷阱的处理方法。
采用第三方库处理异步回调。
1）Async
2）Q
3）Promise
7、React
8、iframe
1） 是同主域下面，不同子域之间的跨域：
设置相同的document.domian就可以解决。
① 父页访问子页，可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容；如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument访问子页面内容；
②子页访问父页，可以parent全局属性
2） 是不同主域跨域；
前提，www.a.com下a.html，a.html内iframe调用了www.b.com下的b.html，b.html下iframe调用了www.a.com下的c.html
b.html是不无法直接访问a.html的对象，因为涉及到跨域，但可以访问parent，同样c.html的parent可以访问b.html。c.html和a.html同域，是可以访问a下的对象的。parent.parent对象!
参考文献：iframe跨域访问
补充：parent属性
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。
1）window.self
功能：是对当前窗口自身的引用。它和window属性是等价的。
语法：window.self
注：window、self、window.self是等价的。
2）window.top
功能：返回顶层窗口，即浏览器窗口。
语法：window.top
注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。
3）window.parent
功能：返回父窗口。
语法：window.parent
注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。
在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。
判断当前窗口是否在一个框架中：
<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中："+b );
</script>
应当将框架视为窗口中的不同区域，框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架，一个单个的框架也可以分成其它多个框架，即所谓的嵌套框架。
参考文献：
js中的window.parent,window.top,window.self
9、向html中引入css样式的方法
1）直接在div中使用css样式制作div+css网页
格式：
<div style="font-size:14px;color:#ff0000;">示例专用</div>
2）html中使用style自带式
格式：
<style type="text/css">
div{
font-size:14px;
color:#ff0000;
}
</style>
3）使用@import引用外部CSS文件
格式：
<style type="text/css">
@import url(wcss.css);
</style>
4）使用link引用外部CSS文件（推荐）
注意：在head放置<link rel="stylesheet" href="wcss.css" type="text/css" />来调用外部的wcss.css文件来实现html引用css文件
格式：
<head>
<meta http-equiv="Content-Type" content="text/html;charset=">
<title>示例专用</title>
<link rel="stylesheet" href="wcss.css" type="text/css"/>
</head>
补充 ：使用link来引用外部的css的优势
1、有利于SEO，使用此方法引用外部css文件，将使得html页面中的源代码比起直接加入css样式少很多，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
2、用户浏览此网页的时候html源代码和css文件同时下载，使得网页加载更快
3、方便修改网页的样式，只需修改css样式即可修改网页的美工样式。
参考文献：
引用CSS文件到html网页里方法
10、Ajax适用场景和不适用场景
Ajax适用场景
Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多、频繁读取数据的web应用。
1）数据验证
使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。
2）按需取数据
3）自动更新页面
对于数据实时变化的web应用中，如热点新闻，天气预报等，在Ajax出现之前，用户为了及时了解最新内容，必须不断刷新页面，或页面本身实现定时刷新的功能。这可能会发生两种情况：
① 某段时间网页的内容没有发生任何变化，但用户并不知道，仍然不断刷新页面；
② 某段时间网页的内容已经发生任何变化，但用户失去了耐心，放弃了刷新页面，得不到最新的数据。
使用Ajax技术，可以通过Ajax引擎在后台进行定时轮询，向服务器发送请求，查看是否有最新数据，若有则将最新数据（不是所有数据）下载并在页面上进行动态更新，通过JavaScript等方式通知用户。这样既避免了用户不断手工刷新页面，也不会因为重复刷新页面造成资源浪费。
Ajax的不适用场景
- 不能使用后退按钮来查看历史搜索
Ajax会破坏浏览器后退按钮的正常行为，在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记下历史记录中的静态页面，因此用户无法通过后退按钮获得前一次或前几次的搜索结果。 - 不适合部分简单的表单
一个内容简单的表单（如评论表单），或提交订单，或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制，极少能从Ajax得到明显的改善。 - 不适合需要更新大量信息
Ajax可以不用整页刷新来动态更新页面中改变的一小部分，但如果页面上的大部分内容都需要更新，完全可以从服务器那里获得一个新页面。
参考文献：
Ajax应用场景-Ajax适合的应用场合
浅谈Ajax的适用场景和不适用场景
11、提高COOKIE的安全性
1）对保存到cookie里面的敏感信息必须加密。
2）设置HttpOnly属性为true
作用：该属性值的作用就是防止Cookie值被页面脚本读取。防止XSS攻击,窃取cookie内容。
存在问题：设置HttpOnly属性只是增加了攻击者的难度，Cookie盗窃的威胁并没有彻底消除，因为cookie还是有可能在传递的过程中被监听捕获后信息泄漏。
3）设置Secure为true
作用：给Cookie设置该属性时，只有在https协议下访问的时候，浏览器才会发送该Cookie。
存在问题：把cookie设置为secure，只保证cookie与WEB服务器之间的数据传输过程加密，而保存在本地的cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。
4）给Cookies加个时间戳和IP戳
作用：设定Cookies在同个IP下多少时间内失效
参考文献：
提高cookie的安全性
提高cookie的安全性的几种方法
12、HTML5新增标签
video:表示一段视频并提供播放的用户界面
audio:表示音频
canvas:表示位图区域
source:为video和audio提供数据源
track:为video和audio指定字母
svg:定义矢量图
code:代码段
figure:和文档有关的图例。
figcaption:图例的说明
main:
time:时间和日期
mark:高亮的引用文字
datalist:提供给其他控件的预定义选项
keygen:密钥对生成器控件
output:计算值
progress:进度条
menu:菜单
embed:嵌入的外部资源
menuitem:用户可点击的菜单项
menu:菜单
template:
section:
nav:
aside
footer
header
13、CSS3新增属性
CSS3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
1）选择器
2）框模型
3）背景和边框
border-radius
box-shadow
border-image
background-size:规定背景图片尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
4）文本效果（常用）
text-shadow:设置文字阴影
word-wrap:强制换行
word-break:
CSS3提出@font-face规则，规则中定义了
font-family
font-weight
font-style
font-stretch
src
unicode-range
5）2D/3D转换
transform:向元素应用2D/3D转换
transition:过渡
6）动画
@keyframes规则：
animation
animation-name
animation-duration等
7）用户界面（常用）
box-sizing
resize
CSS3新增伪类
:nth-child()
:nth-last-child()
:only-child
:last-child
:nth-of-type()
:only-of-type()
:empty
:target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么：target会对使用这个ID识别器的元素增加样式
:enabled
:disabled
:checked
:not
参考文献：
h5新增标签及css3新增属性
14、事件句柄（Event Handlers）
onchange:域的内容被改变
onblur:元素失去焦点
onreset:重置按钮被点击
onload:一张页面或一幅图像加载完成。
