Array features of jquery objects

2. 2.3Array features of jquery objects
4. From the above section, we can see that jquery builds a function to complete the search, conversion, or other functions. The result is to find the elements, search, and search, which is just a way. You have to find a place to store the elements. This section is for analysis.
6. The best place (SET) for storing ordered data in JS is array. So how can we implement arrays in jquery? You can use the following method:
8. Jquery. FN. Prototype =NewArray ();
10. In the previous sectionThisAdd to the. setarray (ARR) Function
12. Array. Apply (This, Arr );
14. If it is more perfect, add:
16. Jquery. FN. Prototype. constructor = jquery.
18. In this way, we inherit all the features of the array and can extend the Array Function in the jquery object. However, jquery does not use the inherited array to implement this internal set. It uses the implementation of array-like objects (see javascript: the definitive guide, 5th edition7.8).
20. The object of the class array is still an object, just like an array. There is no big difference between arrays and objects. Ordered and unordered sets are different from each other. This difference is reflected in the Length attribute of the array. When an element is added, the relative number is automatically added. When an element is deleted, the relative number is automatically subtracted.
22. Let's take a look at how jquery is implemented:
24. // In the first case, handle $ (domelement) indicates a single Dom element, ignoring the context
26. If(Selector. nodetype) {②
28. This[0] = Selector;
30. This. Length =1;
32. Return This;
34. }
36. This is its first implementation method.This[0To directly set the DOM element at the first position, and set length =1. Here we can see that the object and the array both use the key/value pair form to exist in the object. The preceding JSON format is {0: Adom, length =1}. Here we will analyze the array in detail. The array inherits from the object. The final result of its [] interpretation analysis can be considered as an object in the {} structure. Index (such0.1,....) As the key of the object property. Use the values in the array as their corresponding values. Change the length value at the same time. That is why objects are essentially no different from arrays. In many source codes, for example, Yui uses objects to construct multidimensional arrays.
38. This. Setarray (jquery. makearray (selector ));
40. Is its second implementation method. The above implementation is a single element, a set of multiple elements of this implementation. It first calls the jquery. makearray (selector) Static Method to convert the Set (class array) into an array.
42. The above analysis shows that both arrays and objects can use obj. [ATTR] to obtain the value corresponding to their key. For a set or an array of classes, the Length attribute must be implemented. With the Length attribute0~ Length-1You can get the corresponding value in the key attribute:
44. // Convert the set of class arrays into an array. If it is a single element, an array of a single element is generated.
46. Makearray: function (array ){
48. VaR ret = [];
50. If(Array! =Null) {Var I = array. length;
52. // A single element, but the window, string, and function have the 'length' attribute. Add other judgments.
54. If(I =Null| Array. Split | array. setinterval | array. Call)
56. RET [0] = Array;
58. Else// A set of class Arrays
60. While(I) RET [-- I] = array [I];// Clone the Array
62. }
64. ReturnRET;
66. },
68. A standard array is generated. What will setarray do next?
70. // Push all elements of the array-like object to the current jquery object.
72. Setarray: function (elems ){
74. This. Length =0;// Initialize the length, because the push will be in the original length ++
76. Array. Prototype. Push. Apply (This, Elems );
78. Return This;
80. },
82. This call calls array. Prototype. Push to automatically modify the Length attribute value (of course, an element is added ). As a result, many methods (such as shift) in the array can be seen as changing the value of length to the key/value pair of the object to complete unordered or re-ordered work. In fact, array and so on are implemented using C or C ++. However, the JS features it constructs allow us to think about how Javascript is implemented.
84. The above setarray (elems) function only changes the set of the current jquery object and clears the previous elements in this object set. However, sometimes we want to save the elements in the original collection and perform jquery object operations on the new elements. It provides the pushstack function to create a new jquery object and save the reference of the original object. In this way, you may use the objects you want as needed:
86. Pushstack: function (elems ){// Use jquery to construct a new object and reference the old object.
88. VaR ret = jquery (elems );// Construct a new jquery object
90. Ret. prevobject =This;// Save the reference of the old object
92. ReturnRET;
94. },
96. The returned result is a newly built object with all the functions of the jquery object. You can also use prevobject to access the original old object.
100. If a class array is built, you must provide some methods to operate on this set. operations on the set are nothing more than locating elements, searching elements, copying (slice), and deleting operations (SPLICE. Jquery also provides each and map extensions.
102. These methods are only related to the set and are irrelevant to the set elements. Jquery provides many methods related to the element (DOM element.
106. It provides two get element methods, get (INDEX) and eq (INDEX). The difference is that get is an element in the Set, while EQ is the clone of the returned element. The array is not modified. In fact, you can use [I] instead of get (I ). If get does not have a parameter, all elements are obtained.
108. // Obtain the several DOM elements of the jquery object. No parameter exists, indicating all DOM elements.
110. Get: function (Num ){
112. ReturnNum = undefined? Jquery. makearray (This):This[Num];
114. },
116. // Obtain the nth element. The position of this element is counted from 0.
118. EQ: function (I ){
120. Return This. Slice (I, + I +1);
122. },
124. These two functions do not need to be analyzed. Next, let's take a look at how to locate elements in the collection:
126. /Locate the location of elem in the jquery object (INDEX)
128. Index: function (ELEM ){
130. VaR ret =-1;
132. ReturnJquery. inarray (// If the jquery object is used, the first element is used.
134. ELEM & ELEM. jquery? ELEM [0]: ELEM,This);
136. },
140. // Determine the location (INDEX) Static Method of the ELEM element in the array
142. Inarray: function (ELEM, array ){
144. For(VAR I =0, Length = array. length; I <length; I ++)
146. // Use === because on IE, window = Document
148. If(Array [I] === ELEM)
150. ReturnI;
152. Return-1;
154. },
156. Inarray is the static method of jquery, while index is the function of positioning by calling inarray. The index function supports jquery objects or DOM elements, while inarray is a practical method that supports any element.
160. Jquery provides methods such as the Server Load balancer replication function in the array, and a static merge method similar to Concat. Slice is implemented through slice in array:
162. /Proxy array slice, the same operation.
164. Slice: function (){
166. Return This. Pushstack (array. Prototype. Slice. Apply (This, Arguments ));
168. },
170. It returns a new jquery object. The set of this object is the set to be copied. For merge, It is a static method that adds the second element to the array of the first parameter.
172. // Append the second element to the first array.
174. Merge: function (first, second ){
176. // We have to loop this way because IE & opera overwrite the length
178. // Expando of getelementsbytagname
180. VaR I =0, ELEM, Pos = first. length;
182. // Also, we need to make sure that the correct elements are being
184. // Returned (ie returns comment nodes in a '*' query)
186. If(Jquery. browser. MSIE ){
188. While(ELEM = Second [I ++])
190. If(ELEM. nodetype! =8)
192. First [POS ++] = ELEM;
196. }Else
198. While(ELEM = Second [I ++])
200. First [POS ++] = ELEM;
204. ReturnFirst;
206. },
208. Jquery's each performs a callback function for each element in the set.
210. // The callback (index, ELEM) function is executed for each element of the current jquery object.
212. Each: function (callback, argS ){// Return this
214. // It calls the jquery static method. Mothodize in prototype is a good solution to this type of problem.
216. ReturnJquery. Each (This, Callback, argS );
218. },
220. It calls the jquery. Each static method to complete the function:
222. // Execute the callback function for each object. ARGs is only used internally
224. Each: function (object, callback, argS ){
226. VaR name, I =0, Length = object. length;
228. // It is similar to else processing. The args parameter passing replaces the object attribute value.
230. If(ARGs ){
232. If(Length = undefined ){
234. For(Name in object)
236. If(Callback. Apply (object [name], argS) =False)
238. Break;
240. }Else
242. For(; I <length ;)
244. If(Callback. Apply (object [I ++], argS) ====False)
246. Break;
248. }Else{
250. // Not an array-like object. Call the callback function for each attribute.
252. If(Length = undefined ){
254. For(Name in object)
256. If(Callback. Call (object [name], name, object [name]) =False)
258. Break;
260. }Else
262. // Array-like object, which is processed as an array
264. For(VaR value = object [0]; I <length & callback. Call (value, I, value )! =False; Value = object [++ I]) {}
266. }
268. ReturnObject;
270. },
272. This static method supports the class array (array) or object of the first parameter. Is an array to call back each element. If it is an object, the callback operation is performed on each attribute value. The format of this callback function is as follows: callback: function (index, value ). Index is the index number, and value is the index processing attribute of the element or object corresponding to the index of the array. If the ARGs parameter is used, the callback function format is as follows: callback: function (ARGs ). ARGs sets parameters for the callback function. Let's take a look at the each of the jquery object. Its second parameter, argS, uses the input ARGs to directly set parameters for callback, instead of raising the index and corresponding elements in the set by default, but the number of executions is still the length of the set.
276. Jquery map converts a group of elements into other arrays (composed of callback function return values)// Convert a group of elements into other arrays and then construct a new jquery object based on the array ..
278. Map: function (callback ){
280. Return This. Pushstack (jquery. Map (This, Function (ELEM, I ){
282. ReturnCallback. Call (ELEM, I, ELEM );
284. }));
286. },
288. This function first uses jquery. Map (This, Function (ELEM, I) {}ThisEach element of the jquery object set is uploaded to the callback function as the ELEM parameter of the callback function. The callback function executes the callback function in the MAP: function (callback) of the instance method, that is, the callback in jquery. MAP is only the function of passing the parameter proxy. Jquery. Map gets the converted element set through the callback of the proxy.
290. The next step is to use pushstack to construct the elements in this set into a new jquery object and return it, and save the reference of the original jquery object.
292. Let's take a look at the static method of MAP:
294. // Return the set of return values of the callback function that operates on each element of elems.
296. Map: function (elems, callback ){
298. VaR ret = [];
300. For(VAR I =0, Length = elems. length; I <length; I ++ ){
302. VaR value = callback (elems [I], I );
304. If(Value! =Null)// Indicates that the number of converted sets may be less than that of the original set.
306. RET [ret. Length] = value;
308. }
310. ReturnRet. Concat. Apply ([], RET );// Implemented using array Concat
312. }
314. the static method of map returns an array composed of elements returned by each callback.