Operation of jquery Array

In this article, we will use jquery for data parsing.

Let's take an example of the JSON data for the comments object in the previous example, and then summarize the methods of parsing JSON data in jquery.

The JSON data obtained in the example above is a nested JSON:

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Johnny"}]}

To get the JSON data, there is a simple method $.getjson () in jquery that can be implemented.

The following is a description of the official API for $.getjson ():

Jquery.getjson (URL, [data,] [Success (data, Textstatus, JQXHR)])

URL: A string containing the URL to which the request is sent.

Data: A map or A string that's sent to the server with the request.

success: (Data, Textstatus, JQXHR) A callback function is executed if the request succeeds.

The callback function accepts three parameters, the first one is the returned data, the second is the state, the third is the XMLHttpRequest of jquery, we only use the first parameter.

$.each () is the method used to parse JSON data in a callback function, the following is an official document:

Jquery.each (collection, Callback (Indexinarray, valueofelement))

Collection: The object or array to iterate over.

callback (Indexinarray, valueofelement): The function that would be is executed on every object.

The $.each () method accepts two parameters, the first is the collection of objects that need to be traversed (a collection of JSON objects), the second is the method to traverse, the method accepts two parameters, the first is the index of the traversal, and the second is the value that is currently traversed. Haha, with the $.each () method JSON parsing will be solved. (*^__^*) hehe ...

function Loadinfo () {
    $.getjson ("Loadinfo", function (data) {
        $ ("#info"). HTML ("");//Empty info content
        $.each (data.comments, function (I, item) {
            $ ("#info"). Append (
                    
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div>        });
        });
}

As above, Loadinfo is the requested address, function (data) {...} is the callback function after the request succeeds, data encapsulates the returned JSON object, in the following $.each (Data.comments,function (I,item) {...}) The Data.comments method directly reaches the JSON array contained within the JSON data:

[{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo Xi yo XI", "id": 2, "nickname": "Xiao Qiang"}]

The function in the $.each () method is to iterate over the array and insert it into the appropriate place by manipulating the DOM. During the traversal, we can easily access the currently traversed index ("I" in the code) and the currently traversed value ("item" in the code).

The result of the above example is as follows:

If the JSON data returned is more complex, then only a few more $.each () can be traversed, hehe. For example, the following JSON data:

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Johnny"}], "Content": " You're a wood man, haha. "," Infomap ": {" gender ":" Male "," occupation ":" Programmer "," blog ":" http:\/\/www.cnblogs.com\/codeplus\/"}," title ":" 123 Wood Man "}

JS as follows:

function Loadinfo () {
    $.getjson ("Loadinfo", function (data) {
        $ ("#title"). Append (data.title+ "        $ ("#content"). Append (data.content+ "        jquery Parses map data
        $.each (Data.infomap,function (key,value) {
            $ ("#mapinfo"). Append (key+ "----" +value+ "<br/>        });
        Parse an array   -----------------------------------------Here's what I used above.
        $.each (data.comments, function (I, item) {
            $ ("#info"). Append (
                    
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div>        });
    });
}

It is important to note that when $.each () traverses a map, the parameters in function () are key and value, which is very convenient.

The performance of the above example:

jquery is very powerful, so ... More understanding also have to refer to the document, (ˇ?ˇ) want ~

Arrays and function are objects, now familiar with the JS base array object, interested students together to review it.

Array.pop: Delete the last object in the array

Array.shift: Delete the first object in an array

Array.join: Elements inside an array are inserted into a string into a page

Array.reverse: element inversion in array

Array.concat: Array merging, but who merges with, be aware of the order

Array.tostring: The array is converted directly to a string and is no longer an object

Array.valueof: Shows the original value, what's in it.

Array.Sort: The order is arranged in ASCII code, but numbers cannot be sorted by sort. To sort please look down, for example OH.

Array.push: Adds a new object at the end of the array, returning the display as an array length

Array.slice: Delete object in array slice (start, end)

Array.splice: Deleting Add Objects

Array.unshift: Insert object before, return display is array length

Array.indexof: Checking if an object exists

Here are some examples of how we can use the computer and how it works.

var bb = [' qq ', ' AA ', ' ss ', ' EE '];

var ooo = [' Nov ', ' August '];

Alert (Bb.indexof (' QQ '));//returns 0 because QQ is an object within an array, the position is 0

Alert (Bb.pop ());//Return EE

Alert (Bb.shift ());//Return QQ

Alert (Bb.join (and));//return QQ and AA and SS and EE

Alert (bb.tostring ());//Return Qq,aa,ss,ee

Alert (bb.valueof ());//Return Qq,aa,ss,ee

Alert (Bb.sort ());//Return AA,EE,QQ,SS

Alert (Bb.push ("Lemon", "Pineapple"));//returns 6 because the array already has six objects, respectively: Qq,aa,ss,ee,lemon,pineapple

Alert (Bb.slice (0,2));//Return QQ,AA

Alert (Bb.splice (1,3, ' lemon '));//return aa,ss,ee, remove from AA, remove length: three

Alert (Bb.unshift (' Sunny '));//returns 5 because the array has an object added, and 4 becomes 5

Alert (Bb.concat (OOO));//Return Qq,aa,ss,ee

Alert (Bb.reverse ());//Return Ee,ss,aa,qq,nov,august

In fact, as long as more practice to know how these are used, more practice is the premise of flexible use.

To sort the numbers, use the sort () method, as in the following example:

var foo = [1,12,15,54,56,89,123,78];

function num (A, b) {

return a-B;

}

Alert (Foo.sort (num));//Return 1,12,15,54,56,78,89,123

Try it now!

JQuery traversal-eq () method

Change it to blue by adding the appropriate class to the DIV for index 2:

$ ("body"). Find ("div") .eq(2) . addclass ("Blue");

jquery:eq () selectorDefinition and usage

: the EQ () selector selects the element with the specified index value.

The index value starts at 0, and the index value of all first elements is 0 (not 1).

Often used with other elements/selectors to select the elements of a specific ordinal in the specified group (as in the example above).

Grammar

$ (": eq (index)")

Select a second <p> element:

$ ("P:eq (1)")

Operation of jquery Array