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; 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,readonly和disabled等属性时,用prop方法显然更好
prop
jQuery 常见面试题的更多相关文章
- jQuery常见面试题(转)
代码以jQuery 1.83 为例 一 :Q: What is the difference between .get(), [], and .eq()? A: eq返回原生jQuery对象,截取某些 ...
- 【javascript常见面试题】常见前端面试题及答案
转自:http://www.cnblogs.com/syfwhu/p/4434132.html 前言 本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性.上 ...
- Vue常见面试题汇总
Vue框架常见面试题 1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么 ...
- java常见面试题及答案 1-10(基础篇)
java常见面试题及答案 1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java 虚拟机是一个可以执行 Java 字节码的虚拟机进程.Java 源文件被 ...
- Web开发的常见面试题HTML和HTML5等
作为一名前端开发人员,HTML,HTML5以及网站优化都是必须掌握的技术,下面列举一下HTML, HTML5, 网站优化等常见的面试题: HTML常见面试题: 1. 什么是Semantic HTML( ...
- 常见面试题之ListView的复用及如何优化
经常有人问我,作为刚毕业的要去面试,关于安卓开发的问题,技术面试官会经常问哪些问题呢?我想来想去不能一股脑的全写出来,我准备把这些问题单独拿出来写,并详细的分析一下,这样对于初学者是最有帮助的.这次的 ...
- iOS常见面试题汇总
iOS常见面试题汇总 1. 什么是 ARC? (ARC 是为了解决什么问题而诞生的?) ARC 是 Automatic Reference Counting 的缩写, 即自动引用计数. 这是苹果在 i ...
- JDBC常见面试题
以下我是归纳的JDBC知识点图: 图上的知识点都可以在我其他的文章内找到相应内容. JDBC常见面试题 JDBC操作数据库的步骤 ? JDBC操作数据库的步骤 ? 注册数据库驱动. 建立数据库连接. ...
- Mybatis常见面试题
Mybatis常见面试题 #{}和${}的区别是什么? #{}和${}的区别是什么? 在Mybatis中,有两种占位符 #{}解析传递进来的参数数据 ${}对传递进来的参数原样拼接在SQL中 #{}是 ...
随机推荐
- Codeforces Round #253 (Div. 1) A Borya and Hanabi
A. Borya and Hanabi time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- WPF 创建二维码
1.在http://zxingnet.codeplex.com/网站上下载ZXing .Net的第三方库 2.新建一个WPFproject 3.引入zxing.dll 4.加入引用空间 using Z ...
- web.xml中的ServletContextListener
要想了解ServletContextListener,先看看web.xml中的<listener>配置. 一)web.xml中的内容载入顺序: 首先能够肯定的是,载入顺序与它们在 web. ...
- 启动两个Tomcat的方法
由于项目需要,所以要启动两个工程,但是又不能用一个Tomcat,于是就琢磨起了怎么启动两个Tomcat 1:首先,conf/server.xml要把HTTP的端口改成不一致的,我一个是8088,一个 ...
- 邮件:事务失败。 服务器响应为:DT:SPM 163 smtp
几年前我做的一个项目,日发邮件最高峰时几十万.自以为对邮件发送方面已经有了一定认识,所以近期机缘巧合之下,又有项目需要发送邮件,不禁自信满满,暗自庆幸能不手到擒来乎? 不想老革命遇到新问题.我原先的邮 ...
- 【bzoj4401】块的计数
首先,块的大小确定的话,可以发现方案最多只有1种 然后就可以O(nsqrt(n))搞,不过会TLE 接着我们又发现,一个节点可以作一个块的根,当且仅当该节点的size能被块的大小整除 然后就可以O(n ...
- Bootstrap + Font Awesome
将Font Awesome 集成到 Bootstrap 非常容易,还可以被单独使用. 最简单的 Bootstrap + Font Awesome 集成方式 使用这种方式将 Font Awesome 集 ...
- Android ConstraintLayout的基本使用
升级Android studio到2.3版本之后,发现新建Activity或fragment时,xml布局默认布局由RelativeLayout更改为ConstraintLayout了,既然已经推荐使 ...
- 《Visual C++ 2010入门教程》系列六:VC2010常见调试技术
<Visual C++ 2010入门教程>系列六:VC2010常见调试技术 犹豫了好久,最终还是决定开始这一章,因为我不清楚到底有没有必要写这样的一章,是应该在这里说明一些简单的调试方 ...
- spark安装和登陆配置
1.下载安装包: http://www.igniterealtime.org/downloads/index.jsp 2.点击安装后打开登陆界面: 2.点击“高级”,设置相关配置: 3.点击“登陆”后 ...