1. Web講座 第６回

2. jQuery による要素の選択
jQuery の基本的なメソッド
jQuery によるイベントの監視
jQuery による要素の追加・削除
次回の講座

3. 前回の講座では、回り込みPOSITIONについての資料を
あげました。

4. 回り込みなし

5. 回り込みあり

6. 回り込みの記述

7. POSITION 100px
100px

8.  POSITION
 Absoluteの場合

9. JQueryはJavaScriptのコードを
容易に記述することができる
JavaScriptのライブラリである

13. JQueryで要素を選択する場合は
$(“指定するもの”)
で選択する
基本的にはCSSのセレクタの記述で選択できる

14. 例：$(“h1”)
$(“#content”)
$(“.color”)
$(“*”);

15. HTMLメソッド
要素内のHTMLを取得または設定する
例：Chromeのconsole画面で$(“h1”).html();と打ち込むと
「電算ネットワークチーム」という文章が取得できる。

16. HTMLメソッド
要素内のHTMLを取得または設定をする
例：Chromeのconsole画面で
$(“h1”).html(“電算ソフトチーム”);と打ち込むと
「電算ソフトチーム」という文章が設定される。

17. TEXTメソッド
選択した要素のテキストを設定または取得する
例：Chromeのconsole画面で
$(“#content”).text();と打ち込むと
#content以下の子孫要素内の文章が取得される。

18. TEXTメソッド
選択した要素のテキストを設定または取得する
例：Chromeのconsole画面で
$(“#content”).text(“メインコンテンツ”);と打ち込むと
#contentに「メインコンテンツ」が設定される。

19. VALメソッド
選択した要素のvalue値を設定または取得する
例：Chromeのconsole画面で
$(“#slider”).val();と打ち込むと
スライダーのvalue値が取得できる。

20. VALメソッド
選択した要素のvalue値を設定または取得する
例：Chromeのconsole画面で
$(“#slider”).val(“100”);と打ち込むと
スライダーのvalue値が100になりスライダーが動く。

21. ATTRメソッド
選択した要素の属性を設定または取得する
例：Chromeのconsole画面で
$(“#slider”).attr(“max”);と打ち込むと
スライダーのmax値が取得できる。

22. ATTRメソッド
選択した要素の属性を設定または取得する
例：Chromeのconsole画面で
$(“#slider”).attr(“max”,”50”);と打ち込むと
スライダーのmax値が50に設定される。

23. CSSメソッド
選択した要素のCSSのプロパティを設定または取得する
例：Chromeのconsole画面で
$(“h1”).css(“color”);と打ち込むと
h1のCSSのプロパティのcolorの値が取得できる。

24. Click
選択した要素のclickイベントを設定する。
例：Chromeのconsole画面で
$(“h1”).click(function(){
alert(“test!”);
});
と打ち込むとh1をクリックした時にアラートが表示される。

25.  Hover
 選択した要素のhoverイベントを設定する。
例：Chromeのconsole画面で
$(“h1”).hover(function(){
$(“h1”).css(“background-color”,”green”);
},function(){
$(“h1”).css(“background-color”,”white”);
});
と打ち込むとh1の上にマウスが乗った時に緑色の背景色がつく。

26. Append
選択した要素の一番後ろにHTMLやエレメントを挿入する。
例：Chromeのconsole画面で
$(“#main”).append(“<p>追加のメインコンテンツ</p>”);
と打ち込むと#mainの一番後ろにpタグの文章が挿入される。

27. Remove
選択した要素の一番後ろにHTMLやエレメントを挿入する。
例：Chromeのconsole画面で
$(“p”).remove();
と打ち込むとpタグが削除される。

28. ６月２４日
JavaScriptについて