【jQuery入門】メソッドをマスターしてjQueryを使いこなそう

これまでこのブログで、jQueryのセレクタについて学んできましたが、今回はいよいよ、jQuery以外の多くのスクリプト言語でも使われる「メソッド」という仕組みについて学んでいきます。

では早速見ていきましょう。

メソッドとは？

セレクタを「どう処理するか」を記述します。メソッドを使うことで、セレクタの内容を変更したり、アニメーションをつけることができます。

jQueryオブジェクトとメソッドの間には必ず「ドットシンタックス（ドットのこと）」を忘れずに記述します。

jQuery

$(function(){
  $('セレクタ').メソッド(引数);
});

例えば、ID名がmainの要素にactiveクラスを追加する場合は、以下のように記述します。

jQuery

$(function(){
  $('#main').addClass('active');
});

メソッドの種類

メソッドの種類は以下の通りです。

メソッド	説明
.css()	要素のスタイルを変更または取得する
.find()	指定した要素の子孫要素を取得する
.parent()	指定した要素の親要素を取得する
.children()	指定した要素の直下にある子要素を取得する
.text()	要素の文字列を変更または取得する
.html()	要素のHTMLを変更または取得する
.prepend()	指定した要素内の先頭に新たな要素を追加する
.append()	指定した要素内の末尾に新たな要素を追加する
.before()	指定した要素の前に新たな要素を追加する
.after()	指定した要素の後に新たな要素を追加する
.remove()	指定した要素を削除する
.empty()	指定した要素内の内容（子孫要素や文字列など）を削除する
.addClass()	指定した要素にclassを追加する
.removeClass()	指定した要素のclassを削除する
.toggleClass()	指定した要素にclass名が無ければ追加、あれば削除する

他にもメソッドは沢山ありますが、記事が長くなりすぎてしまうので、別記事にて追加して解説いたします！

.css()

要素のスタイルを変更または取得します。

以下の場合、div要素内の文字色が赤色になります。

HTML

<div>
  <ul>
    <li>宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('div').css('color','red');
});

.find()

指定した要素の子孫要素を取得します。以下の場合、div要素内のul要素内のclass属性「one」を持つli要素の文字色が赤色になります。

このとき、もしも.find('#japan')にしていたら、全ての文字色が赤色になります。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('div').find('.one').css('color','red');
});

.parent()

指定した要素の親要素を取得します。以下の場合、class属性「one」を持つli要素の親要素であるul要素内の文字色が赤色になります。

.parent()←このように引数を省略して記述しても、親要素全てを選択したことになるので文字色が赤色になります。先祖要素は選択できないので、.parent('div')にしても何も選択されません。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').parent('ul').css('color','red');
});

.children()

指定した要素の直下にある子要素を取得します。以下の場合、ul要素内のclass属性「one」を持つli要素のみ文字色が赤色になります。

.children()←このように引数を省略して記述すると、ul要素内の全ての子要素の文字色が赤色になります。.find()と違い、子要素しか選択できないので、セレクタをulではなくdivにしてしまったら、何も選択されません。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('ul').children('.one').css('color','red');
});

.text()

要素の文字列を変更または取得します。

以下の場合、class属性「four」を持つli要素の文字列がサザンオールスターズに変更になります。

HTML

<div>
  <ul id="japan">
    <li>宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li class="four">Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.four').text('サザンオールスターズ');
});

.html()

要素のHTMLを変更または取得します。.text()と違い、文字列だけではなくhtmlタグを含むことができます。

以下の場合、class属性「four」を持つli要素がa要素を含むサザンオールスターズという文字列に変更になります。

HTML

<div>
  <ul id="japan">
    <li>宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li class="four">Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.four').html('<a href="#">サザンオールスターズ</a>');
});

.prepend()

指定した要素内の先頭に新たな要素を追加します。

以下の場合、class属性「one」を持つli要素内の先頭に「First Love - 」という文字列が追加されます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').prepend('First Love - ');
});

htmlコンテンツも追加できるので、以下の場合、「First Love - 」と書かれたa要素が追加されます。

jQuery

$(function(){
  $('.one').prepend('<a href="#">First Love - </a>');
});

.append()

指定した要素内の末尾に新たな要素を追加します。以下の場合、class属性「one」を持つli要素内の末尾に「 - First Love」という文字列が追加されます。

こちらも.prepend()同様、htmlコンテンツを追加できます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').append(' - First Love');
});

.before()

指定した要素の前に新たな要素を追加します。prependは対象要素内の先頭に要素を追加しますが、beforeは対象要素の外側の先頭に追加されます。

以下の場合、class属性「one」を持つli要素の前にli要素の「サザンオールスターズ」という文字列が追加されます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').before('<li>サザンオールスターズ</li>');
});

.after()

指定した要素の後ろに新たな要素を追加します。appendは対象要素内の末尾に要素を追加しますが、afterは対象要素の外側の後ろに追加されます。

以下の場合、class属性「one」を持つli要素の後ろにli要素の「サザンオールスターズ」という文字列が追加されます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').after('<li>サザンオールスターズ</li>');
});

.remove()

指定した要素を削除します。

以下の場合、class属性「one」を持つ要素が削除されます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').remove();
});

.empty()

指定した要素内の内容（子孫要素や文字列など）を削除します。以下の場合、class属性「one」を持つ要素内の文字列「宇多田ヒカル」のみが削除されます。

内容が削除されるだけなので、li要素自体は残っています。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

jQuery

$(function(){
  $('.one').empty();
});

.addClass()

指定した要素にclassを追加します。以下の場合、class属性「one」を持つli要素をクリックすると、その要素にclass属性「change」が追加されます。

addClassの引数（以下の場合changeの前）に、ドットを入れないように注意してください。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

CSS

.change{
  color: red;
}

jQuery

$(function(){
 $('.one').click(function(){
    $(this).addClass('change');
  });
});

.removeClass()

指定した要素のclassを削除します。

以下の場合、class属性「one」を持つli要素をクリックすると、その要素にあるclass属性「change」を削除します。

HTML

<div>
  <ul id="japan">
    <li class='one change'>宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

CSS

.change{
  color: red;
}

jQuery

$(function(){
 $('.one').click(function(){
    $(this).removeClass('change');
  });
});

.toggleClass()

指定した要素にclass名が無ければ追加、あれば削除します。以下の場合、class属性「one」を持つli要素をクリックすると、その要素にclass属性「change」が無ければ追加されます。

反対に、その要素にclass属性「change」があれば削除されます。

HTML

<div>
  <ul id="japan">
    <li class="one">宇多田ヒカル</li>
    <li>B'z</li>
    <li>安室奈美恵</li>
    <li>Mr.Children</li>
  </ul>
</div>

CSS

.change{
  color: red;
}

jQuery

$(function(){
 $('.one').click(function(){
    $(this).toggleClass('change');
  });
});

まとめ

最初の方でお伝えした通り、まだまだ他にもメソッドはあります！

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。