Common face questions of JQuery

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

A:eq returns the native jquery object, intercepting some El elements to generate a new jquery object

Get and [] return all native DOM objects, consistent in principle

Get and [] difference is get is obtained by means of jquery object method, [] is based on jquery is an array object gets

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

A: All of them actually invoke the on function of the jquery instance object, and the lower level is jQuery.event.add ();

Official description: Attach an event handler function for one or more events to the selected elements

. On (events [, selector] [, data], handler (EventObject))

Three types of binding function codes

Bind:this.on (types, NULL, data, FN); Bind directly to an element

Live:jquery (This.context). On (types, this.selector, data, FN); Binds an event to the context, bubbling, triggering when the triggering element is This.selector

Delegate:this.on (types. Selector, data, FN)

Selector How to add three: how, and what, would you namespace a bound event handler?

A:click.myplugin.simple defines two namespaces for this unique click event can be removed through. Off (' Click.myplugin ') or. Off (' Click.simple ')

Namespaces are not layered like CSS, just need a name to match

Jquery.event Jquery.event.global Jquery.event.handle

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

123	window.jQuery = window.$ = jQuery; jQuery.fn = jQuery.prototype = {}

V: What ' s JQuery's context/selector and why use it?

123	<div id="context">     <div id="inner"></div> </div>

　　

Context/selector Example

?

123456789

<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 is the scope of limited search

The context must be a DOM element, and a method is used .find to implement the context underlying

Official API Selector context is implemented with the .find() Method,so are $("span", this) equivalent to$(this).find("span")

Note: Examples are only for display, ID type lookup is very fast, so do not use this context, the direct $(‘#inner‘) best, when looking for tag/class will be more efficient.

VI: Difference between ' delegate () ' and ' Live () '

delegateThe delegate object is specified

liveEntrusted to the context,1.9 of jquery was removed later, in on lieu of

A little bit of the three effects are consistent

?

123	$(selector).live(events, data, handler); $(document).delegate(selector, events. data, handler); $(document).on(events, selector, data, handler);

VII: What is the Effetcs (of FX) queue?

.queue([queueName])

The official api:show the queue of functions to being executed on the matched elements.

Queues allow a sequence of the actions to being called on the element asynchronously, without halting program execution. The biggest feature is that the code executes asynchronously, without affecting the code behind it, and it's plain to put them in a queue

?

12345678910111213

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>

　　

?

12345678910111213141516171819202122232425262728293031323334353637383940414243

<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>

Eight: The difference between attr and prop

attr is an action attribute node, Dom's API Setattribute,getattribute (HTML)

Prop is the attribute (JS) of the corresponding JS object to which the operation is obtained.

Scenario : It's obviously better to use the Prop method when encountering properties to get or set checked,selected,readonly and disabled

Prop

Common face questions of JQuery