jQuery 入門

メソッド

  • animate() : アニメーション
  • text() : テキストを設定・取得
  • html() : HTMLを設定・取得
  • attr() : 属性値を設定・取得
  • css() : スタイルを設定・取得
  • children() : 子要素を取得
  • .getJSON() : JSON形式のデータを読み込む
  • .ajax() : 非同期通信

公式サイト・リファレンス


// img要素を作成
var img = jQuery('');
img.attr('src', url);

// 末尾に追加
$('body').append(img);

// 先頭に追加
$('body').prepend(img);


////////////////////////////////////////////
// テキストボックス
////////////////////////////////////////////

// テキストボックスの値を取得  input type="text"
var str = jQuery('#text-box').val();

// テキストボックスの値を設定
$('#text-box').val('テキスト');

////////////////////////////////////////////
// テキストエリア
////////////////////////////////////////////

// テキストエリアの値を取得 textarea
var str = $('#text-area').val();

// テキストエリアの値を設定
$('#text-area').val('テキストエリア');

////////////////////////////////////////////
// チェックボックス
////////////////////////////////////////////

// チェックボックスがチェックされているかの確認 type="checkbox"
if ($('#check-box').prop('checked')){
  // チェックされている場合の処理
} else {
  // チェックされていない場合の処理
}

// チェックボックスにチェックを入れる
$('#check-box').prop('checked', true);

// チェックボックスのチェックを外す
$('#check-box').prop('checked', false);

////////////////////////////////////////////
// セレクトボックス
////////////////////////////////////////////

// セレクトボックスの選択されたvalue値を取得
var str = $('#select-box').val();

// セレクトボックスの選択されたテキストを取得
var str = $('#select-box option:selected').text();

// セレクトボックスの項目を選択(インデックス指定)
$('#select-box' ).val(0);  // 最初の項目を選択

// セレクトボックスの項目を選択(value値で指定)
$('#select-box' ).val('list3'); 





console.log($.fn.jquery);

孫要素は取得できない


$("#parent").children('span');

JSONファイルを.ajax()で読み込むサンプルコード


$(document).ready(function () {

  $.ajax({
    dataType: "json",
    url: "02-ajax.json",
    mimeType: "application/json",
    success: function (data) {
      $.each(data, function (i, item) {
        console.log(item.name);
        console.log(item.image.small);
      });
    }
  });

});

JSONファイル

[
  {
    "name": "Name-A",
    "image": {
      "small": "a-small.png",
      "large": "a-large.png"
    }
  },
  {
    "name": "Name-B",
    "image": {
      "small": "b-small.png",
      "large": "b-large.png"
    }
  }
]

.getJSON()のサンプルコード


$(document).ready(function () {
  
  $.getJSON('./02-ajax.json', function(data){

    $.each(data, function(i, item){
      console.log(item.name);
      console.log(item.image.small);
    });
  });

});

JSONファイル

[
  {
    "name": "Name-A",
    "image": {
      "small": "a-small.png",
      "large": "a-large.png"
    }
  },
  {
    "name": "Name-B",
    "image": {
      "small": "b-small.png",
      "large": "b-large.png"
    }
  }
]


$('#hoge')
.on('mouseover', function () {
  $(this).stop().animate({fontSize: '20px'}, 1000, 'linear');
})
.on('mouseout', function () {
  $(this).stop().animate({fontSize: '16px'}, 1000);
});

「.length」


// 設定 -----

// 文字色を白に設定
jQO.css('color', 'red');

// 背景色を白に設定
jQO.css('background-color', 'white');

// 取得 -----

// 文字色を取得
var c = jQO.css('color');

// 背景色を取得
var c = jQO.css('background-color');
            

// 設定(src属性)
$('#id').attr('src', 'menu01.png');

// 取得 (src属性)
$(#id).attr('src');


// 設定
$('#id').html('<p>Hello</p>');

// 取得
var htm = $('#id').text();
            

// 設定
$('div').text('hello');

// 取得
var str = $('div').text();

シェアする

  • このエントリーをはてなブックマークに追加

フォローする