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として返却されています。

    参考

    Pocket
    LINEで送る

    You may also like...