1. Have you seen the source code of JQuery? Can you give a brief overview of how it works?

The window object can be used as a local variable by passing in the window object parameter. The advantage is that when accessing the Window object in jquery, there is no need to revert the scope chain back to the top level scope. This allows faster access to the Window object. Similarly, passing undefined shortens the chain of scopes when looking for undefined. 

(function(window, undefined) {// Use a sandbox in which variables defined by var are local variables in the function field. JQuery = window.$= jQuery; $= window.jQuery = window.$= jQuery; })( window );Copy the code
Jquery encapsulates some prototype properties and methods in jquery.prototype, and assigns them to jquery.fn to shorten the name.

There are some array or object methods that are often used, and jQuery saves them as local variables to speed up access.

The chain calls implemented by jquery save code and return the same object, which increases code efficiency.

The strength of jquery is chain manipulation, implicit iteration

2. What object does this refer to in the init method of jquery.fn? Why return this?

The returned this refers to the jquery object after the current operation, in order to implement the jquery chain operation

3. How to convert an array to a JSON string in jquery and back again?

Use the jquery global method $.parsejson

4, what is the implementation principle of jQuery attribute copy (extend), how to achieve deep copy?

$. Extend in jQuery, when copying object A, object B copies all fields of A. If the field is A memory address, object B copies the address. If the field is primitive, object B copies its value. The disadvantage is that if you change the memory address that object B points to, you also change the field that object A points to at that address.
$.extend(a,b)
$.extend in jQuery, this method will copy all data completely, the advantage is that B and A do not depend on each other (A,B completely separated from each other), the disadvantage is that the copy speed is slower, more expensive.
$.extend(true,a,b)

5, the difference between jquery.extend and jquery.fn.extend?

JQuery. The extend (object); It adds a class method to a jQuery class, which can be interpreted as adding static methods. Such as: 

 jQuery.extend({   min: function(a, b) { return a < b ? a : b; },   max: function(a, b) { returna > b ? a : b; }); JQuery. Min (2, 3); / / 2 jQuery. Max (4, 5); / / 5Copy the code
Jquery.extend (target, object1, [objectN]) extends an object with one or more other objects, returning the extended object. 

 var settings = { validate: false.limit: 5, name: "foo" };  var options = { validate: true, name: "bar" };  jQuery.extend(settings, options); Copy the code
Settings == {validate: true, limit: 5, name: “bar”}

jQuery.fn.extend(object);

What is $.fn?

$. Fn refers to the jQuery namespace, and the members of fn (function and property) are valid for each jQuery instance.

If you look at the jQuery code, it’s not hard to see.

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//….

};

Jquery.fn = jquery.prototype

Therefore, it is an extension of jquery.prototype to add “member functions” to jQuery classes. Instances of jQuery classes can use this “member function”.

jQuery.fn.extend(object); Extend jQuery object methods

Jquery.extend extends jQuery global methods

6. How is jQuery queue implemented? Where can queues be used?

Queue(), dequeue(), clearQueue(), etc. After animate (), all functions are executed in sequence. After animate (), all functions are executed in sequence. Ajax and other events to be executed in chronological order. 
  var _slideFun = [  function() {$('.one').delay(500).animate({     top: '+=270px'    },500, _takeOne);  },  function() {$('.two').delay(300).animate({     top: '+=270px'},500, _takeOne); }]; $('#demo').queue('slideList', _slideFun); var _takeOne = function() {$('#demo').dequeue('slideList'); }; _takeOne();Copy the code

Bind (),live(),delegate(), and on() in Jquery

Jquery’s bind(),live(),delegate() are all implemented based on ON,
On is an event handler that encapsulates a compatible event binding method that binds one or more events to selected elements
Bind (type,[data],fn) binds event handlers to specific events for each matched element
Live (type,[data],fn) appends an event handler to all matched elements, even if the element was added later
Delegate (Selector,[type],[data],fn) specifies an element (a child of the selected element) that adds one or more event handlers and specifies the functions to run when those events occur
The difference:
.bind() binds directly to the element
.live() is bubbled to the element. More suitable for list types, bind to document DOM nodes. And.bind() have the advantage of supporting dynamic data.
.delegate() is a more precise way to use event proxies on a smaller scale, and performs better than.live()
.on() is a new event binding mechanism that incorporates the previous three approaches in the latest 1.9 release

8. JQuery can bind multiple events to an object at the same time. How is this implemented?

Jquery event binding functions pass multiple event parameters and determine the type of event to execute

9. Optimization method for jQuery performance?

* The performance of class-based selectivity is expensive compared to Id selectors because you need to traverse all DOM elements.

* Frequently manipulated DOM is cached before manipulation. It is better to use Jquery’s chain call. 

Var STR =$();"a").attr("href");  *for (var i = size; i < arr.length; i++) {}Copy the code
The for loop looks for the.length property of the array (arR) on each loop. Setting a variable to store this number at the beginning of the loop can make the loop run faster: 

  for (var i = size, length = arr.length; i < length; i++) {}Copy the code

What is the difference between Jquery and Jquery UI?

(1) jQuery is a JS library, mainly provides functions such as selector, attribute modification and event binding, etc.
(2) jQuery UI is a plug-in designed on the basis of jQuery and using the expansibility of jQuery. Provides some common interface elements, such as dialog boxes, drag behavior, resizing behavior, and so on.
(3) jQuery itself focuses on the background, there is no beautiful interface, and jQuery UI supplements the former deficiency, he provides a gorgeous display interface, so that people are more easy to accept. Both powerful backstage, and gorgeous front. JQuery UI is a jQuery plug-in, only a uI-oriented plug-in that is officially maintained by jQuery.