解答例
<script>
$(function(){
$( '#third' ).css( {
'color': 'white',
'background': 'yellowgreen',
'padding': '10px',
'font-size': '30px'
})
.width( 250 );
});
</script>
<script>
$(function(){
$( '#list' ).append( '<li>jQuery</li>' );
});
</script>
<script>
$(function(){
$( '#list' ).before( '<h1>Web制作に必須のjQueryを勉強します。</h1>' );
});
</script>
<script>
$(function(){
$( '#list' ).after( '<p>Web制作に必須のjQueryを勉強します。</p>' );
});
</script>
<script>
$(function(){
$( '#list' ).wrap( '<div id="wrapper"></div>' );
});
</script>
<script>
$(function(){
$( '#list li:last-child' ).remove();
});
</script>
<style>
#div1 {
width: 100px;
height: 100px;
background: #FC0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
$( '#div1' ).click(function() {
alert ( 'クリックされました' );
});
});
</script>
</body>
<body>
<p id="photo">
<img src="img/summer.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">テキストリンクをクリックするとサーフィンの写真に置き換える。</a>
</p>
<script>
$(function(){
$( '#trigger' ).click(function() {
$( '#photo img' ).attr({
'src': 'img/surf.png',
'alt': 'サーフィン'
});
return false;
});
});
</script>
</body>
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/summer.png" alt="夏の風景"></a>
</p>
<p>
画像ををクリックするとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
$( '#trigger' ).click(function() {
$( '#photo img' ).attr({
'src': 'img/surf.png',
'alt': 'サーフィン'
});
return false;
});
});
</script>
</body>
<body>
<p><img src="img/summer.png" alt="夏の風景"></p>
<script>
$(function(){
$( 'img' ).mouseover(function(){
$(this).attr( 'src', 'img/surf.png' ).attr( 'alt', 'サーフィン' );
}).mouseout(function(){
$(this).attr( 'src', 'img/summer.png' ).attr( 'alt', '夏の風景' );
});
});
</script>
</body>
<body>
<p><img src="img/halloween.jpg" alt="ハロウィン"></p>
<script>
$(function() {
$('img').click(function() {$(this).fadeOut('slow');});
});
</script>
</body>
<script>
$(function(){
$('dd:not(:first)').css('display','none');
$('dl dt').click(function(){
if($($(this).next()).css('display')=='none'){
$('dd').slideUp('slow');
$($(this).next()).slideDown('slow');
}
});
});
</script>