jQueryセレクタの一般的な方法(ノード選択)
3067 ワード
詳細
1.条件を満たすすべての要素find()を検索する
ページ内のul要素の下にあるすべてのli要素を検索し、検索したli要素にtmpExampleスタイルを追加します.
2.指定した要素の兄弟ノードsiblings()を検索
IDがtmpCarrotのli要素のすべての兄弟ノードを検索し、検索した兄弟ノードにtmpExampleスタイルを追加します.
指定した条件の兄弟ノードを検索するには、slblings()のカッコにセレクタを追加します.たとえば、slblings('.tmpClass')は、クラスがtmpClassの兄弟ノードを検索します.
3.指定したノードの次の兄弟ノードnext()を検索
IDがtmpBroccoliのliノードの次の兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
4.指定したノードの後ろにあるすべての兄弟ノードnextall()を検索
IDがtmpBroccoliのliノードの後ろにあるすべての兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
5.指定したノードの前の兄弟ノードprev()を検索
IDがtmpBroccoliのliノードの前の兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
6.指定したノードの前にあるすべての兄弟ノードprevAll()を検索
IDがtmpBroccoliのliノードの前のすべての兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
prevAll()のカッコにセレクタを追加して、指定した条件の兄弟ノードを検索できます.たとえば、prevAll('li.tmpClass')は、現在のノードの前にあるすべてのクラスがtmClassの兄弟ノードを検索します.
7.条件を満たすすべての親ノードparents()を検索する
IDがtmpCarrotのliノードすべてのidがtmpSelectionのdiv親ノードを検索します.検索したノードにtmpExampleスタイルを追加します.
8.親ノードparent()の検索
IDがtmpCarrotのliノードの親ノードを検索します.検索したノードにtmpExampleスタイルを追加します.
9.サブノードchildren()の検索
classがtmplistのdivの下にあるサブノードのh 4ラベルを検索します.検索したノードにtmpExampleスタイルを追加します.
10.検出されたノードセットでの逆選択not()
検索されたliコレクションには、classがtmpVegetablesのノードを除いて、tmpExampleスタイルが追加されます.
11.ノードセットのクリップslice()を選択
検出されたliセットでは、1番目(0から数え、1番目は実は2番目)のノードから4番目のノードを選択し、4つのノードにtmpExampleスタイルを追加します.
12.検索結果セットにノードadd()を追加する
idはtmpAnimalsのulノードの下のliノードセット、idがtmpBrocoliのliノード、idがtmpPepperのliノードを追加します.コンビネーションされたセット内のすべてのliノードにtmpExampleスタイルを追加します.
13.結果セット指定要素eq()の選択
ページulの下のliコレクションでは、10番目の要素にtmpExampleスタイルを追加します.
1.条件を満たすすべての要素find()を検索する
$('ul').find('li').addClass('tmpExample');
ページ内のul要素の下にあるすべてのli要素を検索し、検索したli要素にtmpExampleスタイルを追加します.
2.指定した要素の兄弟ノードsiblings()を検索
$('li#tmpCarrot').slblings().addClass('tmpExample');
IDがtmpCarrotのli要素のすべての兄弟ノードを検索し、検索した兄弟ノードにtmpExampleスタイルを追加します.
指定した条件の兄弟ノードを検索するには、slblings()のカッコにセレクタを追加します.たとえば、slblings('.tmpClass')は、クラスがtmpClassの兄弟ノードを検索します.
3.指定したノードの次の兄弟ノードnext()を検索
$('li#tmpBroccoli').next().addClass('tmpExample');
IDがtmpBroccoliのliノードの次の兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
4.指定したノードの後ろにあるすべての兄弟ノードnextall()を検索
$('li#tmpBroccoli').nextAll().addClass('tmpExample');
IDがtmpBroccoliのliノードの後ろにあるすべての兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
5.指定したノードの前の兄弟ノードprev()を検索
$('li#tmpBroccoli').prev().addClass('tmpExample');
IDがtmpBroccoliのliノードの前の兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
6.指定したノードの前にあるすべての兄弟ノードprevAll()を検索
$('li#tmpBroccoli').prevAll().addClass('tmpExample');
IDがtmpBroccoliのliノードの前のすべての兄弟ノードを検索します.検索した兄弟ノードにtmpExampleスタイルを追加します.
prevAll()のカッコにセレクタを追加して、指定した条件の兄弟ノードを検索できます.たとえば、prevAll('li.tmpClass')は、現在のノードの前にあるすべてのクラスがtmClassの兄弟ノードを検索します.
7.条件を満たすすべての親ノードparents()を検索する
$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');
IDがtmpCarrotのliノードすべてのidがtmpSelectionのdiv親ノードを検索します.検索したノードにtmpExampleスタイルを追加します.
8.親ノードparent()の検索
$('li#tmpCarrot').parent().addClass('tmpExample');
IDがtmpCarrotのliノードの親ノードを検索します.検索したノードにtmpExampleスタイルを追加します.
9.サブノードchildren()の検索
$('div.tmpList').children('h4').addClass('tmpExample');
classがtmplistのdivの下にあるサブノードのh 4ラベルを検索します.検索したノードにtmpExampleスタイルを追加します.
10.検出されたノードセットでの逆選択not()
$('ul li').not('li.tmpVegetables').addClass('tmpExample');
検索されたliコレクションには、classがtmpVegetablesのノードを除いて、tmpExampleスタイルが追加されます.
11.ノードセットのクリップslice()を選択
$('ul li').slice(1,4).addClass('tmpExample');
検出されたliセットでは、1番目(0から数え、1番目は実は2番目)のノードから4番目のノードを選択し、4つのノードにtmpExampleスタイルを追加します.
12.検索結果セットにノードadd()を追加する
$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample');
idはtmpAnimalsのulノードの下のliノードセット、idがtmpBrocoliのliノード、idがtmpPepperのliノードを追加します.コンビネーションされたセット内のすべてのliノードにtmpExampleスタイルを追加します.
13.結果セット指定要素eq()の選択
$('ul li').eq(10).addClass('tmpExample');
ページulの下のliコレクションでは、10番目の要素にtmpExampleスタイルを追加します.