jQuery・Ajax チートシート

jQuery: 簡単にDOM操作のできるJSライブラリ

更新: Ajax について追加
更新: 起動時実行 について追加

0. 使い方：html headタグ内で読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

1. DOMの選択：基本

$('tag')
$('.class')
$('#id')

$('#id > .class') // > 直下の要素  (1 level down)
$('#id .class') // `space` 配下の要素 (multi level down)
$('#id , .class') // , 複数の要素
$('#id + .class') // + 隣接の要素

// :filter
$('#id > li:eq(2)') // 3番目のli要素
$('#id > li:gt(2)') // 4番目以降の全てのli要素
$('#id > li:lt(2)') // 3番目以前の全てのli要素

2. Family Tree の探索

// filterはfind()メソッド以外は省略可能。find()メソッドでは '*' を使う。
$('#id').parent('filter') // up 1 level
$('#id').parents('filter') // up multi levels
$('#id').children('filter') // down 1 level
$('#id').find('filter') // down multi levels
$('#id').siblings('filter') // 兄弟
$('#id').next() // 1つ年下の弟
$('#id').prev() // 1つ年上の兄

$('.class').first() // 該当するDOM要素の 1つ目

3. DOMへの操作

$('.class').toggleClass('class2') // 引数の class名にコンマ不要。addClass, removeClassでもOK

// attribute: class, id, ...
$('.class').attr('name') // get
$('.class').attr('name', 'value') // set

// css style
$('.class').css('name') // get
$('.class').css('name', 'value') // set

// text with /w tag
$('.class').html() // get
$('.class').html(val) // set

// text with /wo tag
$('.class').text() // get
$('.class').text(val) // set

// value
$('.class').val() // get
$('.class').val(val) // set

// remove DOM
$('.class').remove() // remove all items
$('.class').remove('selector')

// DOM要素の追加
$('.class').append('<img src="url">') // 自分の子要素としてDOMを最後尾に追加
$('.class').prepend('<img src="url">') // 自分の子要素としてDOMを最前列に追加
$('.class').before('<img src="url">') // 1つ兄のsiblingとしてDOMを追加
$('.class').after('<img src="url">') // 1つ弟のsiblingとしてDOMを追加

4. 該当する全ての要素に順番に処理を行う: .each(function)

$('.class').each(function(){
  $(this).text();
});

5. イベント処理: .on('event', function)

$('#myAnchor').on('click', function(evt) {
    evt.preventDefault();
    console.log('You clicked a link!');
});

よく使う mouse event（省略記法もあり）

• click
• mouseup
• mousedown
• mouseover
• mouseout
• mousemove

6. 非同期通信: Ajax

6-1. 公開APIからのjsonデータの受け取り: $.getJSON()

$.getJSON(url, function(data){
  // do something 
}).fail(function(e){
  // do something
});

例: NY times API で 記事リンクを取得

var $nytHeaderElem = $('#nytimes-header');
var $nytElem = $('#nytimes-articles');
var city = $('#city').val();

var nyTimesBaseUrl = 'http://api.nytimes.com/svc/search/v2/articlesearch';
var nyTimesApiKey = '07abd192a7c66b4fe1603702aa976a7f:17:71194010';
var nyTimesUrl = nyTimesBaseUrl + '.json?api-key=' + nyTimesApiKey + '&q=' + city;

$.getJSON( nyTimesUrl, function( data ) {
    var docs = data.response.docs;
    $.each( docs, function( key, val ) {
        var title = '<a href="' + val.web_url +'">' + val.headline.main + '</a>';

        var leadParagraph = '';
        if (val.lead_paragraph) {
            leadParagraph = '<p>' + val.lead_paragraph + '</p>';
        };

        var listItem = '<li class="article">' + title + leadParagraph + '</li>';

        $nytHeaderElem.text('New York Times Articles about ' + city);
        $nytElem.append(listItem);
    });
}).fail(function(){
    $nytHeaderElem.text('New York Times Articles could not be loaded');
});

6-2. より柔軟な非同期処理: $.ajax()

$.ajax({
  url: "<url>",
  type: "get",
  dataType: "jsonp",
  success: function(data){
    // do something
  }
});

例: Wikipedia API で 記事リンクを取得 (JSON-Pデータの受け取り)

var wikiBaseUrl = 'http://en.wikipedia.org/w/api.php?format=json&action=opensearch&search=';
var wikiUrl = wikiBaseUrl + city;

var wikiRequestTimeout = setTimeout(function(){
    $wikiElem.text('Could not load wikipedia links');
}, 8000);

$.ajax({
    url: wikiUrl,
    dataType: "jsonp",
    success: function(data){
        for (var i = 0; i <= data[1].length - 1; i++) {
            var pageLink = '<li><a href="' + data[3][i] + '">' + data[1][i] + '</a></li>';
            $wikiElem.append(pageLink);
        };

        clearTimeout(wikiRequestTimeout);
    }
});

7. 起動時に実行

起動時実行の関数は、以下の無名関数の中に書くようにする

$(document).ready(function(){
    // ここに書く
});

以下は、省略形でまったく同じ意味

$(function(){
    // ここに書く
});