2014-12-25

2014-12-25

メソッドとイベント演習問題Add Star

 

 

複数プロパティ指定

  • 以下のように表示するようjQueryを記述しなさい
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<liid="third">jQuery</li>
<li>PHP</li>
</ul>
</body>

f:id:web-0818:20141013221632p:image



要素の追加

  • 以下のように表示するようjQueryを記述しなさい
<body>
<olid="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</body>

f:id:web-0818:20141013220319p:image


f:id:web-0818:20141013220730p:image


f:id:web-0818:20141013220905p:image



  • ol要素を、id名「wrapper」でdiv要素で囲みなさい

<body>
<olid="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
</body>


clickイベント

  • ある要素がクリックされたら、「クリックされました」と警告ボックスに表示させるjQueryを記述しなさい

f:id:web-0818:20141013215844p:image



  • 以下の写真を使いjQueryで記述しなさい

f:id:web-0818:20141013223111p:image

f:id:web-0818:20141013223101p:image


  • テキストリンクをクリックする画像が換わる
<body>
<pid="photo">
<imgsrc="img/natsu.png"alt="夏の風景">
</p>
<p>
<aid="trigger"href="img/surf.png"title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a>
</p>
</body>

  • 画像をクリックする画像が換わる
<body>
<pid="photo">
<aid="trigger"href="img/surf.png"title="サーフィン"><imgsrc="img/natsu.png"alt="夏の風景"></a>
</p>
</body>

<body>
<pid="photo">
<aid="trigger"href="img/surf.png"title="サーフィン"><imgsrc="img/natsu.png"alt="夏の風景"></a>
</p>
</body>