jquery经典题型总结

1、DOM对象与jquery对象相互转换

目前成都创新互联公司已为上千的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、甘孜州网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

DOM对象可以转换为jquery对象：$(DOM对象)

jquery对象可以转换为DOM对象：jquery对象提供get(index)方法

注：jquery对象与DOM对象不能相互调用

2、jquery的选择器与css的选择器之间的关系？

1.jquery的选择器其实是源于CSS的选择器

2.jquery的作者本人非常喜欢css选择器的用法

3.css中的选择器大量在jquery中应用

4.jquery扩展了css中没有的选择器

3、内容过滤选择器

：contains(text)--当前元素及后代元素，后代包含，他就包含

：parent--获取包含文本内容或子元素的元素

：empty--获取没有文本内容或子元素的空元素(适合清空)

：has（selector）--获取含有匹配选择器的元素的父元素

eg:div:.one —— 获取包含class为one的div的父级div

4、富客户端与瘦客户端

富客户端：Rich Client

富因特网应用程序（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。

瘦客户端：瘦客户端（Thin Client）指的是在客户端-服务器网络体系中的一个基本无需应用程序的计算机终端。 它通过一些协议和服务器通信，进而接入局域网。作为应用程序平台的Internet的到来为企业应用程序提供了一个全新的领域：一个基于Internet/intranet的应用程序运用一个只包含一个浏览器的瘦客户端。这个浏览器负责解释、显示和处理应用程序的图形用户界面（GUI）和它的数据。这样的一个应用程序只需要被安装在一个Web服务器上，用户可以自动接收升级。一个解决方案只需要部署一次，甚至对成千的用户也是如此，这种想法的确很吸引人，尤其是Internet技术帮我们缓解了一些传统的应用程序的障碍，比如防火墙和对多平台的支持。

5、阻止事件默认行为

（eg:a标签的链接跳转，form表单元素按钮的提交，reset重置，）

return false  可以取消默认的行为并阻止事件冒泡

event.prenventDefault()    只取消默认行为

[return false  不仅会阻止默认行为，还会阻止后边的代码执行，所以如果是仅仅阻止默认行为，最好放在最后面]

eg:

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind(

"submit",

function() {

return false;

}

);

2、通过使用preventDefault()方法只取消默认的行为。

jQuery 代码:

$("form").bind(

"submit",

function(event){

event.preventDefault();

}

);

3、通过使用stopPropagation()方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind(

"submit",

function(event){

event.stopPropagation();

}

);

6、复制元素

   JQUERY - clone(Boolean) - 是否复制事件 （独立的）

   原生DOM - cloneNode(Boolean) - 是否复制后代节点

  （不是独立的，会跟着原来的变）

   cloneNode(Boolean)方法

在默认情况(false)下,只复制自身节点(不包含后代节点)

当参数传递为true时，复制后代节点

clone默认false,只复制自身节点及后代节点，但是不复制事件，

true，复制事件

7、页面加载

    ready() - 类似于window.onload（只有window为页面加载）

    写法一：$(document).ready(function(){})

 写法二：$().ready(function(){})

 写法三：简写   $(function(){})

 开发使用简写形式(不要忘记所有写法)，面试可能会考全写

 与匿名自调函数的写法类似：匿名自调：（function（）{}）（）

8、JQUERY中的ready()与window.onload事件的区别?【必考】

ready()：1、ready具有简写写法的（写法固定）

    2、 一个HTML页面允许编写多个ready

      3、(执行速度快)只需等待DOM树结构加载完毕

  （ready更快）

onload事件：1、没有任何简写形式

      2、一个HTML页面只允许编写一个onload

      3、(速度慢)必须等待HTML所有内容加载完毕

     （比如图片、音频、视频等不属于DOM）

9、bind()、live()、delegate()、one()和on()的区别?

  答：bind()、live()和on()都是事件绑定

   bind()和live()方法的底层逻辑，就是on()

   live()在JQUERY的新版本中废除

   delegate()是live()新版本替换

   one()绑定一个一次性事件【一次性：只能触发一次】

注：使用新版本的jQuery，一般多用On，最重要的是Bind和on的用法。on根off是一对，live的反操作为die，delegate的反操作，undelegate

10、JQUERY与其他JS库的冲突

      描述 - 在于"$"符号的使用权的冲突

      解决(原则) - JQUERY主动放弃

      解决方案【原则都是一样的】

        方案一 - JQUERY自此不再使用"$",改为jQuery

          问题 - JQUERY的代码变得复杂【最简单但有问题】

        方案二 - JQUERY对外不再使用"$",改为jQuery

          利用JavaScript中的自调函数

 (function($){//形参

      // 这里封装所有JQUERY代码

 })(jQuery);//实参

        方案三 - JQUERY对外不再使用"$",改为jQuery

          利用JQUERY中的ready机制

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

      // 这里封装所有JQUERY代码

 });

        方案四

         jQuery.noConflict();//手册中 核心--多库共存，表示主动放弃

 (function($){

      // 这里封装所有JQUERY代码

 })(jQuery);

        方案五

         jQuery.noConflict();

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

      // 这里封装所有JQUERY代码

 });

推荐方案：方案五 （用的是jQuery的官方机制解决的）

11、console(控制台)四个级别

 log()-日志级别

 info()-信息级别前面是个i

 warn()-警告级别前面是！

 error()-错误级别前面是×

12、append和prepend区别：

 append() - 作为最后一个子元素插入到指定元素中

 【插入在指定元素的后面】

 【显示出来是在后面，作为子元素出现，保留各自前面的li点】

     prepend() - 作为第一个子元素插入到指定元素中

    【插入在指定元素的前面】

 【显示出来是在前面，作为子元素出现，不保留原来li前面的点】

13、隐式迭代-不管过程(只关心输入和输出)

   【即只关心遍历谁，遍历之后的结果是怎么样的，比如原生JS中：for in，while（但不算完整的）】

 显式迭代-关心过程（关心遍历谁，遍历之后的结果，及遍历过程，典型的是：for循环）

14、类数组对象与数组的区别

 类数组对象： 类型是Object

   结构类似于数组

 数组：类型是Array

  值的有序列表

15、JQUERY中get()、eq()和[]的区别?

JQUERY利用get()和[]可以将JQUERY对象转换为DOM对象

get()方法是JQUERY提供的API

[]源于JQUERY对象是类数组对象

eq()返回JQUERY对象

16、$.each()与each()的区别

（1）调用方式不同

（2）接收的参数个数及作用不同

（3）$.each()与页面无关,each()与页面有关

$.each(obj,callback)-全局(JQUERY底层代码)函数

$().each(callback)-(JQUERY）对象方法（也可以是直接写each，前面的是工厂函数）

这些方法都是隐式迭代

【$().each()工厂函数返回的是jQuery对象，$.each()返回的jQuery底层的全局函数】【面试也可能会问】

例1：$("input").each(function(index, domEle){

console.log(domEle.value);

});

例2：$.each($("input"),function(index,domEle){

console.log(domEle);

});

例3：var arr = [1,2,3,4,5];

$.each(arr,function(index,domEle){

console.log(domEle);

});

17、Number类型（包括整型和浮点型）

（1）32位（整型）或64位（浮点型）【js中不分】

（2）二进制、八进制还是十六进制-最后得到的都是十进制的

     【只有js是这样婶儿的~】

（3）正无穷和负无穷

面试问题：正无穷加负无穷是否等于0？答：不等于。

18、JQUERY UI的问题(面试有时会问)

     JQUERY UI并不是一个JS库

     JQUERY UI并不是一个JQUERY插件