,

[jQuery] ドットインストール「jQuery入門」のまとめ

公開日: 2014/06/23
更新日: 2018/11/15

memo.

Contents

idやclassを指定してみよう

$(function() {
  // セレクタ.メソッド
  // $('')
  // html要素 p h1 ul
  // id #main
  // class .item
  $(".item").css('color', 'red');
});

もっとセレクタを使ってみよう

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  $(function() {
    // 直下の子要素 (>)
    $('#main > .item').css('color', 'red');
    // それ以下の子要素 ( )
    $('#main .item').css('color', 'red');
    // 複数の要素 (,)
    $('p, .item').css('color', 'red');
    // 隣接する要素
    $('.item + .item').css('color', 'red');
  });
</script>

フィルタを使ってみよう

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  $(function() {
    // :eq
    $('#sub > li:eq(2)').css('color', 'red');
    // :gt(), :lt() ... greater than, less than
    $('#sub > li:gt(1)').css('color', 'red');
    // :even, :odd ... 偶数, 奇数
    $('#sub > li:odd').css('color', 'red');
    // :contains()
    $("#sub > li:contains('3')").css('color', 'red');
    // :first, :last
    $("#sub > li:last").css('color', 'red');
  });
</script>

メソッドを使ったDOM要素指定

$(function() {
  // parent(), children()
  $("#sub").parent().css('color', 'red');
  // next(), prev()
  $("#sub > li:eq(2)").next().css('color', 'red');
  // siblings()
  $("#sub > li:eq(2)").siblings().css('color', 'red');
});

属性セレクタを使ってみよう

$(function() {
  // セレクタ.メソッド
  // 属性セレクタ
  // =  同じ
  // != ではない
  // *= 含む
  // ^= 先頭
  // $= 末尾
  $('a[href!="http://google.com"]').css('background', 'red');
});

css､addClass/removeClassを使おう

$(function() {
  // セレクタ.メソッド
  // .css 設定と取得
  $('p').css({
    'color': 'red',
    'background': 'blue'
  });
  console.log($('p').css('color'));
  // addClass removeClass
  $('p').addClass('myStyle');
});

attr､dataを使ってみよう

$(function() {
  // attr 取得と設定
  console.log($('a').attr('href'));
  $('a').attr('href', 'http://google.co.jp');
  // data 取得
  // <p><a href="http://google.com" data-sitename="google">Google</a></p>
  console.log($('a').data('sitename'));
});

タグの中身を操作してみよう

$(function() {
  // text
  $('a:eq(0)').text('日本語');
  // html
  $('p').html('<a href="">click</a>');
  // val ... get the value of form
  console.log($('input').val());
  $('input').val('hello!!!');
  // remove, empty
  $('p').empty();
  $('p').remove();
});

要素を追加してみよう

$(function() {
  var li = $('<li>').text('some text');
  // before, after   -> insertBefore, insertAfter
  $('ul > li:eq(1)').before(li);
  li.insertBefore($('ul > li:eq(1)'));
  // prepend, append -> prependTo, appendTo
  $('ul').prepend(li);
  li.prependTo($('ul'));
});

エフェクトを使ってみよう

$(function() {
  // hide, show
  $('#box').hide(800);
  // fadeOut, fadeIn
  $('#box').fadeOut(800);
  // toggle
  $('#box').toggle(800);
  $('#box').toggle(800);
  $('#box').toggle(800);
  // Callback function
  $('#box').fadeOut('800', function() {
    alert("gone!");
  });
});

イベントを使ってみよう

$(function() {
  // click
  $('#box').click(function(event) {
    alert("hi!");
  });
  // mouseover, mouseout, mousemove
  $('#box')
    .mouseover(function(event) {
      $(this).css('background', 'blue');
    })
    .mouseout(function(event) {
      $(this).css('background', 'red');
    })
    .mousemove(function(event) {
      $(this).text(event.pageX);
    });
});

focus､blur､changeを使おう

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

onメソッドを使ってみよう

$(function() {
  // on
  // ドキュメントが読み込まれた段階で存在しない要素を操作する
  $('button').click(function(event) {
    var p = $('<p>').text('vanish!').addClass('vanish');
    $(this).before(p);
  });
  /* 以下は .vanish が存在しないのでうまく動かない
  $('.vanish').click(function(event) {
    $(this).remove();
  });
  */
  $('body').on('click', '.vanish', function(event) {
    $(this).remove();
  });
});

loadメソッドを使ってみよう

Vagrant を利用。

  • ipconfig … ipアドレスを調べる。
  • php -S ipアドレス:8000 … PHP の簡易サーバ

Mac は設定なしで利用可能。

  • ifconfig
  • php -S ipアドレス:8000
$(function() {
  // load
  $('button').click(function(event) {
    $('#result').load('news/news.html');
  });
});

非同期通信とはなにか？

$(function() {
  // Ajax
  // Asynchronous JavaScript + XML
  // サーバと通信 + ページの書き換え
  // 非同期: 処理が終わる前に次の処理に移る
  // .load
  $('button').click(function(event) {
    // load 終了後に別処理を行うには、Callback 関数を使う
    $('#result').load('news/news.html', function() {
      $('#message').css('color', 'red');
    });
  });
});

$.getを使ってみよう / JSONで値を返してみよう

$(function() {
  // Ajax
  // Asynchronous JavaScript + XML
  // サーバと通信 + ページの書き換え
  // 非同期: 処理が終わる前に次の処理に移る
  // $.post
  // $.get
  $('#greet').click(function(event) {
    $.get('greet.php', {
      name: $('#name').val()
    }, function(data) {
      $('#result').html(data.message + '(' + data.length + ')');
    });
  });
});
greet.php
<?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);