読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

セレクター(Selector) - 演習課題

jQueryのコードは「なにを、どうする」

  • セレクターは、HTMLから特定の要素を取得するための記法
  • CSSセレクター構文を少しだけ拡張したもの
  1. $('セレクター')でHTMLのどの部分を操作するか決める
  2. その後、具体的な操作を記述する
$()関数の戻り値
  • $()関数は、戻り値としてjQueryオブジェクトを返します
  • jQueryオブジェクトとは、セレクターによって取得した要素を保存するとともに、これらを操作するための機能をもったオブジェクト
$とjQuery
CSSメソッド
  • 取得された要素に対して、CSSスタイルを適用するためのメソッド

J01

  • jQueryのバージョンを表示させなさい

J02

  • CDNの例を記述しなさい

J03

  • id名「jq」のみ赤い文字で表示するよう記述しなさい
<ul>
<li id="html">HTML</li>
<li id="js">JavaScript</li>
<li id="jq">jQuery</li>
<li id="php">PHP</li>
</ul>

J04

  • class名「jq」のみ以下のように表示するよう記述しなさい


J05

  • 以下のように表示するよう記述しなさい










解答例

J01
<script>
  document.write($.fn.jquery);
  window.alert($.fn.jquery);
  console.log($.fn.jquery);
</script>
J02
  • 安定バージョンを利用

jQuery CDN》

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>


Google Ajax API CDN》

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>


Microsoft CDN》

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
J03
<script>
$(function() {
  $('#jq').css('color', 'Red');
});
</script>
J04
<script>
$(function() {
  $('.jq').css('border', 'solid 4px skyblue');
});
</script>
J05
<script>
$(function() {
  $('h1, #jq').css('background', 'Aqua');
});
</script>