Jquery面试题整合

来自棱镜学院-在线IT教育     www.prismcollege.com

一、Jquery測试题

以下哪种不是jquery的选择器？(单选)
A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器
考点:jquery的选择器 (C)

当DOM载入完毕后要运行的函数，以下哪个是正确的？(单选)
jQuery(expression, [context]) B、jQuery(html,[ownerDocument]) C、jQuery(callback) D、jQuery(elements)
考点：jquery的核心函数 (C)

以下哪一个是用来追加到指定元素的末尾的？(单选)
A、insertAfter() B、append() C、appendTo() D、after()
考点：jquery的核心函数 (C)

以下哪一个不是jquery对象訪问的方法？(单选)
A、each(callback) B、size() C、index(subject) D、index()
考点： jquery的核心函数之对象訪问 （D）

jquery訪问对象中的size()方法的返回值和jQuery对象的_______属性一样.
考点：jquery的核心函数之对象訪问 （length）

jquery中$(this).get(0)的写法和__________是等价的。
考点：jquery的核心函数之对象訪问 （$(this)[0]）

7.有这样一个表单元素
。想要找到这个hidden元素，以下哪个是正确的？(单选)
A、visible B、hidden C、visible() D、hidden()
考点：jquery的选择器 （B）

假设须要匹配包括文本的元素，用以下哪种来实现？(单选)
A、text() B、contains() C、input() D、attr(name)
考点：jquery的选择器 （B）

现有一个表格，假设想要匹配全部行数为偶数的。用________实现，奇数的用_______实现。
考点：jquery的选择器 （even,odd）

假设想要找到一个表格的指定行数的元素，用以下哪个方法能够高速找到指定元素？(单选)
A、text() B、get() C、eq() D、contents（）
考点：jquery的选择器 （C）

在一个表单里，想要找到指定元素的第一个元素用_________实现。那么第二个元素用_________实现。
考点：jquery的选择器 （first,eq(1)）

以下哪种不属于jquery的筛选？（单选）
A、过滤 B、自己主动 C、查找 D、串联
考点：jquery的筛选 (B)

以下哪几种是属于jquery文档处理的？ （多选）
A、包裹 B、替换 C、删除 D、内部和外部插入
考点：jquery的文档处理 (ABD)

假设想在一个指定的元素后加入内容，以下哪个是实现该功能的？（单选）
A、append(content) B、appendTo(content)C、insertAfter(content) D、after(content)
考点：jquery的文档处理 (D)

在jquery中。用一个表达式来检查当前选择的元素集合，使用______来实现，假设这个表达式失效，则返回___________值。
考点：jquery的筛选 （is(expr),false）

在jquey中。假设想要从DOM中删除全部匹配的元素，以下哪一个是正确的？（单选）
A、delete() B、empty() C、remove() D、removeAll()
考点：jquery的文档处理 （C）

在jquery中。想要给第一个指定的元素加入样式。以下哪一个是正确的？（单选）
A、first B、eq(1) C、css(name) D、css(name,value)
考点： jquery的css处理 （C）

在编写页面的时候，假设想要获取指定元素在当前窗体的相对偏移，用_________来实现，该方法的返回值有两个属性。各自是________和__________。

考点：jquery的css处理 （offset,top,left）

在jquery中，假设想要获取当前窗体的宽度值，以下哪个是实现该功能的？ （单选）
A、width() B、width(val) C、width D、innerWidth()
考点：jquery的css处理 （A）

在一个表单中，假设将全部的div元素都设置为绿色，实现功能是____________________________。

考点：jquery的css处理 ($(“div”).css(“color”,”green”))

为每个指定元素的指定事件（像click）绑定一个事件处理器函数，以下哪个是用来实现该功能的？ （单选）
A、trigger (type) B、bind(type) C、one(type) D、bind
考点：jquery的事件操作 (B)

在jquery中。鼠标移动到一个指定的元素上。会触发指定的一个方法，实现该操作的是______________。
考点：jquery的事件操作(hover(over,out))

以下哪几个不是属于jquery的事件处理?

(多选)
A、bind(type) B、click() C、change() D、one(type)
考点：jquery的事件处理 (BC)

在一个表单中，假设想要给输入框加入一个输入验证，能够用以下的哪个事件实现？ (单选)
A、hover(over ,out) B、keypress（fn） C、change() D、change(fn)
考点：jquery的事件处理 (D)

当一个文本框中的内容被选中时，想要运行指定的方法时，能够使用以下哪个事件来实现？（单选）
A、click(fn) B、change(fn) C、select(fn) D、bind(fn)
考点：jquery的事件处理 (C)

在jquery中。想让一个元素隐藏，用________实现，显示隐藏的元素用_________实现。
考点：jquery的页面效果 （hide(),show()）

在一个表单中，用600毫秒缓慢的将段落滑上。用__________________________________来实现。
考点：jquery的页面效果 （$(“p”).slideUp(“slow”)）

在jquery中，假设想要自己定义一个动画，用___________________________函数来实现。

考点：jquery的页面效果 (animate(params,options))

在jquery中想要实现通过远程http get请求加载信息功能的是以下的哪一下事件？ (单选)
A、$.ajax() B、load(url) C、$.get(url) D、$. getScript(url)
考点：jquery的ajax (C)

以下不属于ajax事件的是？ (单选)
A、ajaxComplete(callback) B、ajaxSuccess(callback)C、$.post(url) D、ajaxSend(callback)
考点：jquery的ajax （C）

彻底将jQuery变量还原。能够使用___________________方法实现。
考点：jquery的多库共存 ($.noConflict(extreme))

上机题：
用jquery 来实现动态加入和删除表格行

在一个表单中，查找全部选中的input元素。能够用jquery中的____________________来实现。
考点：jquery的选择器（:not()）

以下哪几种是jquery中表单的对象属性？（多选）
A、:checked B、: enabled C、:hidden D、:selected E、:file F、: disabled
考点：jquery的选择器（ABDF）

在jquery中假设将一个“名/值”形式的对象设置为全部指定元素的属性，能够用________________实现。
考点：jquery选择器之属性 （attr(pro)）

在jquery中指定一个类，假设存在就运行删除功能，假设不存在就运行加入功能，以下哪一个是能够直接完毕该功能的？（单选）
A、removeClass() B、deleteClass()C、toggleClass(class) D、addClass()
考点：jquery的属性 （C）

在jquery中想要找到全部元素的同辈元素，以下哪一个是能够实现的？（单选）
A、eq(index) B、find(expr) C、siblings([expr]) D、next()
考点：jquery的筛选 （C）

二、css測试题

css的语法由___________、_____________、____________三部分组成。

考点：css的语法 (选择器、属性和值)

以下哪一个不是检索一个对象的定位方式的属性?

（单选）
A、static B、absolute C、fixed D、top
考点：css的定位 （D）
以下哪个是display布局中用来设置对象以块显示。并加入新行的？ （单选）
A、inline B、none C、block D、compact
考点：css的布局 (C)

设置边框的边框样式用_____________实现，设置边框的颜色用_________实现。

考点：css的边框 （border-style,border-color）

设置一个div的最小宽度为100像素，最大高度为50像素，实现这两个设置的方法是_______、________________。
考点：css的尺寸 (min-width：100px; min-height：50px;)

为一个图片设置成背景图像后，设置背景图像在纵向和横向上平铺。以下哪个是实现该功能的？ (单选)
A、no-repeat B、repeat C、repeat-x D、repeat-y
考点：css的背景background (repeat)

想要设置一个对象外的线条轮廓的样式为虚线边框，用_______________实现该功能。

考点：css的轮廓outline(outline-style: dashed)

在css中。假设想要阻止计数器添加的，用__________________来实现。
考点：css的内容content (counter-increment: none)

在编写css样式的时候，假设想要设置标记容器和主容器之间的补白，用_______________来表示。
考点：css的列表 (marker-offset)

假设想设置表格的行与单元格的边框合并在一起，能够用___________________来实现。
考点：css的表格 （border-collapse：collapse）

假设想设置一个对象内文本的流动和方向。用_______________标签来实现。该标签有两个值。各自是_____________、______________。

考点：css的文本Text （text-layout-flow，horizontal、vertical-ideographic）

在编写css样式的时候。假设想要设置文本的对齐方式，以下哪一个不是text-align下的值？（单选）
A、left B、right C、top D、justify
考点：css的文本 Text (C)

在css中。假设想要设置对象中文本的样式，以下哪一个不是该标签的值？(单选)
A、blink B、line-through C、color D、overline
考点：css的字体font （C）

在css中，设置滚动栏的表面颜色。是用以下的哪个标签来实现的？（单选）
A、scrollbar-base-color B、scrollbar-face-colorC、scrollbar-arrow-color
D、scrollbar-shadow-color
考点：css的滚动栏scrollbar（B）

三、问答题
1. 什么是jQuery?
jQuery是继prototype之后又一个优秀的Javascrīpt框架。

2. HTML代码：

This is a DIV

1) 把这个HTML元素转化为jQuery对象的语句是？
2) 得到div元素内文本的语句能够是哪些？
3) 把元素内文本设置为粗体的方法有？
4) 清空文本的方法有？

1.$(“div”)
2.$(“div”).text(),$(“div”).html ()
3.$(“div”).text(“This is DIV”)
4.$(“div”).text(“”)
3. HTML代码：

窗口顶端

窗口底端

1) $(‘:hidden’).length的值是?
1
2) $(‘form input’), $(‘form > input’), $(‘form + input’), $(‘form ~ input’)分别返回代表哪些元素的jQuery数组？
$(‘form input’) 返回form下的全部input元素
$(‘form > input’) 查找以form为父元素全部input子元素
$(‘form + input’) 查找以form之外第一个input子元素
$(‘form ~ input’) 查找以form之外全部input子元素
3) 获取form里第二个input元素的方法有？
$(“#div1 input”).eq(1)
4) $(‘form input:first’).parent()返回的是？

5) $(‘form input:first’).parents().size()的值是？
1
6) $(‘#div1’).empty()与$(‘#div1’).remove()的结果有什么不同？
$(‘#div1’).empty()清空 div1的内容 结果为

$(“#div1”).remove()删除div1节点 及包括的子节点
4. 有一个button

运行下面jQuery语句：
$(‘#btn’).click(function(){ alert(‘click me’); });
$(‘#btn’).click(function(){ alert(‘click me again.’)});
单击这个button会有什么效果？
弹出2次对话框 各自是 click me, click meagain
5. HTML代码：

Hello how are you?

jQuery 代码:
$("p").find("span").text(‘Hi’).end()
结果是？

Hihow are you

 

1 你在公司是怎么用jquery的？     

答：在项目中是怎么用的是看看你有没有项目经验(依据自己的实际情况来回答)           你用过的选择器啊，复选框啊，表单啊，ajax啊，事件等           配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库就可以        <scripttype="text/javascript"src="jquery/jquery-1.7.2.min.js"/>         接下来通过在         <script>             $(function(){                             });           </script>

    2你为什么要使用jquery？      

答：由于jQuery是轻量级的框架，大小不到30kb,它有强大的选择器。        出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)。        完好的ajax(它的ajax封装的很的好，不须要考虑复杂浏览器的兼容性和XMLHttpRequest         对象的创建和使用的问题。

) 出色的浏览器的兼容性。 并且支持链式操作，隐式迭代。        行为层和结构层的分离，还支持丰富的插件，jquery的文档也很的丰富。

    3你认为jquery有哪些优点？     答案同上

    4  你使用jquery遇到过哪些问题。你是怎么解决的？    

答：这个答案是开发的。看你是否有相关的项目经验。        例 前台拿不到值，JSON 但是出现的错误(多了一个空格等)这编译是不会报错的        jquery库与其它库冲突：         1>假设其它库在jquery库之前导入的话           1.我们能够通过jquery.noconflict()将变量的$的控制权过度给其它库            2.自己定义快捷键,用一个变量接住jquery.noconflict()           3.通过函数传參           2>假设jquery库在其它库之前导入就直接使用jquery         今天在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题。清除缓存后数据无误。          多次測试后发现返回的值都是之前的值，而且一直未运行url(后台为JAVA。设置断点一直未进入)。

在网上查找下,发现是未设置type的原因。        假设没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！

       5  你知道jquery中的选择器吗，请讲一下有哪些选择器？   

答 ：jQuery中的选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器

       6  jquery中的选择器 和 css中的选择器有差别吗？     

答：jQuery选择器支持CSS里的选择器，         jQuery选择器可用来加入样式和加入对应的行为          CSS 中的选择器是仅仅能加入对应的样式

    7  你认为jquery中的选择器有什么优势？   

答：简单的写法  $('ID') 来取代document.getElementById()函数          支持CSS1 到CSS3选择器           完好的处理机制(就算写错了id也不会报错)  

    8  你在使用选择器的时候有有没有什么认为要注意的地方？      

答: 1 选择器中含有".","#","[" 等特殊字符的时候须要进行转译         2 属性选择器的引號问题          3 选择器中含有空格的注意事项          

    9  jquery对象和dom对象是如何转换的？    

答 ：jquery转DOM对象:jQuery 对象是一个数组对象，能够通过[index]的丰富得到对应的DOM对象                     还能够通过get[index]去得到对应的DOM对象。

          DOM对象转jQuery对象:$(DOM对象)

    10  你是怎样使用jquery中的ajax的？     

答: 假设是一些常规的ajax程序的话，使用load(),$.get(),$.post(),就能够搞定了，          一般我会使用的是$.post() 方法。

          假设须要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)         及complete(请求完毕后处理)回调函数等。这个时候我会使用$.ajax()

    11  你认为jquery中的ajax好用吗，为什么？      

答: 好用的。         由于jQuery提供了一些日常开发中夙瑶的快捷操作，例load，ajax，get，post等等。        所以使用jQuery开发ajax将变得极其简单，我们就能够集中精力在业务和用户的体验上         ，不须要去理会那些繁琐的XMLHttpRequest对象了。

    12jquery中$.get()提交和$.post()提交有差别吗？     

答:        1 $.get() 方法使用GET方法来进行异步请求的。

       $.post() 方法使用POST方法来进行异步请求的。

      2 get请求会将參数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体         内容发送给Webserver的。这样的传递是对用户不可见的。      3 get方式传输的数据大小不能超过2KB 而POST要大的多       4 GET 方式请求的数据会被浏览器缓存起来。因此有安全问题。

      

    13  jquery中的load方法一般怎么用的？    

答：load方法一般在 加载远程HTML 代码并插入到DOM中的时候用        通经常使用来从Webserver上获取静态的数据文件。         假设要传递參数的话，能够使用$.get() 或 $.post() 

    14  在jquery中你是怎样去操作样式的？    

答: addClass() 来追加样式          removeClass() 来删除样式        toggle() 来切换样式         

    15  简单的讲叙一下jquery是怎么处理事件的，你用过哪些事件？

    答: 首先去装载文档，在页面家在完成后，浏览器会通过javascript 为DOM          元素加入事件。

    16  你使用过jquery中的动画吗，是如何用的？      答:使用过。

           hide()和 show() 同一时候改动多个样式属性。

像高度，宽度，不透明度。           fadeIn() 和fadeOut() fadeTo() 仅仅改变不透明度          slideUp() 和slideDown() slideToggle() 仅仅改变高度         animate() 属于自己定义动画的方法.       

17 你使用过jquery中的插件吗？    答:看个人的实力和经验来回答了。          

    18  你一般用什么去提交数据，为什么？     

答:一般我会使用的是$.post()方法。

        假设须要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)          及complete(请求完毕后处理)回调函数等。这个时候我会使用$.ajax()

    19  在jquery中引入css有几种方式？      

答:四种 行内式。内嵌式，导入式，链接式       

    20  你在jquery中使用过哪些插入节点的方法。它们的差别是什么？      答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter()      before(),insertBefore()        大致能够分为 内部追加和外部追加       append() 表式向每一个元素内部追加内容。          appendTo() 表示 讲全部的元素追加到指定的元素中。        例$(A)appendTo(B) 是将A追加到B中          以下的方法解释类似

    21  你使用过包裹节点的方法吗，包裹节点有方法有什么优点？      

答: wrapAll(),wrap(), wrapInner()         须要在文档中插入额外的结构化标记的时候能够使用这些包裹的方法        应为它不会帛画原始文档的语义

    22  jquery中怎样来获取或和设置属性？      jQuery中能够用attr()方法来获取和设置元素属性     removeAttr() 方法来删除元素属性

    23  怎样来设置和获取HTML 和文本的值？    

答：html()方法 类似于innerHTML属性 能够用来读取或者设置某个元素中的HTML内容           注意：html() 能够用于xhtml文档 不能用于xml文档           text()类似于innerText属性 能够用来读取或设置某个元素中文本内容。         val() 能够用来设置和获取元素的值      

    24  你jquery中有哪些方法能够遍历节点？      

答 ：children() 取得匹配元素的子元素集合,仅仅考虑子元素不考虑后代元素          next() 取得匹配元素后面紧邻的同辈元素          prev() 取得匹配元素前面紧邻的同辈元素         siblings() 取得匹配元素前后的全部同辈元素         closest() 取得近期的匹配元素           find() 取得匹配元素中的元素集合包含子代和后代       

25 子元素选择器 和后代选择器元素有什么差别？    

答:子代元素是找子节点下的全部元素,后代元素是找子节点或子节点的子节点中的元素       

26 在jquery中能够替换节点吗？    

答：能够 在jQuery中有两者替换节点的方式         replaceWith() 和 replaceAll()          比如在<p title="hao are you">hao are you</p>替换成         <strong>I amfine<strong>           $('p').replaceWith('<strong>I amfine</strong>');           replaceAll与replaceWith的使用方法前后调换一下就可以。  

    27你认为beforeSend方法有什么用？    

答：发送请求前能够改动XMLHttpRequest对象的函数。在beforeSend中          假设返回false 能够取消本次的Ajax请求。

XMLHttpRequest对象是唯一的參数        所以在这种方法里能够做验证         

28 siblings() 方法 和 $('prev~div')选择器是一样的嘛？      

答: $('prev~div') 仅仅能选择'#prev'元素后面的同辈<div>元素           而siblings()方法与前后的文职无关，仅仅要是同辈节点就都能匹配。

    29你在ajax中使用过JSON吗，你是怎样用的？     

答:使用过。在$.getJSON()方法的时候就是。     由于 $.getJSON() 就是用于载入JSON文件的     

30 有哪些查询节点的选择器？    

答：我在公司使用过 :first 查询第一个，:last 查询最后一个，:odd查询奇数可是索引从0開始         :even 查询偶数。:eq(index)查询相等的 ,:gt(index)查询大于index的 ,:lt查询小于index         :header 选取全部的标题等   

31 nextAll() 能 替代$('prev~siblindgs')选择器吗？      

答:能。

使用nextAll()和使用$('prev~siblindgs') 是一样的      

32 jQuery中有几种方法能够来设置和获取 样式      

答 ：addClass() 方法，attr() 方法     

33 $(document).ready()方法和window.onload有什么差别？     

答: 两个方法有相似的功能，可是在实行时机方面是有差别的。           1 window.onload方法是在网页中全部的元素(包含元素的全部关联文件)全然             载入到浏览器后才运行的。        2 $(document).ready() 方法能够在DOM载入就绪时就对其进行操纵，并调用           运行绑定的函数。    

34 jQuery是怎样处理缓存的？   

答 ：要处理缓存就是禁用缓存.           1 通过$.post() 方法来获取数据，那么默认就是禁用缓存的。        2 通过$.get()方法 来获取数据。能够通过设置时间戳来避免缓存。              能够在URL后面加上+(+new Date)              例 $.get('ajax.xml?'+(+newDate),function () {                  //内容            });        3通过$.ajax 方法来获取数据。仅仅要设置cache:false就可以。    

35 $.getScript()方法 和 $.getJson() 方法有什么差别？   

答: 1 $.getScript() 方法能够直接载入.js文件，而且不须要对javascript文件进行处理           。javascript文件会自己主动运行。         2 $.getJson() 是用于载入JSON 文件的 。使用方法和$.getScript()    

36 你读过有关于jQuery的书吗？     《jquery基础教程》   《jquery实战》   《瑞丽的jquery》《巧用jquery》  《jQuery用户界面库学习指南》等     

37 $("#msg").text(); 和 $("#msg").text("<b>newcontent</b>");有什么差别？   

答：1 $("#msg").text() 是返回id为msg的元素节点的文本内容        2$("#msg").text("<b>new content</b>"); 是 将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,          页面显示粗体的<b>new content</b>

38 radio单选组的第二个元素为当前选中值，该怎么去取？      

答 :$('input[name=items]').get(1).checked = true;     

39 选择器中 id，class有什么差别？    

答：在网页中 每一个id名称仅仅能用一次，class能够同意反复使用               

40 你使用过哪些数据格式，它们各有什么特点？     

答: HTML格式  ,JSON格式,javascript格式,XML格式         1HTML片段提供外部数据一般来说是最简单的。        2假设数据须要重用。并且其它应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON一般是不错的选择。         3 而当远程应用程序未知时，XML则可以为良好的互操作性提供最可靠的保证。

      

41 jQuery 能做什么？    

答：1 获取页面的元素            2 改动页面的外观         3 改变页面大的内容          4 响应用户的页面操作         5 为页面加入动态效果        6 无需刷新页面，即能够从server获取信息        7 简化常见的javascript任务              

42 在ajax中data主要有几种方式？     

答 ： 三种，html拼接的，json数组。form表单经serialize()序列化的。      

43 ：jQuery中的hover()和toggle()有什么差别？      

答 hover()和toggle()都是jQuery中两个合成事件。         hover()方法用于模拟光标悬停事件。         toggle()方法是连续点击事件。      

44 你知道jQuery中的事件冒泡吗。它是怎么运行的，何如来停止冒泡事件？      答: 知道,        事件冒泡是从里面的往外面開始触发。

          在jQuery中提供了stopPropagation()方法能够停止冒泡。      

45 比如 单击超链接后会自己主动跳转，单击"提交"button后表单会提交等，有时候我想阻止这些默认的行为。该怎么办？     

答: 能够用event.preventDefault()         或 在事件处理函数中返回false，即 return false;      

46.jquery表单提交前有几种校验方法？分别为？？      

formData:返回一个数组。能够通过循环调用来校验    jaForm：返回一个jQuery对象。全部须要先转换成dom对象       fieldValue：返回一个数组    beforeSend()     

47.在jquery中你有没有编写过插件。插件有什么优点？你编写过那些插件？它应该注意那些？      

答: 插件的优点：对已有的一系列方法或函数的封装。以便在其它地方又一次利用。方便后期维护和提高开发效率          插件的分类：封装对象方法插件、封装全局函数插件、选择器插件        注意的地方：            1.插件的文件名称推荐命名为jquery.[插件名].js。以免和其它的javaScript库插件混淆              2.全部的对象方法都应当附加到jQuery.fn对象上，而全部的全局函数都应当附加到jQuery对象本身上             3.插件应该返回一个jQuery对象，以保证插件的可链式操作              4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示，这样能够避免冲突或使用闭包来避免              5.全部的方法或函数插件。都应当一分好结尾。否则压缩的时候可能出现故障。在插件头部加上分号。这样能够避免他人的不规范代码给插件带来影响              6.在插件中通过$.extent({})封装全局函数,选择器插件。扩展已有的object对象            通过$.fn.extend({})封装对象方法插件     

48.如何给jquery动态附加新的元素?那么如何给新生成的元素绑定事件呢？       jQuery的html()能够给如今元素附加新的元素      直接在元素还未生成前就绑定肯定是无效的。由于所绑定的元素眼下根本不存在。     所以我们能够通过live和livequery来动态绑定事件