JQ综合练习（1）

89 阅读 0 评论 59 点赞

我是靠谱客的博主沉默玫瑰，最近开发中收集的这篇文章主要介绍JQ综合练习（1），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、以下 jquery 对象方法中，使用了事件委托的是
bind
mousedown
click
change
on
答案：E
2、下列的关于ajax描述当中，错误的是
ajax是异步javascript和xml，用于在web页面中实现异步数据交互
ajax的核心对象是xmlhttprequest
ajax的状态码1代表正在发送请求，2代表正在解析响应内容，可通过ajax.status获取
ajax的缺点是对搜索引擎不友好，并且存在跨域问题限制
要实现ajax下的前后退功能成本较大
答案：C，2代表加载完成，3代表正在解析相应内容
3、有了解过哪些web前端框架(jQuery,bootstrap,jquery,JQuery,Ui等)?请简要介绍。
答案：JQuery是一套跨浏览器的JS库，简化HTML与JS之间的交互
特点是轻量级、丰富的DOM选择器、对事件样式动画以及AJAX支持、可扩展性强。
4、元素的type属性的取值可以是（）
image
checkbox
select
button
答案：ABD
5、简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。
答案：domready在DOM加载完毕时触发；onload在页面所有元素都已经准备好时触发，包括图片、脚本、样式；
首先domready，其次图片的onload，最后页面的onload
6、下面哪一个说法最好地解释了jQuery代码片段：
$('#myID').animate({width:"90%"}, "fast");
动画地将标签为myID的对象从当前宽度伸展到90%宽度
动画地将标签为myID的对象的宽度从90%缩成0%
动画地将标签为myID的对象宽度从90%伸展到100%
动画地将标签为myID的对象的宽度从90%伸展当前宽度
答案：A
7、请解释 XMLHttpRequest 对象，并简要说明 jQuery 中的 $.ajax 方法使用。
解：XMLHttpRequest对象为我们提供了一个访问http协议的接口，可以与服务器交互数据，实现页面的局部刷新。
$.ajax是JQ中封装好的使用ajax的方法，使用时传入URL、数据类型、失败成功的调用函数等等；
$.ajax({
url:'',
type:'get/post',
data:{},
dataType:'',
success:function(data){
//....
}
})
8、图片懒加载技术会让图片进入视野之后延迟一小段时间才让用户看到图片，体验不好。如何改进？
解：图片预加载，将所有图片设定一个src，提前缓存在本地，当用户需要的时候直接从本地加载。牺牲了性能换得了更好的用户体验；
9、jQuery代码应该如何封装，才能保证页面加载时只执行一次？
$(document).ready(function() {/*Code goes here*/});
$(document).pageloadcomplete(function() {/*Code goes here*/});
document.ready(function() {/*Code goes here*/});
$(document).ready(function {/*Code goes here*/});
答案：A
10、下列jQuery事件绑定正确的是____。
$(‘#demo’).bind(‘click’,function(){})
$(‘#demo’).click(function() {})
$(‘#demo’).on(‘click’,function() {})
$(‘#demo’).one(‘click’,function() {})
答案：A
.bind( eventType [, eventData ], handler(eventObject) )
为一个元素绑定一个事件处理程序。
.on( events [, selector ] [, data ], handler(eventObject) )
在选定的元素上绑定一个或多个事件处理函数。
.one( events [, data ], handler(eventObject) )
附加一个处理事件到元素。处理函数在每个元素上最多执行一次。
11、怎么才能隐藏下面的元素？
<input id=”id_txt” name=”txt” type=”text” value=””/>
$(“id_txt”).hide();
$(#id_txt).remove();
$(“#id_txt”).hide();
$(“#id_txt”).remove();
答案：C
12、请简述CORS(跨源资源分享)的请求的基本流程。
答案：
对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
Origin字段用来说明，本次请求来自哪个源（协议+域名+端口）。服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。
浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html;
charset=utf-8
上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。
（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
（2）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。
这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
13、以下哪一种方案可以实现跨域XMLHttpRequest请求？（）
CSP
CORS
AJAX
OAuth
答案：B
14、以下 jquery 方法中，实现跨域的是
get
getJSON
load
post
each
答案：B
15、列举你所知道的动画实现方案，并对比说明各自特点。
解：css3旋转，transform, transition, animate
16、jQuery 中，哪一个方法会在缺省的 action 被触发前结束一个事件？
.stopDefault()
.end()
.stopEvent()
.preventDefault()
答案：D
17、jQuery 对象的方法get()做什么？
触发一个GET OBJECT请求
返回一个对象
返回存在jQuery对象中的DOM元素
触发一个GET AJAX请求
答案：A
18、Ajax中，你已经创建了一个XMLHttpRequest对象，xhr，正确调用了对象的open方法和send方法。当你检查xhr.status时发现等于0，responseText是空。下面哪一个最好的解释了这种情形？
服务器发生未知错误
请求被撤销了，因为连接错误或用户的操作
浏览器初始化了太多的并发XHR请求，这个请求在排队
请求没有发送到服务器
答案：B
19、在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事件？
$.ajax()
load(url)
$.get(url)
getScript(url)
答案：C
20、下面不属于ajax事件的是？
ajaxComplete(callback)
ajaxSuccess(callback)
$.post(url)
ajaxSend(callback)
答案：C是ajax请求
ajax的事件是：
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback)
ajaxSuccess(callback)