jQueryについて学んでみたよ

jQueryについて学んでみたよドットインストール続きます。とりあえずの目標は完了数1000！今現在905！今回は、jQuery入門です！

ひな形

基本となるひな形

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// $(document).ready(function() {
// 
// });

$(function() {

});
</script>

$(document).ready(function() {};は$(function() {});で置換えられる。

基礎

用語

- セレクタ: 処理対象となるDOM要素を指定する記法
- メソッド: 処理
- メソッドチェーン: メソッドをつなげて書くこと

セレクタ

- `>`: 直下の要素
- ` `: それ以下の要素
- `,`: 複数の要素
- `+`: 隣接する要素

フィルタ

- `:eq()`
- `:gt(), :lt()`
- `:even, :odd`
- `:contains()`
- `:first, :last`

メソッドを利用したDOM要素の指定

- `parent(), children()`
- `next(), prev()`
- `sibling()`

属性セレクタ

- `=`: 同じ
- `!=`: 同じではない
- `*=`: 含まれる
- `^=`: ではじまる
- `$=`: で終わる

addClass, removeClass

- classを作成して、`addClass('指定したクラス名')`をすることでクラスを追加できる。

attr

- `$('a').attr('href')`でattributeを取得できる。

data

- `data-sitename="google"`などとDOM要素に追加しておくと、`$('a').data('sitename')`のように取得できる。

要素の追加 before,after,insertBefore,insertAfter,prepend,append,prependTo,appendTo

  
$(function() {
    var li = $('
').text('just added');
    $('ul > li:eq(1)').before(li);
});

イベント

$('#box').click(function() {
    alert("hi!");
});
$('#box')
.mouseover(function() {
    $(this).css('background', 'green');
})
.mouseout(function() {
    $(this).css('background', 'red');
})
.mousemove(function(e) { // e: イベントオブジェクト
    $(this).text(e.pageX);
});

focus、blue、change

input要素に対して。

$('#name')
.focus(function() {
    $(this).css('background','red');
})
.blur(function() {
    $(this).css('background','white');
});
$('#members').change(function() {
    alert('changed!');
});

Ajax

Ajax = Asynchronous JavaScript + XML

load

load: サーバから情報を持ってきて表示する。

<script>
    $(function() {
        $('button').click(function() {
            $('#result').load('more.html');
        });
    });
</script>

コールバック関数

#resultのところにmore.htmlの内容を差し込むことができます。

$(function() {
    $('button').click(function() {
        $('#result').load('more.html', function() {
            $('#message').css('color','red');
        });
    });
});

Ajaxは非同期なので、いつ読み込まれるかわからない。このように第二引数にfunction（コールバック関数）を持ってくると、処理の終了を待って次の処理を実行することができる。

$(function() {
    $('#greet').click(function() {
        $.get('greet.php',{
            name: $('#name').val()
        }, function(data) {
            $('#result').html(data.message + '(' + data.length + ')');
        });
    });
});

greetから複数の値を取得している例です。messageとlengthはgreet.phpで連想配列のJSONとして返却されています。

参考

• jQuery入門 (全15回) – プログラミングならドットインストール