Question

I am learning jQuery, and I was wondering what is the difference between these two selectors:

    $('#puzzleGrid table tr td img');

and

    $('#puzzleGrid').children('table').children('tr').children('td').children('img');

Thank you!

Answer 1

This children() selector – as pointed out by Fraicio Matte –

This first one will use the DOM QSA when available, which is a quadrillion times faster than the second example full of function calls’ overhead.

$('#puzzleGrid').children('table').children('tr').children('td').children('img');

is very specific to getting children elements of the previous element

and this – descendant selector

$('#puzzleGrid table tr td img')

Will find any “table” descendants(any table element under) of element with id=puzzleGrid.. and any descendant tr of the found tables.. and so on.

The equivalent to the first one would be using > child-selector

$('#puzzleGrid > table > tr > td > img')