Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
58
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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(){
    // ここに書く
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
58
Help us understand the problem. What are the problem?