webveuje/考试/原题/jq/jquery考试题.md
2021-04-29 17:16:40 +08:00

584 lines
22 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

一.选择题
1.当DOM加载完成后要执行的函数下面哪个是正确的?( ) C
A、jQuery(expression, [context]) B、jQuery(html,[ownerDocument])
C、jQuery(callback) D、jQuery(elements)
```DOM加载完成后会触发domready。先于onload事件。
jquery中通常用。$(doucment).ready(fn);或$(fn)或jquery(fn)
都是触发的ready的回调
```
2.下面哪一个是用来追加到指定元素的末尾的?( ) C
A、insertAfter() B、append() C、appendTo() D、after()
```
在元素内部添加
append向每个匹配的元素内部追加内容
<p>我想说:</p>
$("p").append("<b>你好</b>")
<p>我想说:<b>你好</b></p>
appendTo将所有匹配的元素追加到指定的元素中
<p>我想说:</p>
$("<b>你好</b>").appendTo("p")
<p>我想说:<b>你好</b></p>
prepend向每个匹配的元素内部前置添加内容
<p>我想说:</p>
$("p").prepend("<b>你好</b>")
<p><b>你好</b>我想说:</p>
prependTo将所有匹配的元素前置到指定的元素中
<p>我想说:</p>
$("<b>你好</b>").prependTo("p")
<p><b>你好</b>我想说:</p>
在元素外部添加
after在每个匹配元素之后插入内容
<p>我想说:</p>
$("p").after("<b>你好</b>")
<p>我想说:</p><b>你好</b>
insertAfter将所有配的元素插入到指定元素的后面
<p>我想说:</p>
$("<b>你好</b>").insertAfter("p")
<p>我想说:</p><b>你好</b>
before在每个匹配的元素之前插入内容
<p>我想说:</p>
$("p").before("<b>你好</b>")
<b>你好</b><p>我想说:</p>
insertBefore将所有匹配的元素插入到指定的元素的前面
<p>我想说:</p>
$("<b>你好</b>").insertBefore("p")
<b>你好</b><p>我想说:</p>
```
3.下面哪一个不是jquery对象访问的方法? ( ) D
A、each() B、size() C、.length D、onclick()
```
onclick()是js方法jq直接.click()
```
4.在jquery中想要找到所有元素的同辈元素下面哪一个是可以实现的 C
A、eq(index) B、find(expr) C、siblings([expr]) D、next()
```
A :eq() 选择器选取带有指定 index 值的元素。$("xx:eq(index)")
index 值从 0 开始,所有第一个元素的 index 值是 0不是 1
B find() 方法返回被选元素的后代元素。 $(selector).find(filter)
后代是子、孙、曾孙,依此类推。
C siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。 .siblings(selector)
D next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素
.next(selector)
```
5.如果需要匹配包含文本的元素,用下面哪种来实现? ( ) B
A、text() B、contains() C、input() D、attr(name)
```
$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代
$.contains( container, contained )
```
6.如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素? ( C)
A、text() B、get() C、eq() D、contents( )
```
:eq() 选择器选取带有指定 index 值的元素。$("xx:eq(index)")
```
7.如果想被选元素之后插入 HTML 标记或已有的元素,下面哪个是实现该功能的? ( ) D
A、append(content) B、 appendTo(content)
C、insertAfter(content) D、after(content)
```
解析同2题
```
8.在jquey中如果想要从DOM中删除所有匹配的元素下面哪一个是正确的?( ) C
A、delete() B、empty() C 、remove() D、removeAll()
```
如需删除元素和内容,一般可使用以下两个 jQuery 方法
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
```
9.在jquery中想要给第一个指定的元素添加样式下面哪一个是正确的? ( ) D
A、first B、eq(1) C、css(name) D、css(name,value)
```
css() 方法设置或返回被选元素的一个或多个样式属性。 .css("propertyname","value");
```
10.为每一个指定元素的指定事件(像click) 绑定一个事件处理器函数,下面哪个是用来实现该功能的? ( ) B
A、trgger (type) B、bind(type) C、one(type) D、bind
```
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数 $(selector).bind(event,data,function)
trigger() 方法触发被选元素的指定事件类型。 $(selector).trigger(event,[param1,param2,...])
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。 $(selector).one(event,data,function)
```
11.在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事( C )
A、$.ajax() B、load(url) C、$.get(url) D$. getScript(url)
```
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。 $.get(URL,callback);
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 $.post(URL,data,callback);
```
12.在一个表单中,如果想要给输入框添加一个输入验证,可以用下面的哪个事件实现? ( D)
A、hover(over ,out) B、keypress (fn) C、change() D、change(fn)
```
当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。 $(selector).change(function)
```
13.当一个文本框中的内容被选中时,想要执行指定的方法时,可以使用下面哪个事件来实现? ( ) C
A、click(fn) B、change(fn) C、select(fn) D、bind(fn)
```
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。 $(selector).select(function)
```
14.以下 jquery 对象方法中,使用了事件委托的是( ) D
A、bind B. 、mousedown C、change D、on
```
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
$(selector).on(event,childSelector,data,function)
```
15.怎么才能隐藏下面的元素? C
<input id=”id_txt” name=”txt” type=”text”value=””/>
A. ``` $(“id_txt”).hide(); ```
B. ``` $(#id_txt).remove(); ```
C.``` $(“#id_txt”).hide();```
D.``` $(“#id_txt”).remove(); ```
```
如果被选的元素已被显示,则隐藏该元素。 $(selector).hide(speed,callback)
```
16.在jQuery中
$( '#hello' ).css ( "color""#f0000" )
$( '#hello' ).css ( "color" )
分别表示的含义是: (多选) AB
A. $(#hello).css("color",#0000)表示选择id为hello 的元素,并设置颜色为"f0000"
B.$( '#hello' ).css ( "color" )表示选择id为hello 的元素,并且取到该元素字体显示的颜色
C. $(#hello' )css("color""f0000")表示选择CSS类为hello的元素并且取到该元素字体显示的颜色
D. $('hello')css("color")表示选择CSS类为hello 的元素,并且取到该元素字体显示的颜色
17.在jquery中选择使用myClass类的css的所有元素( )A
A、$(".myClass") B. 、$("#myClass") C、${*} D、${body}
```
常用选择器
1.id选择器
  <div id="myDiv”>myDiv</div>
  据元素的id属性中给定的值$("#myDiv")
2.element选择器
  <div>DIV1</div>
  查找一个DIV元素指向DOM节点的标签名$('div')
3.类选择器
  <div class="hello"></div>
  根据元素的class属性中给定的值$('.hello')
4.*选择器
  查找每一个元素
5.selecotr1,selector2,selector3
  将每一个选择器匹配到的元素合并后一起返回。
  $"div,span"
6.后代选择器
  在给定祖先元素下匹配所有的后代元素
  $("form input")
7.子代选择器
  在给定的父元素下皮匹配所有的子元素
  $("form > input")
8.相邻元素选择器 prev+next
  匹配所有进阶在prev元素后的next元素
  例:$("label+input")
9.同辈元素选择器 prev~siblings
  匹配prev元素的所有同辈siblings元素
10.首元素选择器 first
  获取第一个元素 $("li:first")
```
18.在jquery中指定一个类如果存在就执行删除功能如果不存在就执行添加功能下面哪一个是可以直接完成该功能的 C
A、removeClass() B、deleteClass() C、toggleClass(class) D.addClass()
```
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果
$(selector).toggleClass(function(index,class),switch)
```
19.JQuery中属于鼠标事件方法的选项是( ) B
A. onclick( ) B. mouseover( ) C. onmouseout( ) D. blur( )
```
1、click事件点击鼠标左键时触发
2、dbclick事件迅速连续的两次点击时触发
3、mousedown事件按下鼠标时触发
4、mouseup事件松开鼠标时触发
5、mouseover事件鼠标从一个元素移入另一个元素时触发
mouseout事件鼠标移出元素时触发
6、mouseenter事件鼠标移入元素时触发
mouseleave事件鼠标移出元素
7、hover事件
8、toggle事件鼠标点击切换事件
```
20.在Jquery中既可绑定两个或多个事件处理器函数以响应被选元素的轮流的 click 事件,又可以切换元素可见状态的方法是( ) B
A.. hide( ) B. toggle( ) C. hover( ) D.slideUp( )
```
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
$(selector).toggle(speed,callback,switch)
```
21.在Jquery中关于fadeIn()方法正确的是( ) B
A. 可以改变元素的高度
B 可以逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)
C 可以改变元素的宽度
D 与fadeIn( )相对的方法是fadeOn( )
```
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。 $(selector).fadeIn(speed,callback)
```
22.下面选项中()失去焦点 A
A.blur() B.select() C.docus() D.onfocus()
```
当元素失去焦点时发生 blur 事件。
```
23.下列选项中,不属于键盘事件的是( )。D
A.keydown B.keyup C.keypress D.ready
```
1.keydown()事件
当按钮被按下时,发生 keydown 事件。
2.keypress()事件
keypress 当按钮被按下时,会发生该事件,我们可以理解为按下并抬起同一个按键。
3.keyup事件
keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件
```
24.以下jQuery代码运行后对应的HTML代码变为( ) B
HTML代码<p>你好</p>
jQuery代码$(“p”).append(“<b>快乐编程</b>”);
A. <p>你好</p><b>快乐编程</b>
B. <p>你好<b>快乐编程</b></p>
C. <b>快乐编程</b><p>你好</p>
D. <p><b>快乐编程</b>你好</p>
```
同2
```
25.下列选项中,有关数据验证的说法中正确的是( )。D
A.使用客户端验证可以减轻服务器压力
B.客观上讲,使用客户端验证也会受限于客户端的浏览器设置。
C. 基于JavaScript的验证机制正是将服务器的验证任务转嫁至客户端有助于合理使用资源。
D. 以上说法均正确
26.以下关于Jquery优点的说法中错误的是( ) C
A.jquery的体积较小压缩以后大约只有100kb
B.jquery封装了大量的选择器、DOM操作、事件处理使用起来比JavaScript简单得多
C.jquery的浏览器兼容很好能兼容所有的浏览器
D.jquery易扩展开发者可以自己编写jquery的扩展插件
27.以下()函数不是jQuery内置的与AJAX相关的函数。D
A、$.ajax() B.$.get() C.$.post() D.$.each()
```
each() 方法规定为每个匹配元素规定运行的函数。 $(selector).each(function(index,element))
```
28.以下()选项不能够正确地得到这个标签:( )B
<inputid="btnGo"type=”buttom” value=”点击”class=”btn”>
A.$(“#btnGo”) B.$(“.btnGo”)
C.$(“.btn”) D.$(“input[type=button]”)
29.在jQuery中被誉为工厂函数的是C
A.ready( B.function C。$() D.next( )
二.填空题
1. jquery访问对象中的size()方法的返回值和jQuery对象的______属性一样. length
2. jquery中$(this).get(0)的写法和_______是等价的。$(this)[0])
3. 现有一个表格如果想要匹配所有行数为偶数的用___实现奇数的用_____实现
even odd
4. 在一个表单里想要找到指定元素的第一个元素用____实现那么第二个元素用_____
实现。 first eq(1)
5. 在jquery 中用一个表达式来检查当前选择的元素集合使用_____来实现如果这个表达式失效则返回____值。 is(expr) false
6. 在编写页面的时候如果想要获取指定元素在当前窗口的相对偏移用____来实现该方法的返回值有两个属性分别是____和_____ offset, top, left
7. 在一个表单中如果将所有的div元素都设置为绿色实现功能是_______ $( “div”).css( “color”,”green' )
8. 在jquery 中,当鼠标指针悬停在被选元素上时要运行的两个方法实现该操作的是_____ $(selector).hover(inFunction,outFunction)
9. 在jquery中想让一个元素隐藏用_____实现显示隐藏的元素用____实现
hide(), show()
10. 在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是____ $("div:has(span)");
11.<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是______ $("li:last")
12. 在三个<ul>元素中,分别添加多个<li>元素,通过jQuery中的子元素选择器,将这三个<ul>元素中的第一个<li>元素隐藏,代码是______ $("li:first-child").hide();
13. 在页面的表单中增加了多个<input>类型的复选框元素,其中有的处于选中状态,通过jQuery选择器,将这些选中状态的元素隐藏,代码为_____ $("forminput:checked").hide()
14. 在ajax中data主要有______. _______ . ___________三种方式 html拼接的json数组form表单经serialize()序列化的
15. ______方法用于模拟光标悬停事件 hover()
16. jQuery中提供了__________方法可以停止冒泡 stopPropagation()
17. 可以用_______,阻止这些默认的行为例如单击超链接后会自动跳转,单击"提交"按钮后表单会提交等 event.preventDefault()
18. formData:返回一个________可以通过循环调用来校验 数组
19. jQuery的______可以给现在元素附加新的元素 html()
20. jQuery中的选择器大致分为:________ . ________ ._____ .___________
基本选择器,层次选择器,过滤选择器,表单选择器
21. _______方法用于处理命名冲突 conflict()
三.判断题
1. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
2. on()方法在被选元素及子元素上添加一个或多个事件处理程序(✔)
3. $("this")是使用标签选择器查找名为this的标签
4. nextAll() 不能替代$('prev~siblindgs')选择器(×)
5. 在一个网页中一个Id可以用很多次×
6. 在jquery中可以用 replaceWith() 和 replaceAll() 替换节点(✔)
7. $('prev~div') 能选择'所有的的同辈<div>元素 ×
8. jQuery中addClass()方法 可以来设置和获取 样式 (✔)
9. $.getScript()方法可以加载.js文件需要对javascript文件进行处理 ×
10. delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数(✔)
11. jquery的load()方法中data 参数是必须的(×)
12. nextAll() 方法返回被选元素的所有跟随的同胞元素(✔)
13. parent() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素(×)
14. toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。(✔)
15. $('div > span').css('color', '#FF0000');的作用是选取div下的所有span元素将字体颜色设为红色×
16. jQuery是一个javascript库
17. 通过 jQuery$("div.intro") 能够选取的元素是class="intro" 的首个 div 元素(×)
18. jQuery.ajaxAsync()方法用于执行异步 HTTP 请求(×)
19. jQuery 是 W3C 标准(×)
20. jQueryget请求会将参数跟在URL后进行传递而POST请求则是作为HTTP消息的实体内容发送给Web服务器的这种传递是对用户不可见的。
四.简答题
1.什么是jQuery?
答案jQuery是继prototype之后又一个优秀的Javascrīpt框架
2.简述domready和onload事件的区别图片的onloaddomready页面onload的先后顺序并简述原因。
答案domready在DOM加载完毕时触发onload在页面所有元素都已经准备好时触发包括图片、脚本、样式首先domready其次图片的onload最后页面的onload
3.请解释 XMLHttpRequest 对象,并简要说明 jQuery 中的 $.ajax 方法使用。
答案XMLHttpRequest对象为我们提供了一个访问http协议的接口可以与服务器交互数据实现页面的局部刷新。$.ajax是JQ中封装好的使用ajax的方法使用时传入URL、数据类型、失败成功的调用函数等等
$.ajax({
url:'',
type:'get/post',
data:{},
dataType:'',
success:function(data){
//....
}
});
4.图片懒加载技术会让图片进入视野之后延迟一小段时间才让用户看到图片,体验不好。如何改进?
答案图片预加载将所有图片设定一个src提前缓存在本地当用户需要的时候直接从本地加载。牺牲了性能换得了更好的用户体验.
5. jquery中的选择器 和 css中的选择器有区别吗
答案jQuery选择器支持CSS里的选择器jQuery选择器可用来添加样式和添加相应的行为CSS 中的选择器是只能添加相应的样式
6. jquery中$.get()提交和$.post()提交有区别吗?
答: 1 $.get() 方法使用GET方法来进行异步请求的。 $.post() 方法使用POST方法来进行异步请求的。 2 get请求会将参数跟在URL后进行传递而POST请求则是作为HTTP消息的实体 内容发送给Web服务器的这种传递是对用户不可见的。 3 get方式传输的数据大小不能超过2KB 而POST要大的多 4 GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。
7. 如何来设置和获取HTML 和文本的值?
答案html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容 注意html() 可以用于xhtml文档 不能用于xml文档 text()类似于innerText属性 可以用来读取或设置某个元素中文本内容。 val() 可以用来设置和获取元素的值
8. 选择器中 idclass有什么区别
答案:在网页中 每个id名称只能用一次class可以允许重复使用
9. .jquery表单提交前有几种校验方法分别为
答案formData:返回一个数组,可以通过循环调用来校验 jaForm返回一个jQuery对象所有需要先转换成dom对象 fieldValue返回一个数组 beforeSend()
10. jQuery的美元符号$有什么作用?
答案:其实美元符号$只是”jQuery”的别名它是jQuery的选择器如下代码
Html代码
$(document).ready(function(){ });
当然你也可以用jQuery来代替$,如下代码:
Html代码
jQuery(document).ready(function(){});
jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的例如$(“#main”)即选中id为main的元素。
11. window.onload()函数和jQuery中的document.ready()有什么区别?
答案1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行不必等到加载完毕。
$(document).ready()在 window.onload之前执行
2.编写个数不同
window.onload不能同时编写多个如果有多个window.onload方法只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
4.浏览器兼容性
$(document).ready()可以跨浏览器例如在使用ajax请求的时候自动会处理兼容
5.出现地方不同
window.onload是js标准可出现在任何js脚本中
$(document).ready只有在jq库中出现
12. 编写一段代码请使用jQuery将页面上的所有元素边框设置为2px宽的虚线
答案:<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>