［jQuery］演習問題
表示結果のようになるよう記述しなさい
１）要素セレクター
<スクリプト＞
<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>
＜表示結果＞
２）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>
＜表示結果＞
３）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>
＜表示結果＞
４）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>
＜表示結果＞
５） 子孫セレクター
＜スクリプト＞
<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>
＜表示結果＞
６）子セレクター
＜スクリプト＞
<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>
＜表示結果＞
７）隣接セレクター
＜スクリプト＞
<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' )
});
＜表示結果＞
８）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' )
});
＜表示結果＞
９）否定疑似クラス
＜スクリプト＞
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$ ( function( ){
$( 'li:not ( :first-child )' ).css( 'color','red' )
});
</script>
＜表示結果＞
