はじめに
jQueryで頻出の$の正体は関数である。
jQuery
> console.log(typeof($));
function
functionとはオブジェクト型の一種である。
セレクタ
対象となるDOM要素
- HTMLタグ:
$("p") - id:
$("#id") - class:
$(".class")
応用
「」内の記号でDOMを区切る
- 複数の要素:「,」
- 直下の要素:「>」
- それ以下の要素:「半角スペース」
- 隣接する要素:「+」
属性セレクタ
文字通り、HTMLの属性でセレクタを指定するもの
例.href属性がxxxのとき$('a[href="xxx"]')
- 等しくない:「!=」
- xxxを含む:「*=」
- 先頭がxxxで始まる:「^=」
- 終わりがxxxで終わる:「$=」
使いそうなメソッド
- 属性値の取得:
$('a').attr('href') - 属性値の変更:
$('a').attr('href'、'xxx') - カスタム属性の値を取得:
$('a').data('xxx') - タグの中身のテキストを取得:
$('p').text() - タグの中身のテキストを変更:
$('p').text('xxx') - タグの中身にHTMLを挿入:
$('p').html('<p>xxx</p>') - valueの値を取得:
$('input[name="hoge"]').val() - valueの値を変更:
$('input[name="hoge"]').val('xxx') - セレクタの中身を削除:
$('p').empty(); - セレクタを削除:
$('p').remove();
イベント
イベントとは、クリックやマウスオーバーなどの外部からのきっかけを表す
イベントと処理の中継役をイベントハンドラという。
イベントハンドラにはイベントオブジェクトを引数として渡すことができる。
イベントによって、イベントオブジェクトには様々なプロパティやメソッドが含まれている。
onメソッド
HTMLソースには存在していない要素、つまり動的に作成された要素に対して使う。
/*
$('親要素').on('イベント', '対象となる要素', function() {
処理内容
});
*/
$('body').on('click', '.vanish', function() {
$(this).remove();
});
$.get $.post
どちらもパラメータを渡してサーバ側で処理できる。
$.post()と$.get()の使いわけはフォームと同じ。
データを取得するなら$.get、データを更新するなら$.post()を使う。
引数には、主にサーバ側のファイル名、パラメータ、コールバック関数を指定する。
get,postでのアクセスの結果はコールバック関数の引数に入れることができる。
書き方の例
// $.get('',{},function())
$.get('greet.php', {
name: $('#name').val();
}, function(data) {
$('#result').html(data);
});
値の形式はよくJSONが使われる。
greet.php
$rs = array(
"message" => htmlspecialchars("hi! " . $_GET['name'], ENT_QUOTES, "utf-8"),
"length" => strlen($_GET['name'])
);
header('Content-Type: application/json; charset=utf-8');
echo json_encode($rs);
jQuery
$('#greet').click(function() {
$.get('greet.php', {
name: $('#name').val()
}, function(data) {
$('#result').html(data.message + '(' + data.length + ')');
});
});