Home > Article > Web Front-end > The difference and usage between eq and get in jquery
I believe most people will use these two incorrectly. You can find out by carefully checking the API documentation. eq returns a jqueryobject, and get returns an html objectarray.
For example:
b9c90d7adf57a081f40cf3bc0da43c27Feiyu94b3e26ee717c64999d7867364b1b4a3Use eq to get the color value of the first p tag:
$( "p").eq(0).css("color") //Because eq(num) returns a jq object, you can use the jq method css to get the color value of the first p tag:
$("p").get(0).style.color //Because get(num) returns an html object, the traditional HTML object method must be used, and the jq object is useless at this time. Of course, you can also convert the object to a jq object after get(num) and then operate:
$($("p").get(0)).css("color")----- -------------------------------------------------- ------------------
more eq
see:
http://api.jquery.com/eq/
--- -------------------------------------------------- --------------------------
more get:
see:
http://api.jquery.com/get/
eq: The return is a jquery object that reduces the set of matching elements to one element. The position of this element in the matching element set becomes 0, and the length of the set becomes 1
get: is an html object array that is used to obtain one of the matching elements. num indicates which matching element is obtained.
For example: html code
The code is as follows:
<ul> <li>li-1</li> <li>li-2</li> </ul>
For example, if we pass the jquery selector $("li"), then we will have two How can I only select one of the li elements?
$("li:eq(0)").html() or $("li").eq(0).html() is The first li here we will get li-1
$("li:eq(1)").html() or $("li").eq(1).html() which is the second li Here we will get li-2
Let’s look at get because get returns an html object, so here we are
$("li").get(0).style.color='red'
You can only use this or convert the get return object into a jquery object and operate
$($("li").get(0)).css("color",'red')
Complete code
The code is as follows:
< HEAD >New Document <ul> <li>li-1</li> <li>li-2</li> </ul>