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

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

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

[jQuery]演習問題

表示結果のようになるよう記述しなさい

1)要素セレクタ

<スクリプト

<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
  <li>The quick brown fox jumps over the lazy dog.</li>
  <li>The quick brown fox jumps over the lazy dog.</li>
</ul>
<script>
$ ( function( ){
    $('p').css('background','pink')
    $('ul').css('background', 'yellowgreen')
});
</script>
</body>

<表示結果>

f:id:pleasure10501:20150412164052p:plain

2)IDセレクタ

<スクリプト

<ul>
    <li id="fox">fox</li>
    <li id="cat">cat</li>
    <li id="fish">fish</li>
    <li id="dog">dog</li>
    <li id="bird">bird</li>
</ul>
<script>
$ ( function( ){
    $('li#cat').css('background','pink')
    $('li#dog').css('background', 'yellowgreen')
});
</script>

<表示結果>

f:id:pleasure10501:20150412164351p:plain

3)IDセレクタ

スクリプト

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<script>
$ ( function( ){
  $( '#div1' ).css( 'border','2px solid red' )
  $( '#div2' ).css( 'background', 'pink' )
  $( '#div3' ).css( 'background', '#78BD7C' )
  $( '#div3' ).css( 'color', '#999' )
});
</script>

<表示結果>

f:id:pleasure10501:20150412164959p:plain

4)CLASSセレクタ

スクリプト

<ul>
    <li class="man">Paul</li>
    <li class="man">Billy</li>
    <li class="woman">Alice</li>
    <li class="man">Taro</li>
    <li class="woman">Hana</li>
    </ul>
<script>
$ ( function( ) {
  $( '.man' ).css( 'background','#A7D8E7' )
  $( '.woman' ).css( 'background', 'pink' )
});
</script>

<表示結果>

f:id:pleasure10501:20150412165512p:plain

5) 子孫セレクタ

スクリプト

<p>I have a <strong>pen</strong>.</p>
<ul>
    <li>His <strong>pen</strong> is red.</li>
    <li>I need his <strong>pen</strong>.</li>
</ul>
<p>She doesn't need a <strong>pen</strong>.</p>
<script>
$ ( function( ) {
  $( 'p strong' ).css( 'background','#A7D8E7' )
  $( 'li strong' ).css( 'background', 'pink' )
} ) ;
</script>

<表示結果>

f:id:pleasure10501:20150412170105p:plain

 

6)子セレクタ

スクリプト

<body>
<p>I have a <strong>pen</strong>.</p>
<ul>
    <li>His <strong>pen</strong> is red.</li>
    <li>I need his <strong>pen</strong>.</li>
</ul>
<p>She doesn't need a <strong>pen</strong>.</p>
<script>
$ ( function( ){
  $( 'p>strong' ).css( 'color','red' )
});
</script>

<表示結果>

f:id:pleasure10501:20150412170456p:plain

 

7)隣接セレクタ

スクリプト

<ul>
    <li id ="first">Paul</li>
    <li id ="second">Billy</li>
    <li id ="third">Alice</li>
    <li id ="fourth">Taro</li>
</ul>
<script>
$ ( function( ){
  $( '#second+li' ).css( 'color','red' )
});

<表示結果>

f:id:pleasure10501:20150412170802p:plain

8)first-child疑似クラス

スクリプト

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>
<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$ ( function( ){
  $( 'li:first-child' ).css( 'color','red' )
});

<表示結果>

f:id:pleasure10501:20150412171040p:plain

9)否定疑似クラス

スクリプト

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$ ( function( ){
  $( 'li:not ( :first-child )' ).css( 'color','red' )
});
</script>

<表示結果>

f:id:pleasure10501:20150412171309p:plain

 

 

広告を非表示にする