4

Assuming i have a <div class="test" style="width:200px"></div>,Please consider the following: 

var m = $('.test')[0];
var $md = $(m);
console.log($md.width()); //200

var o = $('.test');
console.log(o.width());  // 200


console.log(m);   // <div class="test" style="width:200px">
console.log($md);  // Object{ context: <div.test> ..... } 
console.log(o);   // Object{ length:1 , ..... }

Basically i can apply the width method on either var $md or var o, so what's the difference between the 1st and 2nd way if the output is the same?
I see that both md and o are objects, but in the console output they not exactly the same, how do they differ? thanks.

MrShabana
  • 377
  • 1
  • 4
  • 12
  • 4
    `$('selector')` gives you an array of matching elements and `$('selector')[0]` will give you first element from an array – Curiousdev Jan 24 '17 at 13:19
  • 1
    one is DOM object other is not but using `$()` you turned it to DOM object as well so that will make them the same – guradio Jan 24 '17 at 13:20
  • 3
    @Curiousdev `$('selector')` returns not array, but array-like object – Oleg Jan 24 '17 at 13:21
  • @Curiousdev, it returns a `node` list. – Mihai Alexandru-Ionut Jan 24 '17 at 13:22
  • @Alexandru-IonutMihai not acually :) `NodeLIst` is DOM class supported by browsers natively https://developer.mozilla.org/en/docs/Web/API/NodeList but jQuery returns its own object – Oleg Jan 24 '17 at 13:24
  • 3
    @Curiousdev your comment is misleading. Like Curious noted, it returns the the DOM object of the first matching element, NOT the first jQuery object in the collection. If you want the first jQuery object in a collection, use `$('selector').eq(0);` – Wesley Smith Jan 24 '17 at 13:25
  • 1
    @Curious you might be right it's very controversial topic though what $('selector') do is just searches through the DOM for any elements that match the provided selector and creates a new jQuery object may be you are right.. – Curiousdev Jan 24 '17 at 13:26
  • 1
    @Alexandru-IonutMihai you might be right it's very controversial topic though what $('selector') do is just searches through the DOM for any elements that match the provided selector and creates a new jQuery object may be you are right.. – Curiousdev Jan 24 '17 at 13:27
  • There is nothing controversial about this. `$('.test')[0];` and `$('.test')` intentionally return very different things. They are in no way interchangeable. – Wesley Smith Jan 24 '17 at 13:29
  • http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return – Mihai Alexandru-Ionut Jan 24 '17 at 13:36

1 Answers1

5

Here you get the first element matched selector, it returns plain js instance.

var m = $('.test')[0];

Here you wrap it in a jQuery object again.

var $md = $(m);

Since width() method return width of the first element in set there is no difference between approach, until you've got a multiple .test elements on a page and want to change them like this:

 $('.test').width(100)

This code will set the width of each .test element on a page to 100px.

But this continue to change only first matched element in a set:

 var el = $('.test')[0];
 $(el).width(100);

There are synthetic examples based on your code, i think it's better to write this way:

$('.test').first().width(100);

or 

$('.this:first').width(100);
Panama Prophet
  • 1,027
  • 6
  • 6