アコーディオン ドロップダウンメニュー ハンバーガーメニュー
jQueryはJavaScript用のライブラリ。HTMLを動的に操作することは簡単にできる。
googleからCDNを使い、HTMLのheadタグ内にてscriptタグを使って読み込む。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
その下にjQueryの記述場所を以下のようにして設ける。
<script type="text/javascript">
$(function(){
// ここに記述
});
</script>
通常は以下のような形で使用する。
$("セレクタ").メソッド(引数);
セレクタには css でのセレクタを使うことができる。
メソッドの効果はセレクタが適用されるタグ全てに適用される。
//例：IDがabcのタグの中身を「りんご」に変える。
$("#abc").html("りんご");
$("セレクタ")は、jQueryオブジェクトを意味し、そのメソッドである html() を呼び出している。
//例：Pタグで囲まれた部分を全て「りんご」に変える。
$("p").html("りんご");
//例：class=abcのタグの中身を「りんご」に変える。
$(".abc").html("りんご");
//例：divタグの中のbタグの中身を「りんご」に変える。
$("div b").html("りんご");
htmlメソッドで、タグに囲まれた文字を変更できる。
$("#abc").html("りんご");
引数を無しにすると囲まれている文字列を取得できる。
例：IDがabcのタグで囲まれた文字列を変数strに代入
var str = $("#abc").html();
htmlと似たメソッドにtext()がある。
htmlではタグを含めて変更できるが、textでは文字列になる。
$("#abc").text("りんご");
タグの属性を変更するには attr メソッドを使う。
// aタグのhref属性を yahooにする
$("a").attr("href","http://www.yahoo.co.jp");
引数を属性名だけにするとその値を取得できる。
// aタグのhref属性を取得
var link = $("a").attr("href");
inputタグに入力した値は value 属性で変更・取得できるが、よく使う属性なので、valメソッドが用意されている。
// IDがabcのタグのvalue属性を「テスト」にする
$("#abc").val("テスト");
引数を無しにするとその値を取得できる。
// IDがabcのタグのvalue属性を取得
str = $("#abc").value();
cssメソッドで、cssを変更できる。
// IDがabcのタグのcssでcolorプロパティをredにする
$("#abc").css("color","red");
引数をcss名だけにするとその値を取得できる。
// IDがabcのタグの色を取得
str = $("#abc").css("color");
既存のタグに囲まれた文字列にさらに文字列を追加するには、 append メソッドを使う。
// IDがabcのタグに「テスト」を追加する。
$("#abc").append("テスト");
既存のタグにclassを追加するには、addClass メソッドを使う。
// IDがabcのタグにclassとして「test」を追加する。
$("#abc").addClass("test");
逆に既存のタグからclassを削除するには、removeClass メソッドを使う。
// IDがabcのタグにclass「test」を削除する。
$("#abc").removeClass("test");
| html(文字列) | タグの設定（引数無しで取得） |
| text(文字列) | テキストの設定（引数無しで取得） |
| attr(属性名, 値) | 属性の設定（値無しで取得） |
| val(文字列) | value属性の設定（引数無しで取得） |
| data(名前, 値) | data-名前 属性の設定（値無しで取得） |
| css(プロパティ, 値) | cssプロパティの設定（値無しで取得） |
| append(文字列) | 中身の最後に文字列を挿入 |
| prepend(文字列) | 中身の最初に文字列を挿入 |
| after(文字列) | 後に文字列を挿入 |
| before(文字列) | 前に文字列を挿入 |
| remove() | 要素の削除 |
| addClass(クラス名) | クラスの追加 |
| removeClass(クラス名) | クラスの削除 |
| focus() | カーソルの移動 |
イベントは何らかの変化が生じたときに発生する
例：クリックした、キーを押した、etc
イベントドリブン：イベント駆動型プログラミング
特定のイベントが発生したときに何をするか、を定義していくプログラミング手法。
例：IDがabcのボタンをクリックしたときに、色を赤にする。
イベント名のメソッドに対し、関数（function）を渡す。そのfunction の中で、そのイベントが発生したときの処理を行う。
$("セレクタ").イベント名( function(){
// 処理
});
例：IDがabcのタグをクリックしたとき、h1タグを赤にする。
$("#abc").click( function() {
$("h1").css("color","red");
});
例えば、h2タグをクリックしたとき、h2タグを赤にするとする。
$("h2").click( function() {
$("h2").css("color","red");
});
このとき、クリックしたタグのみを赤にしたいときには、this を使う。
$("h2").click( function() {
$(this).css("color","red");
});
※注：this は""で囲まない
| click | クリックしたとき |
| dblclick | ダブルクリックしたとき |
| change | 変更があったとき |
| focus | フォーカスを取得したとき |
| blur | フォーカスを失ったとき |
| keydown | キーを押したとき |
| keyup | キーを押して上がったとき |
| mouseover | マウスが上に来たとき |
タグの指定方法では、通常 $(セレクタ) のように指定する。このときには全体からそのセレクタを検索するが、$(セレクタ,検索対象)のように、第二引数に検索対象を指定することができる。
例えば、検索対象に this を指定することで、クリックしたタグ内にある特定のタグを指定できる。
//例：divタグをクリックしたとき、そのタグの中にあるspanタグの色を赤にする。
$("div").click( function() {
$("span",this).css("color","red");
});
セレクタで指定する代わりに、メソッドを使用し、対象となる要素を指定できる。
例えば、$(セレクタ)で指定したタグの後に .next() を付けることで、次のタグを指定できる。
//例：divタグをクリックしたとき、クリックしたタグの次のタグを赤にする。
$("div").click( function() {
$(this).next().css("color","red");
});
| next() | 次のタグ |
| prev() | 前のタグ |
| parent() | 親のタグ |
| siblings() | 兄弟タグ |
| children() | 子のタグ |
| eq(数) | 数番目 |
複数のタグが対象になるセレクタの場合、eachメソッドを使ってそれぞれのタグを処理することできる。
//例：divタグのうち、中身が abc のタグのみ赤にする。
$("div").each( function() {
if( $(this).html() == "abc" ){
$(this).css("color","red");
}
});
showメソッドで表示、hideメソッドで非表示にできる。
$("#abc").hide();
引数にミリ秒単位で数値を指定するとアニメーションを行う。数値は完了する時間を表す。
$("#abc").hide(1000);
切り替える（表示しているときは非表示に、非表示の時には表示に）には toggle メソッドを使用する。
$("#abc").toggle(1000);
表示の仕方により、他のメソッドもある。
| show | 表示 |
| hide | 非表示 |
| toggle | 表示・非表示切り替え |
| slideDown | スライドして表示 |
| slideUp | スライドして非表示 |
| slideToggle | スライドして切り替え |
| fadeIn | フェードインして表示 |
| fadeOut | フェードアウトして非表示 |
| fadeToggle | フェードイン・アウトの切り替え |
animateメソッドで独自のアニメーション効果を作ることができる。
animate( {完了後のCSS} , 時間 , 変化量)
※変化量にはlinear（一定）かswing（徐々に速く）を指定
// 例：100msで幅が500pxになる（徐々に速く）
$("#abc").animate({width:500px},100,"swing");
Ajax = Asynchronous JavaScript + XML
非同期 JacaScript による XML 通信
ページを切り替えることなく、JavaScriptによりhttp通信を行いXML等のデータを得ること。
最近はXMLに限らず、JSONのデータをやりとりする場合が多い。
$.get によりajaxでHTMLなどのデータ取得が可能。
$.get(URL,パラメータ,関数);
// 例：URL shouhin でhtmlを返す場合
$.get('shouhin',function(data){
$("#out").html(data); // id="out" に data を挿入
});
setInterval(関数, 間隔) で行う。間隔はミリ秒単位で指定。その間隔ごとに関数が呼び出される。
function show(){
$.get('shouhin', function(html){
$("#out").html(html);
});
}
setInterval(show,5000);
$.getJSON によりajaxでJSON形式が取得が可能。
$.getJSON(URL,パラメータ,関数);
// 例：ファイル「test.json」が以下の内容の場合
//{"sname":"りんご","tanka":100}
$.getJSON('test.json',function(json){
$("#out").html(json.sname);
});
Gsonをダウンロードし、WEB-INF/libに入れておく。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// サンプルとして商品ID:1を取得
ShouhinDAO dao = new ShouhinDAO();
Shouhin s = dao.findBySid(1);
Gson gson = new Gson();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(gson.toJson(s)); // JSON変換
}
$.post により他ページへPOSTで通信することが可能。
$.post(URL,送信データ,関数);
// 例：
$("#tuika").click(function(){
var s = $("#sname").val();
var t = $("#tanka").val();
$.post( "add.php" , { sname: s , tanka : t} ,
function(){
alert("追加しました");
}
);
})
これは次のフォームで送信したことと同じ。
<form method="post" action="add.php"> <input type="text" name="sname"> <input type="text" name="tanka"> <input type="submit"> </form>