jquery - jQuery のネストされた .children() での選択

Question

私はjQueryを学んでいますが、これら2つのセレクターの違いは何だろうと思っていました:

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

と

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

ありがとうございました！

Answer 1

このchildren()セレクター - Fraicio Matte が指摘したように -

この最初の例では、可能であれば DOM QSA を使用します。これは、関数呼び出しのオーバーヘッドがいっぱいの 2 番目の例よりも 1,000 倍高速です。

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

前の要素の子要素を取得することに非常に固有です

そしてこれ -子孫セレクター

$('#puzzleGrid table tr td img')

id=puzzleGrid を持つ要素の「テーブル」の子孫 (下のテーブル要素) と、見つかったテーブルの子孫 tr などを検索します。

最初のものに相当するのは、> 子セレクターを使用することです

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