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 .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更高效，因为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.

时间： 2024-08-25 07:07:36

jQuery常见面试题（转）的相关文章

jquery常见面试题

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

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: 它们实质调

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