代码以jQuery 1.83 为例

一 :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; width: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更高效,因为attr要DOM访问

附加:

Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type="text" value="abc">. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and typesdef the .prop("value") is abcdef but the .attr("value") remains abc.

jQuery常见面试题(转)的更多相关文章

  1. jQuery 常见面试题

    一 :Q: What is the difference between .get(), [], and .eq()? A: eq返回原生jQuery对象,截取某些el元素生成Jquery新对象 ge ...

  2. 【javascript常见面试题】常见前端面试题及答案

    转自:http://www.cnblogs.com/syfwhu/p/4434132.html 前言 本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性.上 ...

  3. Vue常见面试题汇总

    Vue框架常见面试题   1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么 ...

  4. java常见面试题及答案 1-10(基础篇)

    java常见面试题及答案 1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java 虚拟机是一个可以执行 Java 字节码的虚拟机进程.Java 源文件被 ...

  5. Web开发的常见面试题HTML和HTML5等

    作为一名前端开发人员,HTML,HTML5以及网站优化都是必须掌握的技术,下面列举一下HTML, HTML5, 网站优化等常见的面试题: HTML常见面试题: 1. 什么是Semantic HTML( ...

  6. 常见面试题之ListView的复用及如何优化

    经常有人问我,作为刚毕业的要去面试,关于安卓开发的问题,技术面试官会经常问哪些问题呢?我想来想去不能一股脑的全写出来,我准备把这些问题单独拿出来写,并详细的分析一下,这样对于初学者是最有帮助的.这次的 ...

  7. iOS常见面试题汇总

    iOS常见面试题汇总 1. 什么是 ARC? (ARC 是为了解决什么问题而诞生的?) ARC 是 Automatic Reference Counting 的缩写, 即自动引用计数. 这是苹果在 i ...

  8. JDBC常见面试题

    以下我是归纳的JDBC知识点图: 图上的知识点都可以在我其他的文章内找到相应内容. JDBC常见面试题 JDBC操作数据库的步骤 ? JDBC操作数据库的步骤 ? 注册数据库驱动. 建立数据库连接. ...

  9. Mybatis常见面试题

    Mybatis常见面试题 #{}和${}的区别是什么? #{}和${}的区别是什么? 在Mybatis中,有两种占位符 #{}解析传递进来的参数数据 ${}对传递进来的参数原样拼接在SQL中 #{}是 ...

随机推荐

  1. Android -- 经验分享

    目录                                                                                             代码中安装 ...

  2. 详谈socket请求Web服务器过程

    最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...

  3. python 关键字参数

    原文地址:http://docs.pythontab.com/python/python3.4/controlflow.html#tut-functions 函数可以通过 关键字参数 的形式来调用,形 ...

  4. appium for windows 环境搭建

    服务环境: 1 安装Nodejs 下载nodejs安装包(http://nodejs.org/download/)安装 测试安装是否成功:运行cmd,输入node -v 2 安装android的SKD ...

  5. bzoj 2038 莫队算法

    莫队算法,具体的可以看10年莫涛的论文. 大题思路就是假设对于区间l,r我们有了一个答案,那么对于区间l,r+1,我们 可以暴力的转移一个答案,那么对于区间l1,r1和区间l2,r2,需要暴力处理 的 ...

  6. 【BZOJ】【1004】【HNOI2008】Cards

    Burnside/Polya+背包DP 这道题目是等价类计数裸题吧……>_> 题解:http://m.blog.csdn.net/blog/njlcazl_11109/8316340 啊其 ...

  7. JSP Workshop

    http://www.cnblogs.com/ITtangtang/p/4126395.html 发现http://www.tutorialspoint.com/里的资料很全也很不错啊! 资料:htt ...

  8. 浅谈c#枚举

    结构中的成员可以赋值,枚举呢....是取值,只读的 以下情况可以考虑将类创建为结构:(1)如果一个类其中的字段非常少,所有字段占用的内存总量不超过8.16字节:(2)如果一个类中的字段都是值类型: 关 ...

  9. jquery中如何退出each循环

    在for循环中我们用continue退出当前循环,进入下一循环.用break跳出所有循环. 可是在jQuery中却并没有这两条命令,那么如何退出each循环呢? 经过查询得知: 在jQuery中用 r ...

  10. hadoop-ha QJM 架构部署

    公司之前老的hadoop集群namenode有单点风险,最近学习此链接http://www.binospace.com/index.php /hdfs-ha-quorum-journal-manage ...