くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]セレクターの種類

jQuery

⑴ どのHTML・CSSの要素を操作するかをセレクターで指定し

⑵ 操作する内容を書く

 

  $ ( function( ) {
     $  ( 'セレクター' ) . jQueryの命令
  } ) ;

例: $ ( function() {
     $ ('li').css('color','red')
   });

・・・CSSのli要素のcolorプロパティを赤に変更

する

要素セレクタ

<body>
<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <li>4番目の要素</li>
</ul>
<script>

$ ( function() {
  $ ('li').css('color','red')
});
</script>
</body>

 《表示結果》 

f:id:pleasure10501:20150412144955p:plain

IDセレクタ

ID属性を指定する場合は、$ ( ' # id名 ' )と、id属性の値に#(ハッシュ)をつけたものをセレクターとする

<ul>
  <li id="first">1番目の要素</li>
  <li id="second">2番目の要素</li>
  <li id="third">3番目の要素</li>
  <li id="fourth">4番目の要素</li>
</ul>
<script>
$ ( function( ) {
  $ ( ' li #second ' ).css ( ' color ' , ' red ' )
} ) ;
</script>

 《表示結果》

f:id:pleasure10501:20150412145610p:plain

クラスセレクタ

クラス属性を指定する場合は、$ ( ' . class名 ' )と、class属性の値に.(ドット)をつけたものをセレクターとする
<ul>
  <li class="first">1番目の要素</li>
  <li class="second">2番目の要素</li>
  <li class="third">3番目の要素</li>
  <li class="fourth">4番目の要素</li>
</ul>
<script>
$ ( function( ) {
  $ ( ' li.third ' ) .css( ' color ' , ' blue ' )
} ) ;

 《表示結果》

f:id:pleasure10501:20150412145818p:plain

子孫セレクタ

○ id属性の直下(子)の別の属性を指定するには、セレクタ名を半角スペースで区切る

<ul>
    <li id="first"><strong>1番目の要素</strong> テキスト</li>
    <li id="second"><strong>2番目の要素</strong> テキスト</li>
    <li id="third"><strong>3番目の要素</strong> テキスト</li>
    <li id="fourth"><strong>4番目の要素</strong> テキスト</li>
</ul>
<script>
$ ( function() {
  $ ('.third strong').css('color','blue')
});

⇒ id名「third」の子のstrong要素だけに、colorプロパティの変更が適用される

 《表示結果》

f:id:pleasure10501:20150412150833p:plain

○ idの直下(子)の特定の要素全てに対しては、>を使うこともできる(CSS2.1から)

<div class="memo">
    <p class="test"><strong>1番目の要素</strong> テキスト</p>
    <p><strong>2番目の要素</strong> テキスト</p>
    <p class="test">3番目の要素 テキスト</p>
    <p>4番目の要素 テキスト</p>
    </div>
<script>
<script>
$ ( function( ) {
  $ (' .memo > .test ' ).css( 'color','blue')
} ) ;

⇒ class名memoの子のclass名testだけにcolorプロパティの変更が適用される

 《表示結果》

f:id:pleasure10501:20150412153104p:plain

隣接セレクター(CSS2.1)

特定の要素の次に出現する要素を+で指定する。

<ul>
    <li class="first">1番目の要素  テキスト</li>
    <li class="second">2番目の要素 テキスト</li>
    <li class="third">3番目の要素 テキスト</li>
    <li class="fourth">4番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
  $ ( '.second + li ' ).css( 'color','blue' )
} ) ;

・・・class名secondの次のli要素に、colorプロパティの変更が適用される

 《表示結果》

f:id:pleasure10501:20150412153759p:plain

グループセレクタ

複数セレクターを,(カンマ)で区切って複数選択できる

<ul>
    <li id="first">1番目の要素 テキスト</li>
    <li id="second">2番目の要素 テキスト</li>
    <li id="third">3番目の要素 テキスト</li>
    <li id="fourth">4番目の要素 テキスト</li>
</ul>
<ul>
    <li class="first">1番目の要素 テキスト</li>
    <li class="second">2番目の要素 テキスト</li>
    <li class="third">3番目の要素 テキスト</li>
    <li class="fourth">4番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
  $ ( '#second, #fourth, .first ' ).css( 'color','blue' )
} ) ;

 《表示結果》

f:id:pleasure10501:20150412155450p:plain

ユニバーサルセレクタ

特定の要素内にあるすべての要素を指定する

以下の例では、li要素以下にある要素になるため、li要素のみは含まれない

<ul>
    <li id="first"><strong>1番目の要素 テキスト</strong></li>
    <li id="second">2番目の要素 テキスト</li>
    <li id="third">3番目の要素 テキスト</li>
    <li id="fourth"><strong>4番目の要素</strong> テキスト</li>
</ul>
<ul>
    <li class="first"><span>1番目の要素 テキスト</span></li>
    <li class="second">2番目の要素 テキスト</li>
    <li class="third"><strong>3番目の要素 テキスト</strong></li>
    <li class="fourth">4番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
  $ ( ' li * ' ).css( 'color','blue' )
} ) ;

f:id:pleasure10501:20150412160042p:plain

first-child疑似クラス(CSS2.1)

特定の要素の中の、最初に登場する要素を指定する方法。要素名に:first-childをつける

<ul>
    <li id="first">1番目の要素 テキスト</li>
    <li id="second">2番目の要素 テキスト</li>
    <li id="third">3番目の要素 テキスト</li>
    <li id="fourth">4番目の要素 テキスト</li>
</ul>
<ul>
    <li class="first">1番目の要素 テキスト</li>
    <li class="second">2番目の要素 テキスト</li>
    <li class="third">3番目の要素 テキスト</li>
    <li class="fourth">4番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
  $ ( 'li:first-child ' ).css( 'color','blue' )
} ) ;

 《表示結果》

f:id:pleasure10501:20150412154636p:plain

また、「$ ( ' li:first ' )」にすると次のようになるので注意

f:id:pleasure10501:20150412155037p:plain

 

 

広告を非表示にする