zoukankan      html  css  js  c++  java
  • jquery面试题

    1.jQuery 库中的 $() 是什么?

    $() 函数是 jQuery() 函数的别称, $() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

    2、网页上有 5 <div> 元素,如何使用 jQuery来选择它们?

    3jQuery 里的 ID 选择器和 class 选择器有何不同?

    ID 选择器使用 ID 来选择元素,比如 #element1,而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时,使用 ID 选择器,而如果你想要选择一组具有相同 CSS class 的元素,就要用 class 选择器。

    从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.

    $('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'

    $('.active') // Returns all elements with CSS class active.

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

    $('#ButtonToClick').click(function(){

         $('#ImageToHide').hide();

    });

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

    文档就绪函数,当DOM 完全加载(例如HTML被完全解析DOM树构建完成时)后执行,并适用所有浏览器。

    6JavaScript 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 标签的选中项?

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

    8jQuery 里的 each() 是什么函数?你是如何使用它的?

    遍历函数可以遍历一个集合

    9、你是如何将一个 HTML 元素添加到 DOM 树中的?

    文档操作函数appendTo

    10、你能用 jQuery 代码选择所有在段落内部的超链接吗?

    11$(this) this 关键字在 jQuery 中有何不同?

    $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)

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

    attr() 方法

    13、你如何使用jQuery设置一个属性值?

    attr(name, value)

    14jQuerydetach() remove() 方法的区别是什么?

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

    15、你如何利用jQuery来向一个元素中添加和移除CSS?

    addClass() removeClass()

    16、使用 CDN 加载 jQuery 库的主要优势是什么 ?

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

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

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

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

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

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

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

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

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

    21jQuery中有哪几种类型的选择器?

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

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

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

    </script>

    23、当CDN上的jQuery文件不可用时,该怎么办?

    为了节省带宽和脚本引用的稳定性,我们会使用CDN上的jQuery文件,例如googlejquery 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>

    24jQuery中的Delegate()函数有什么作用?

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

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

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

    $(this).hide();

    });

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

    25、怎样用jQuery编码和解码URL

    encodeURIComponent(url) and decodeURIComponent(url)

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

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

    $(document).ready(function() {

         window.history.forward(1);

         //OR

         window.history.forward(-1);

    });

    </script>

    27、如何修改jQuery默认编码(例如默认UTF-8改成改GB2312):

    $.ajaxSetup({

         ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}

    });

    28JavaScript中的作用域与变量声明提升?

    JavaScript的作用域只有两种:全局作用域和局部作用域,局部作用域是按照函数来区分的。在JavaScript中没有块级作用域,函数是js中唯一拥有自身作用域的结构。

    声明的提升

    当前作用域内的声明都会提升到作用域的最前面包括变量和函数的声明

    比如

    (function(){

      var a = "1";

       var f = function(){};

       var b = "2";

       var c = "3";

    })();

    声明会被提升为

    (function(){

      var a,f,b,c;

      a = "1";

      f = function(){};

      b = "2";

      c = "3";

    })();

    注意函数表达式并没有被提升,这也是函数表达式与函数声明的区别。进一步看二者的区别:

    (function(){

      //var f1,function f2(){}; //hoisting,被隐式提升的声明

      f1(); //ReferenceError: f1 is not defined

      f2();

      var f1 = function(){};

      function f2(){}

    })();

    29、如何编写高性能的Javascript

    1、让代码简洁:一些简略的表达方式也会产生很好的优化。比如x=x+1;在不影响功能的情况下可以简写为x++;

    2、变量名方法名尽量在不影响语意的情况下简单,比如定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength

    3、关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)while()for(in)。在这三种循环中for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或–运算符。

    4、如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。

    5、尽量选用局部变量而不是全局变量。局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。

    6、尽量少使用eval。每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。

    7、减少对象查找。因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。

    8、字符串连接。如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。如果要连接多个字符串,应该少使用+=,如s+=a;s+=b;s+=c;应该写成s+=a + b + c; 而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下

    var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

    30、那些操作会造成内存泄漏?

    http://www.jb51.net/article/37685.htm

    31jQuery.fninit方法返回的this指的是什么对象?为什么要返回this

    this指向的是jQuery.fn的实例对象

    32jquery中如何将数组转化为json字符串,然后再转化回来?

    $.parseJSON

    $.fn.stringify = function() {

       return JSON.stringify(this);

    }

    使用$(array).stringify();

    33jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

    Query中的$.extend浅拷贝,拷贝对象A时,对象B将拷贝A的所有字段,如果字段是内存地址,B将拷贝地址,若果字段是基元类型,B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。

       jQuery中的$.extend深拷贝,这种方式会完全拷贝所有数据,优点是BA不会相互依赖(A,B完全脱离关联), 缺点是拷贝的速度更慢,代价更大。

    $.extend(true,a,b)用法

    34jquery.extend jquery.fn.extend的区别?

    jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

    jQuery.fn.extend(object);jQuery对象添加方法。

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

    通过函数queue()dequeue()以及clearQueue()实现队列的操作

    主要使用场景:对于一系列需要按次序运行的函数特别有用。特别animate动画,ajax,以及timeout等需要一定时间的函数

    36、谈一下Jquery中的bind(),live(),delegate(),on()的区别?

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

    live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

    delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    差别

    .bind()是直接绑定在元素上

    .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

    .delegate()则是更精确的小范围使用事件代理,性能优于.live()

    .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

    37jQuery 是通过哪个方法和 Sizzle 选择器结合的?

    Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目,可以用于其他框架:Mool, DojoYUI等。

    jQuery.fn.find()进入Sizzle

    38、针对 jQuery性能的优化方法?

    http://www.frontopen.com/1077.html

    *基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。

    *频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。

     比如:var str=$("a").attr("href");

    *for (var i = size; i < arr.length; i++) {}

     for 循环每一次循环都查找了数组 (arr) .length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:

     for (var i = size, length = arr.length; i < length; i++) {}

  • 相关阅读:
    职场篇:聚焦与复盘
    职场篇:直面情绪杀手【已补更】
    .NetCore实践篇:成功解决分布式监控ZipKin聚合依赖问题(三)
    职场篇:为何我们需要思想大洗礼?
    职场篇:从温水煮青蛙说起
    .NetCore实践篇:分布式监控系统zipkin踩坑之路(二)
    postman application/json;
    yapi 个人空间 这个分组的问题
    yapi 的分组的理解!
    yapi的安装
  • 原文地址:https://www.cnblogs.com/iconz/p/7864772.html
Copyright © 2011-2022 走看看