[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>
<表示結果>
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>
<表示結果>
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>
<表示結果>
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>
<表示結果>
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>
<表示結果>
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>
<表示結果>
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' )
});
<表示結果>
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' )
});
<表示結果>
9)否定疑似クラス
<スクリプト>
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$ ( function( ){
$( 'li:not ( :first-child )' ).css( 'color','red' )
});
</script>
<表示結果>