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,readonlydisabled等属性时,用prop方法显然更好

prop

时间: 2024-10-18 21:20:49

jQuery 常见面试题的相关文章

jquery常见面试题

来源:http://www.php1.cn/article/54495.html   来自棱镜学院-在线IT教育      www.prismcollege.com 摘要:本文会给你们展示50多个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.如果你发现你任何可以做得更好的地方的话,欢迎... 本文会给你们展示50个jquery代码片段,这些代

jQuery常见面试题(转)

代码以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 .de

JAVA常见面试题及解答-java开发

JAVA常见面试题及解答 Java的垃圾回收总结  浅谈Java中的内部类 1)transient和volatile是java关键字吗? 如果用transient声明一个实例变量,当对象存储时,它的值不需要维持.例如: class T { transient int a;  //不需要维持 int b;  //需要维持 } 这里,如果T类的一个对象写入一个持久的存储区域,a的内容不被保存,但b的将被保存. volatile修饰符告诉编译器被volatile修饰的变量可以被程序的其他部分改变.在多

java主线程等待所有子线程执行完毕在执行(常见面试题)

java主线程等待所有子线程执行完毕在执行(常见面试题) java主线程等待所有子线程执行完毕在执行,这个需求其实我们在工作中经常会用到,比如用户下单一个产品,后台会做一系列的处理,为了提高效率,每个处理都可以用一个线程来执行,所有处理完成了之后才会返回给用户下单成功,下面就说一下我能想到的方法,欢迎大家批评指正: 用sleep方法,让主线程睡眠一段时间,当然这个睡眠时间是主观的时间,是我们自己定的,这个方法不推荐,但是在这里还是写一下,毕竟是解决方法 2.使用Thread的join()等待所有

linux系统运维企业常见面试题集合(三)

linux系统运维企业常见面试题集合(三) 01  写一个sed命令,修改/tmp/input.txt文件的内容,要求:(1) 删除所有空行:(2) 一行中,如果包含"11111",则在"11111"前面插入"AAA",在"11111"后面插入"BBB",比如:将内容为0000111112222的一行改为:0000AAA11111BBB2222 [[email protected]~]# cat -n /t

asp.net常见面试题(一)

1.索引器 1 class Player 2 { 3 private int[] arr = new int[100]; 4 public int this[int index] 5 { 6 get { 7 if (index < 10 || index >= 10) 8 { 9 return 0; 10 } 11 else 12 { 13 return arr[index]; 14 } 15 } 16 set { 17 if (!(index < 0 || index >= 10

一些html5和css3的一些常见面试题

最近总结了一些有关于html5和css3的一些常见面试题,希望对正在找工作的你有所帮助. 还有欢迎大家补充~~~ 一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(transform) 3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9de

iOS 多线程 自动释放池常见面试题代码

同步:代码依次执行,一个人执行多个任务,也是依次执行.一个人在同一时间只执行一个任务 异步:可以同时执行多个任务 进程:指在系统中运行的应用程序,每个进程都是独立的,都有独立的且安全的运行空间 线程:一个进程可以有多个线程,但只有一个主线程.进程的任务都是在线程里面完成的. 进程,线程与多线程之间的关系? 进程=公司     线程 = 员工    多线程 = 老板 多线程可以解决程序阻塞问题,也可以提高程序的执行效率 自动释放池常见面试题代码 p.p1 { margin: 0.0px 0.0px

JDBC常见面试题集锦

什么是JDBC,在什么时候会用到它? JDBC的全称是Java DataBase Connection,也就是Java数据库连接,我们可以用它来操作关系型数据库.JDBC接口及相关类在java.sql包和javax.sql包里.我们可以用它来连接数据库,执行SQL查询,存储过程,并处理返回的结果. JDBC接口让Java程序和JDBC驱动实现了松耦合,使得切换不同的数据库变得更加简单. 有哪些不同类型的JDBC驱动? 有四类JDBC驱动.和数据库进行交互的Java程序分成两个部分,一部分是JDB