JQuery初心者のためのメモ

#はじめに
この記事はhtmlやcssに多少知識はありjavascriptも慣れてはきたが、$とか出てくると途端にわからなくなる人向けの絶妙な記事です。
自分のメモに近いので分かりにくかったらすみません。
ほんとは画像とか交えながらまとめたかったんですけどね…。

###JQueryとは
javascriptのライブラリでhtmlやcssをjavascript上で簡単に扱えるようにするものです。

##定義の基本
以下のように$をつけることでJQueryのオブジェクトとして定義できる。

// 定義の仕方1
var $hoge;
// 定義の仕方2
var hoga;
$(hoga).なんかしらのメソッド

htmlに記述されたclassやidを指定して変数として扱う場合は以下のとおり。
cssと一緒でクラスには.を、idには#をつける。

$('.some_class').なんかしらのメソッド ; // クラスで指定
$('#some_id').なんかしらのメソッド ; // idで指定
$('li').なんかしらのメソッド ; // htmlタグで指定

##よく使うメソッド
###初期化関数(コンストラクタ的なやつ)
ページを開いた際に最初に実行される初期化関数の定義は下記のとおり。
最初は慣れないけども、書き方として覚える。

$(function() {
  // ここに書いた内容がページを開いた際に実行される
});

###クリックしたら走る関数
htmlに記述された何かがクリックされたときに処理を行う際の記述。

$('.some_class').click(function() {
  // 'some_class'をクリックした際に実行される処理
});

クリックされた「これ！」を指定する場合は変数$(this)を用いる。
例えば下記のようなボタンがいくつか配置された場合があるとする。

<div class="index-btn">1</div>
<div class="index-btn">2</div>
<div class="index-btn">3</div>

クリックした「これ！」を指定する場合は以下の通り。

// クラス"index-btn"の中でクリックしたものを$clickedElementに代入
$('.index-btn').click(function() {
  var $clickedElement = $(this);
});

###マウスを乗せたら走る関数
あるhtmlのタグ上にマウスが乗っているとき実行される処理はhover関数によって記述できる。

$('.some-class').hover(function(){
  // 'some_class'の上にマウスが乗っているとき実行される処理
});

基本的にはマウスが離れたときの処理も以下のようにして記述する。

$('.some-class').hover(
  function(){
    // 'some_class'の上にマウスが乗っているとき実行される処理
  },
  function(){
    // 'some_class'の上からマウスが離れたとき実行される処理
  }
);

###クラスの追加・削除
addClass('new_class')でクラスを追加できる。
このときは.や#は必要ないので注意。
例えばクリックした要素に新しいクラスを追加する場合は以下の通り。

$('.some_class').click(function() {
  $('.some_class').addClass('new_class');
});

逆に削除はremoveClass('some_class')で行える。

###クラス等の属性の値を取得
そもそもhtmlにおけるclassやidを「属性 (attributes)」と呼ぶ。
属性を指定し、その値を所得するには関数attr()を使う。

// <a>タグのURL情報を取得
var url = $('a').attr('href');

###htmlリストタグのインデックス番号の取得

htmlの<li>にはインデックスという概念が存在する。
配列のインデックスと一緒で0から始まるもの。

<li class="fisrt_list">インデックス0</li>
<li class="second_list">インデックス1</li>
<li class="third_list">インデックス2</li>

上記の例の場合、関数index()でインデックスを取得できる。

var listIndex = $('li').index($('.second_list'));

また、クリックした「これ！」のインデックスは以下のとおり。

$('li').click(function() {
  var $clickedIndex = $('li').index($(this));
});

###htmlリストタグの長さの取得
配列のlengthメソッドと同じようなノリで<li>の長さを取得できる。

var theLastIndex = $('list_class').length - 1

###要素の表示・非表示
$('.some_class').show()で表示。
$('.some_class').hide()で非表示。
例えば、スライドのインデックス番号に応じてボタンを非表示にしたいとき。
htmlを以下のようなものとすると、

<div class="change-btn prev-btn">← 前へ</div>
<div class="change-btn next-btn">次へ →</div>

jsファイルの中身は以下の通り。

$(function() {
  // はじめに全てのボタンを表示
  $('.change-btn').show();

  // スライド番号に応じてボタンを非表示
  if (slideIndex == 0) {
    $('.prev-btn').hide();
  } else if (slideIndex == 3) {
    $('.next-btn').hide();
  }
});

###htmlで表示される文字列を編集・取得
text()関数を用いることで文字列関連の操作を行える。

// <h1>タグの文字列を書き換える場合
$('h1').text('変更しちゃった');

// <h1>タグからの文字列の取得
var text = $('h1').text(); 

##フォームで使うメソッド
###送信ボタンを押したら走るメソッド
送信ボタンが押された際の処理の記述をsubmit関数で行うことができる。
例えばフォームの送信ボタンを以下のようにhtmlで記述したとする。

<form id="form">
  <!-- 回答フォームに関する記述 -->
  <button type="submit" class="btn btn-submit">送信</button>
</form>

この送信ボタンが押されたとき実行される処理は以下のように記述する。

$('#form').submit(function() {
  // 送信ボタンが押されたときに行う処理の記述
});

選択肢から選んだ要素を取得
htmlではタグを使って選択フォームを生成できる。

<form id="form">
  <select id="select-form" class="select-form">
    <option value="0">選択してください</option>
    <option value="1">1. 犬派</option>
    <option value="2">2. 猫派</option>
    <option value="3">3. それ以外</option>
  </select>
  <button type="submit" class="btn btn-submit">送信</button>
</form>

選択された値はval()関数によって取得できる。

$('#form').submit(function() {
  var selectedValue = $('#select-form').val();
});

入力フォームに記載された内容を取得
選択フォームとほぼ同じ。
htmlにおける入力フォームの生成は以下のとおり。

<form id="form">
  <textarea id="text-form"></textarea>
  <button type="submit" class="btn btn-submit">送信</button>
</form>

入力された値もval()関数によって取得できる。

$('#form').submit(function() {
  var textValue = $('#text-form').val();
});