• jQuery 常见面试题


    一 :Q: What is the difference between .get()[], and .eq()?

    A: eq返回原生jQuery对象,截取某些el元素生成Jquery新对象

     get和[]返回的都是原生的Dom对象,原理一致

     get和[]区别是get是通过jQuery对象的方法获取,[]是根据jQuery是一个数组对象获取

    二: What is the difference between .bind().live(), and .delegate()?

    A: 它们实质调用的都是jQuery实例对象的on函数,更底层是jQuery.event.add();

    官方描述:Attach an event handler function for one or more events to the selected elements

    .on( events [, selector ] [, data ], handler(eventObject) )

    三种绑定函数代码

     bind: this.on(types, null, data, fn); 直接绑定到元素上

    live: jQuery(this.context).on(types, this.selector, data, fn); 将事件绑定到context上,冒泡,当触发元素为this.selector时触发

    delegate: this.on(types. selector, data, fn)

    selector如何添加

    三: How, and why, would you namespace a bound event handler?

    A: click.myPlugin.simple定义了两个命名空间 为这个独特的click事件 可以被移除通过 .off('click.myPlugin') or .off('click.simple')

    命名空间跟css 相似都不是分层的,只需要一个名字来匹配

    jquery.event jquery.event.global jquery.event.handle

    四:What is the difference between $ and $.fn? Or just what is $.fn.

    1
    2
    3
    window.jQuery = window.$ = jQuery;
     
    jQuery.fn = jQuery.prototype = {}

    五:what's jQuery's context/selector and why use it 

    1
    2
    3
    <div id="context">
        <div id="inner"></div>
    </div>

      

    context/selector 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    var $ret = $('#inner', $('#context')[0]);
    console.log($ret.selector); // #inner
    console.log($ret.context); // #context
      
    var $ret = $('#inner', '#context');
    console.log( $ret.selector); // '#context #inner'
    console.log( $ret.context); // document
    </script>

    context 就是限定查找的范围

    context 必须是一个DOM元素,context 底层还是用了.find方法来实现

    官方API selector context is implemented with the .find() method,so $("span", this) is equivalent to $(this).find("span")

    注:例子仅供展示,id类型查找非常快,所以不要用这种context,直接$('#inner')最好,当查找tag/class时用会比较高效.

     六:Difference between 'delegate()' and 'live()'

    delegate 指定了委托对象

    live委托给了jQuery的context,1.9以后删除了,用on代替

    一下三个效果一致

    1
    2
    3
    $(selector).live(events, data, handler);
    $(document).delegate(selector, events. data, handler);
    $(document).on(events, selector, data, handler);

    七:What is the effetcs (of fx) queue?

    .queue([queueName])

    官方API:Show the queue of functions to be executed on the matched elements.

    Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. 最大的特点是这些代码异步执行,不影响后面代码操作,说白了就是将他们放入一个队列中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    div { margin:3px; 40px; height:40px;
            position:absolute; left:0px; top:60px;
            background:green; display:none;
     }
      
    div.newcolor { background:blue; }
    p { color:red; }  
      
    <p>The queue length is: <span></span></p>
    <div id="box">1</div>
    <div style="top:120px;">2</div>
    <button id="start">start</button>
    <button id="end">end</button>

      

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <script>
    var $box = $('div');
      
    function runIt() {
        $box.show()
            .animate({'left':"+=200"}, 2000)
            .queue(function(next){
                $(this).addClass('newcolor');
                next();
            })
            .slideToggle(1000)
            .slideToggle('fast')
            .animate({'left':"-=200"}, 2000)
            .queue(function(next){
                $(this).removeClass('newcolor');
                next();
            })  
            .hide('slow')
            .show(200)
            .slideUp("normal");
    }
      
    function showIt(){
        var n = $box.queue();
        $("span").text(n.length);
        setTimeout(showIt, 100);
    }
      
    function stopIt(){
        $box.queue('fx', []);
        $box.stop();
    }
      
    $('#start').click(function(){
        runIt();
    });
    $('#end').click(function(){
        stopIt();
    })
    showIt();
      
      
    </script>

    八:attr和prop的区别  

    attr是操作属性节点,DOM的API setAttribute,getAttribute(HTML)

    prop是操作获取到的对应js对象的属性 (JS)

    场景:遇到要获取或设置checked,selected,readonlydisabled等属性时,用prop方法显然更好

    prop

  • 相关阅读:
    「训练反思18」 (8.16) 认清自己
    「训练日志17」 (8.12) 崩盘
    「训练日志16」 8.11 下坠
    「训练日志15」 (8.10)
    「训练反思15」(8.10)
    「训练日志14 」(8.9) 失败
    训练日志13 (8.7)
    Linux 设置vim指令
    训练日志12 (8.5)
    训练反思12 (8.5)
  • 原文地址:https://www.cnblogs.com/zhouxiansheng/p/3981434.html
Copyright © 2020-2023  润新知