Common face questions of jquery

Code with jquery 1.83 as an example

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); // #innerconsole.log($ret.context); // #contextvar$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‘);functionrunIt() {    $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");}functionshowIt(){    varn = $box.queue();    $("span").text(n.length);    setTimeout(showIt, 100);}functionstopIt(){    $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 is more efficient because attr wants DOM access

Additional:

Generally, DOM attributes represent the state of the DOM information as retrieved from the document, such as the value Attribu Te 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 types the are but the def .prop("value") abcdef .attr("value") remains abc .

jquery common face question (turn)