前端面试JQUERY

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

答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊，动画啊，表单啊，ajax事件等

配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可

$(function(){ });

</script>

2 你为什么要使用jquery？

答：因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

3 你觉得jquery有哪些好处？答案同上

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

答：这个答案是开发的，看你是否有相关的项目经验。

例：前台拿不到值，JSON 可是出现的错误(多了一个空格等)这编译是不会报错的 jquery库与其他库冲突；

今天在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！

5 你知道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对象了。

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

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

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

2 get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3 get方式传输的数据大小不能超过2KB 而POST要大的多

4 GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

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

答：load方法一般在载入远程HTML代码并插入到DOM中的时候用

通常用来从Web服务器上获取静态的数据文件。

如果要传递参数的话，可以使用$.get() 或 $.post()

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

答: addClass() 来追加样式

removeClass() 来删除样式

toggle() 来切换样式

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

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

16 你使用过jquery中的动画吗，是怎样用的？

答:使用过。

hide() 和 show() 同时修改多个样式属性。像高度，宽度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法.

17 你使用过jquery中的插件吗？

答:看个人的实力和经验来回答了，例如：jQuery_Mobile,jQuery_ui。

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

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

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

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

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

20 你在jquery中使用过哪些插入节点的方法，它们的区别是什么？ 答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore()

内添加

1.append在文档内添加元素

2.appendTo()把匹配的元素添加到对象里

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到对象前

外添加

1.after()在元素之后添加

2.before()在元素之前添加

3.insertAfter()把匹配元素在对象后添加

4.insertBefore()把匹配元素在对象前添加

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

答: 1.wrap()把匹配的元素包裹起来

2.wrapAll()把所有匹配的对象用单个元素包裹

3.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 am fine<strong> $('p').replaceWith('<strong>I am fine</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?'+(+new Date),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>new content</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格式

1 HTML片段提供外部数据一般来说是最简单的。

2 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。

3 而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

41 jQuery 能做什么？

答：1 获取页面的元素

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

6 无需刷新页面，即可以从服务器获取信息

7 简化常见的javascript任务

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

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

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

答 hover()和toggle()都是jQuery中两个合成事件。

hover()方法用于模拟光标悬停事件。

toggle()方法是连续点击事件。

44 你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

答 : 知道, 事件冒泡是从里面的往外面开始触发。

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

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

答: 可以用 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来动态绑定事件

49.Jquery与jQuery UI 有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

50.jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {

return JSON.stringify(array)

}

$.fn.parseArray = function(array) {

return JSON.parse(array)

}

然后调用：

$("").stringifyArray(array)

1，body中onload()函数和jQuery中document.ready()的区别
网页中可以使用多个document.ready()，但只能使用一次onload();
document.ready()函数在页面DOM元素加载后就调用，onload()在所有关联资源加载完毕才调用。
2，jquery中的选择器
基本选择器：根据id, css类名返回匹配的dom元素
层次选择器：路径选择，根据路径层次选择dom元素
过滤选择器
3，jQuery实现点击按钮弹出一个对话框
HTML：

jQuery：

('#Button1').click(function () { alert($('#inputField').attr("value")); }); });

4，jquery中Delegate()函数的作用
有一个父元素，需要给子元素添加事件；
(this).hide();
});
元素在当前网页中不可用可以使用Delegate()；
5，jquery禁用浏览器前进后退按钮

$(document).ready(function() { window.history.forward(1); window.history.forward(-1);});

6，点击按钮使用jquery隐藏图片
执行hide()方法
(‘#ImageToHide’).hide();
});
7，detach()和remove()方法的区别
都是用来移除DOM元素。detach()会保持对过去解除元素的跟踪，可以被取消解除，二、九个Jquery面试题

1、Jquery的美元符号$有什么作用

回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：

1: $(document).ready(function(){

3: });

当然你也可以用jQuery来代替$，如下代码：

1: jQuery(document).ready(function(){

3: });

jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$(“#main”)即选中id为main的元素。

2、body中的onload()函数和jQuery中的document.ready()有什么区别？

onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

3、Jquery中有哪几种类型的选择器？

从我自己的角度来讲，可以有3种类型的选择器，如下：

1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

4、请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

代码如下:

1: <script language="javascript" type="text/javascript">

3: $("*").css("border", "2px dotted red");

5: </script>

5、当CDN上的jQuery文件不可用时，该怎么办？

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

1: <script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>

3: <script type='text/javascript'>//<![CDATA[

5: if (typeof jQuery == 'undefined') {

7: document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

9: }//]]>

10:

11: </script>

6、如何使用jQuery实现点击按钮弹出一个对话框？

代码如下：

html:

1: <input id="inputField" type="text" size="12"/>

jQuery：

$(document).ready(function ()

{

$(‘#Button1′).click(function () { alert($(‘#inputField’).attr(“value”));

} );

7、jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

1: $("ul").delegate("li", "click", function(){

3: $(this).hide();

5: });

2、当元素在当前页面中不可用时，可以使用delegate()

8、怎样用jQuery编码和解码URL？

在jQuery中，我们可以使用以下方法实现URL的编码和解码。

1: encodeURIComponent(url) and decodeURIComponent(url)

9、如何用jQuery禁用浏览器的前进后退按钮？

实现代码如下：

1: <script type="text/javascript" language="javascript">

3: $(document).ready(function() {

5: window.history.forward(1);

7: //OR

9: window.history.forward(-1);

10:

11: });

12:

13: </script>
最常见的20个jQuery面试问题及答案

2016年02月19日 15:24:11

阅读数：1783

1. jQuery 库中的 $() 是什么？（答案如下）

$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。

2. 网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？（答案）

另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

3. jQuery 里的 ID 选择器和 class 选择器有何不同？（答案）

如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

1	$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'
2		$('.active') // Returns all elements with CSS class active.

正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

1	$('#ButtonToClick').click(function(){
2		$('#ImageToHide').hide();

});

我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

5. $(document).ready() 是个什么函数？为什么要用它？(answer)

这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

6. JavaScript window.onload 事件和 jQuery ready 函数有何不同？（答案）

这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

7. 如何找到所有 HTML select 标签的选中项？（答案如下）

这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 <select > 标签的选中项：

1	$('[name=NameOfSelectedTag] :selected')

这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。

8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

1	$('[name=NameOfSelectedTag] :selected').each(function(selected) {
2		alert($(selected).text());

});

其中 text() 方法返回选项的文本。

9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下）

你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

10. 你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略）

这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落（<p>标签）内部的超链接（<a>标签）……

11. $(this) 和 this 关键字在 jQuery 中有何不同？（答案如下）

这对于很多 jQuery 初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

12. 你如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href? (答案)

attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

1		$('a').each(function(){
2	alert($(this).attr('href'));

});

13. 你如何使用jQuery设置一个属性值? (答案)

前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值例如. attr(name, value), 这里name是属性的名称，value是属性的新值。

14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看用来向DOM中添加元素的 appendTo() 方法.

15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

16. 使用 CND 加载 jQuery 库的主要优势是什么 ? (答案)

这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

18. jQuery 中的方法链是什么？使用方法链有什么好处？

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

这通常用于阻止事件向上冒泡。

20. 哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

第一种，因为它直接调用了 JavaScript 引擎。

remove()会保持对过去移除对象的引用

问题：jQuery的美元符号$有什么作用？

回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：

$(document).ready(function(){

});

当然你也可以用jQuery来代替$，如下代码：

jQuery(document).ready(function(){

});

jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$(“#main”)即选中id为main的元素。

问题：body中的onload()函数和jQuery中的document.ready()有什么区别？

回答：onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

问题：jQuery中有哪几种类型的选择器？

回答：从我自己的角度来讲，可以有3种类型的选择器，如下：

1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

问题：请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

回答：这正是jQuery选择器上场的时候了，代码如下：

$("*").css("border", "2px dotted red");

</script>

问题：当CDN上的jQuery文件不可用时，该怎么办？

回答：为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>

<script type='text/javascript'>//<![CDATA[

if (typeof jQuery == 'undefined') {

document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

}//]]>

</script>

问题：如何使用jQuery实现点击按钮弹出一个对话框？

回答：代码如下：

HTML：

<input id="inputField" type="text" size="12"/>

jQuery：

<script type="text/javascript"> $(document).ready(function () { $('#Button1').click(function () { alert($('#inputField').attr("value")); }); }); </script>

问题：jQuery中的Delegate()函数有什么作用？

回答：delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、当元素在当前页面中不可用时，可以使用delegate()

问题：怎样用jQuery编码和解码URL？

回答：在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)

问题：如何用jQuery禁用浏览器的前进后退按钮？

回答：实现代码如下：

<script type="text/javascript" language="javascript">

$(document).ready(function() {

    window.history.forward(1);

     //OR

     window.history.forward(-1);

});

</script>

JQuery的源码看过吗？能不能简单概况一下它的实现原理？
jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
jquery.extend 与 jquery.fn.extend的区别？
jQuery 的队列是如何实现的？队列可以用在哪些地方？
谈一下Jquery中的bind(),live(),delegate(),on()的区别？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
针对 jQuery性能的优化方法？
Jquery与jQuery UI有啥区别？
JQuery的源码看过吗？能不能简单说一下它的实现原理？
jquery 中如何将数组转化为json字符串，然后再转化回来？
jQuery和Zepto的区别？各自的使用场景？
针对 jQuery 的优化方法？
Zepto的点透问题如何解决？
jQueryUI如何自定义组件?
需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
如何判断当前脚本运行在浏览器还是node环境中？（阿里）
移动端最小触控区域是多大？
jQuery 的 slideUp动画，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？
移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
解释JavaScript中的作用域与变量声明提升？
那些操作会造成内存泄漏？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？

你觉得jQuery或zepto源码有哪些写的好的地方

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链

(function( window, undefined ) {

//用一个函数域包起来，就是所谓的沙箱

//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

//把当前沙箱需要的外部变量通过函数参数引入进来

//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

window.jQuery = window.$ = jQuery;

})( window );

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法
有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度
jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率

jQuery 的实现原理？

(function(window, undefined) {})(window);
jQuery 利用 JS 函数作用域的特性，采用立即调用表达式包裹了自身，解决命名空间和变量污染问题
window.jQuery = window.$ = jQuery;
在闭包当中将 jQuery 和 $ 绑定到 window 上，从而将 jQuery 和 $ 暴露为全局变量

jQuery.fn 的 init 方法返回的 this 指的是什么对象？ 为什么要返回 this？

jQuery.fn 的 init 方法返回的 this 就是 jQuery 对象
用户使用 jQuery() 或 $() 即可初始化 jQuery 对象，不需要动态的去调用 init 方法

jQuery.extend 与 jQuery.fn.extend 的区别？

$.fn.extend() 和 $.extend() 是 jQuery 为扩展插件提拱了两个方法
$.extend(object); // 为jQuery添加“静态方法”（工具方法）

$.extend({

　　min: function(a, b) { return a < b ? a : b; },

　　max: function(a, b) { return a > b ? a : b; }

});

$.min(2,3); // 2

$.max(4,5); // 5

$.extend([true,] targetObject, object1[, object2]); // 对targt对象进行扩展

var settings = {validate:false, limit:5};

var options = {validate:true, name:"bar"};

$.extend(settings, options); // 注意：不支持第一个参数传 false

// settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // 为jQuery添加“成员函数”（实例方法）

$.fn.extend({

alertValue: function() {

$(this).click(function(){

alert($(this).val());

});

}

});

$("#email").alertValue();

jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

浅拷贝（只复制一份原始对象的引用） var newObject = $.extend({}, oldObject);
深拷贝（对原始对象属性所引用的对象进行进行递归拷贝） var newObject = $.extend(true, {}, oldObject);

jQuery 的队列是如何实现的？队列可以用在哪些地方？

jQuery 核心中有一组队列控制方法，由 queue()/dequeue()/clearQueue() 三个方法组成。
主要应用于 animate()，ajax，其他要按时间顺序执行的事件中

var func1 = function(){alert('事件1');}

var func2 = function(){alert('事件2');}

var func3 = function(){alert('事件3');}

var func4 = function(){alert('事件4');}

// 入栈队列事件

$('#box').queue("queue1", func1); // push func1 to queue1

$('#box').queue("queue1", func2); // push func2 to queue1

// 替换队列事件

$('#box').queue("queue1", []); // delete queue1 with empty array

$('#box').queue("queue1", [func3, func4]); // replace queue1

// 获取队列事件（返回一个函数数组）

$('#box').queue("queue1"); // [func3(), func4()]

// 出栈队列事件并执行

$('#box').dequeue("queue1"); // return func3 and do func3

$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整个队列

$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

jQuery 中的 bind(), live(), delegate(), on()的区别？

bind 直接绑定在目标元素上
live 通过冒泡传播事件，默认document上，支持动态数据
delegate 更精确的小范围使用事件代理，性能优于 live
on 是最新的1.9版本整合了之前的三种方式的新事件绑定机制

是否知道自定义事件？ jQuery 里的 fire 函数是什么意思，什么时候用？

事件即“发布/订阅”模式，自定义事件即“消息发布”，事件的监听即“订阅订阅”
JS 原生支持自定义事件，示例：

document.createEvent(type); // 创建事件

event.initEvent(eventType, canBubble, prevent); // 初始化事件

target.addEventListener('dataavailable', handler, false); // 监听事件

target.dispatchEvent(e); // 触发事件

jQuery 里的 fire 函数用于调用 jQuery 自定义事件列表中的事件

jQuery 通过哪个方法和 Sizzle 选择器结合的？

Sizzle 选择器采取 Right To Left 的匹配模式，先搜寻所有匹配标签，再判断它的父节点
jQuery 通过 $(selecter).find(selecter); 和 Sizzle 选择器结合

jQuery 中如何将数组转化为 JSON 字符串，然后再转化回来？

// 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现

$.array2json = function(array) {

return JSON.stringify(array);

}

$.json2array = function(array) {

// $.parseJSON(array); // 3.0 开始，已过时

return JSON.parse(array);

}

// 调用

var json = $.array2json(['a', 'b', 'c']);

var array = $.json2array(json);

jQuery 一个对象可以同时绑定多个事件，这是如何实现的？

$("#btn").on("mouseover mouseout", func);

$("#btn").on({

mouseover: func1,

mouseout: func2,

click: func3

});

针对 jQuery 的优化方法？

缓存频繁操作DOM对象
尽量使用id选择器代替class选择器
总是从#id选择器来继承
尽量使用链式操作
使用时间委托 on 绑定事件
采用jQuery的内部函数data()来存储数据
使用最新版本的 jQuery

jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢?

在触发元素上的事件设置为延迟处理：使用 JS 原生 setTimeout 方法
在触发元素的事件时预先停止所有的动画，再执行相应的动画事件：$('.tab').stop().slideUp();

jQuery UI 如何自定义组件？

通过向 $.widget() 传递组件名称和一个原型对象来完成
$.widget("ns.widgetName", [baseWidget], widgetPrototype);

jQuery 与 jQuery UI、jQuery Mobile 区别？

jQuery 是 JS 库，兼容各种PC浏览器，主要用作更方便地处理 DOM、事件、动画、AJAX
jQuery UI 是建立在 jQuery 库上的一组用户界面交互、特效、小部件及主题
jQuery Mobile 以 jQuery 为基础，用于创建“移动Web应用”的框架

jQuery 和 Zepto 的区别？ 各自的使用场景？

jQuery 主要目标是PC的网页中，兼容全部主流浏览器。在移动设备方面，单独推出 jQuery Mobile
Zepto 从一开始就定位移动设备，相对更轻量级。它的 API 基本兼容 jQuery，但对PC浏览器兼容不理想
jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。
如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！

技术 | 前端面试题（一）：递归解析

我和阿里巴巴的同事守雌将为大家带来一个系列专题：前端面试题解析，一周更新两篇，也许答案可能不是最优的，但是也可以给你提供解决问题的思路。面试题力求实战，期望对于找工作的你，温故而知新的你，能有所帮助。

递归基本上是一个必考的算法题，它是实现程序计算过程中描述过程的基础模式之一，可见这是极其重要的。前端考察这个的原因，多数是在于看看面试者对于一些基础算法的了解程度，以及思考程度。

前端

1. 浏览器的全局对象是window
2. 全局执行环境即window对象所创建的，局部执行环境是函数执行过程中创建的。
3. 全局对象，可以访问所有其他所有预定义的对象、函数和属性。
4. 当javascript代码被浏览器载入后，默认最先进入的是一个全局执行环境。
5. 明白了执行上下文和作用域的一些概念，知道其中的运行机制和原理。

我们再回头看看这两个demo比较,我们解释清楚这个demo执行的结果。
demo1：

var name="jawil";

console.log(name);//jawil

console.log(window.name)//jawil

console.log(this.name)//jawill

demo2：

name="jawil";

console.log(name);//jawil

console.log(window.name)//jawil

console.log(this.name)//jawil

好，从例子看以看出，这两个name都是全局属性，未通过var声明的变量a和通过var声明的变量b，都可以通过this和window访问到.

我们可以在控制台打印出windowd对象，发现name成了window对象的一个属性：

var name="jawil";

console.log(window);

name2="test";

console.log(window);

这是其实一个作用域和上下文的问题。在JavaScript中，this指向当前的上下文，而var定义的变量值在当前作用域中有效。JavaScript有两种作用域，全局作用域和局部作用域。局部作用域就是在一个函数里。var关键字使用来在当前作用于中创建局部变量的，而在浏览器中的JavaScript全局作用域中使用var语句时，会把申明的变量挂在window上，而全局作用域中的this上下文恰好指向的又是window，因此在全局作用域中var申明的变量和window上挂的变量，即this可访问的变量有间接的联系，但没有直接联系，更不是一样的。

上面的分析我们知道了，全局变量，全局环境下的this,还有全局对象之间的关系了，具体总结一下就是：

1. 全局环境的this会指向全局对象window，此时this===window;
2. 全局变量会挂载在window对象下，会成为window下的一个属性。
3. 如果你没有使用严格模式并给一个未声明的变量赋值的话，JS会自动创建一个全局变量。

那么用var声明的全局变量赋值和未声明的全局变量赋值到底有什么不同呢？这里不再是理解理解这道面试题的重点，想深入探究可以看看这篇文章：javascript中加var和不加var的区别你真的懂吗.

该回头了，好累，再来看看这道面试题：

var name = "jay"; //一看这二逼就是周杰伦的死忠粉

var person = {

name: "kang",

pro: {

name: "Michael",

getName: function() {

return this.name;

}

};

console.log(person.pro.getName());

var pepole = person.pro.getName;

console.log(pepole());

最后就成了为什么person.pro.getName()的this是person.pro而pepole（）的this成了window对象。这里我们就要了解this的运行机制和原理。

在这里，我们需要得出一个非常重要一定要牢记于心的结论，this的指向，是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。因此我们可以很容易就能理解到，一个函数中的this指向，可以是非常灵活的。

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。
如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

person.pro.getName()中，getName是调用者，他不是独立调用，被对象person.pro所拥有，因此它的this指向了person.pro。而pepole()作为调用者，尽管他与person.pro.getName的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。

再来看一个例子，来加深理解这段话：

var a = 20;

function getA() {

return this.a;

}

var foo = {

a: 10,

getA: getA

}

console.log(foo.getA()); // 10

灵机一动，再来一个。如下例子。

function foo() {

console.log(this.a)

}

function active(fn) {

fn(); // 真实调用者，为独立调用

}

var a = 20;

var obj = {

a: 10,

getA: foo

}

active(obj.getA);

这个例子提示一下，关于函数参数的传递赋值问题。
JS是按值传递还是按引用传递?
这里我就不多做解答了，大家自行揣摩。

以上关于this解答来自波同学的引用，我这里就偷了个懒在，直接拿来引用。
原文地址:前端基础进阶（五）：全方位解读this

最后把知道面试题梳理一下：

console.log(person.pro.getName());//Michael

var pepole = person.pro.getName;

console.log(pepole());//jay

person.pro.getName()中，getName是调用者，他不是独立调用，被对象person.pro所拥有，因此它的this指向了person.pro,所以this.name=person.pro.name="Michael";

而pepole()作为调用者，尽管他与person.pro.getName的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。
这道题实在非严格模式下，所以this指向了window，又因为全局变量挂载在window对象下，所以this.name=window.name=“jay”