[ プログラミング ] jQueryの基本

今更ながらなのですが、jQueryを勉強をしていてよく使用する基本的なことをまとめておきたいと思いました。

jQueryライブラリの読み込み

2014年1月現在、jQueryライブラリには1.10系と2.0系があります。このふたつのバージョンの違いは別のところに譲るとして、ひとつ注意点としては、2.0系はIE8以前では動作しないことを確認しておりますので、IE8以前も動作対象にするのであれば、1.10系を使用することをおすすめします。

jQueryライブラリは以下のサイトからダウンロードできます。

jQueryライブラリの読み込みですが、headタグ内にて、

HTML

<script src="js/jquery.min.js"></script>

というように同一サーバ内にあるjQueryライブラリを呼び出すか、

HTML

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

というように、Google AJAX Libraries APIというものを使用します。

jQueryの実行方法

jQueryを実行するには、以下のように記述します。

Java Script

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

これは以下の省略形のことを指します。

Java Script

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

その他、以下のような書き方をしている人もいます。

Java Script

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

Java Script

jQuery(function($) {
   // ここに処理を書く
});

Java Script

(function($) {
   // ここに処理を書く
})(jQuery);

例えば、他のjavascriptプラグイン「prototype.js」を併用した場合に、グローバルな「$」関数が干渉しあって上手く動作しなくなるのですが、上記のような書き方をすれば、jQueryの「$」関数がローカルなものとなり、グローバルな「$」関数よりローカルな「$」関数が優先して使用できるという寸法です。ややこしいですね。以下のblogページにて、このような書き方はどういう意味なのかを解説しています。

Java Script

$(function() {
   function 関数名() {
      // ここに処理を書く
   };

   関数名();

});

というように、関数名を設定して呼び出すこともできます。これは例えば、同じ関数を複数回呼び出す場合に有用です。

また、関数を変数に代入して使用することも可能です。

Java Script

$(function() {
   var 変数 = function(){
      // ここに処理を書く
   };

   変数();

});

あるいは、

Java Script

$(function() {
   var 変数 = function 関数名(){
      // ここに処理を書く
   };

   変数();

});

という書き方もできます。

ただし、関数を変数に代入した場合、関数を呼び出すには、その関数よりも下のほうに記述しないと呼び出せないので注意です。

プラグイン化

jQueryはプラグイン化することができます。こうしておけば、複数のセレクターを指定して実行することができます。また、個別に引数を指定することもできます。オプションを付けたい場合に便利です。

Java Script

$.fn.メソッド名 = function(config) {
   // オプション
   var 変数名 = $.extend({
      オプション1 : '値1',
      オプション2 : '値2',
      オプション3 : '値3'
   }, config);

  // ここに処理を書く
  // オプションで設定したものを使いたい場合は、
  // 変数名.オプション1
  // というように記述します。

};

//メソッドの呼び出し
$(function() {
   $('#セレクター').メソッド名({オプション1 : '値1',オプション2 : '値2',オプション3: '値3'});
});

1行目と7行目の「config」は任意の文字列です。同じ名前であれば何でも良いです。

セレクタの使い方

基本的なjQueryにおけるセレクタの使い方は以下のサイトに委ねることにして、少し特殊な使い方を紹介します。

親要素、子孫要素、兄弟要素の取得方法を覚えておけば、複数のプラグインを同一ページに設置することも可能となるので、是非覚えておきましょう。

親要素の取得

Java Script

$(this).parent('p').イベント名();

親要素のさらに親要素まで取得したい場合は、以下のように記述します。

Java Script

$(this).parents('p').イベント名();

子要素の取得

『.children()』は子要素しか取得できませんが、『.find』を使用すれば子孫要素全てが対象になります。

Java Script

$(this).children('p').イベント名();

Java Script

$(this).find('p').イベント名();

Java Script

$('p', this).イベント名();

兄弟要素の取得

Java Script

$(this).next('dd').イベント名();

Java Script

$('+dd', this).イベント名();

また、イベント名のところがアニメーションの場合は、連続して実行されると不都合な動作をする可能性があるので、『.stop()』や『:not(:animated)』を使用して、動作を制御する時があるのですが、その場合は以下のように記述します。

Java Script

$(this).next('dd:not(:animated)').イベント名();

Java Script

$('+dd:not(:animated)', this).イベント名();

他にも、親要素、子孫要素、兄弟要素を取得する方法はありますが、以下のblogページをご参考ください。

属性の変数化

よく使うid属性やclass属性は変数化すると便利です。また、複数のセレクタがあって、取得したい属性の値が変わる場合は、「.attr()」でid名やclass名を取得して、その前にidとして扱うなら「#」、classとして扱うなら「.」の文字を連結させます。

HTML

<div id="idname" class="classname"></div>

普通に属性を変数化する場合は、以下の方法で良いですが、

Java Script

var sel = $('#idname');
var sel = $('.classname');

複数のセレクタがあって、取得したい属性の値が変わる場合は、

Java Script

var sel = '#' + $(this).attr('id');
var sel = '.' + $(this).attr('class');

というようにします。

使うときは、

Java Script

$(sel).click(function(){
    // イベント
});

イベントの伝播解除・無効化

イベントは要素が入れ子になっていると伝播(バブリング)します。伝播(バブリング)とは、子要素のイベントが実行された時、それがトリガーになって親要素のイベントも自動的に実行されてしまうものです。そのため、伝播を解除したいときは以下のようにします。

Java Script

$('.event').click(function(e){
    e.stopPropagation();
});

イベントを無効化したい場合は「preventDefault();」と「return false;」を使用する方法がありますが、「preventDefault();」はイベントは無効化され、イベントの伝播は継続されますが、「return false;」はその記述以降のイベントを無効化し、イベントの伝播も解除されます。

Java Script

$('.event').click(function(e){
    // クリックの無効化
    e.preventDefault();
    // アラートは表示されます
    alert('イベント発動!');
});

Java Script

$('.event').click(function(){
    // 「return false」以降のイベントの無効化
    return false;
    // アラートは表示されません
    alert('イベント発動!');
});

これらの違いは、以下の記事にわかりやすく説明してあります。

$(this)の範囲

関数を入れ子にした際、$(this)の範囲というか、どこに記述した$(this)で取得した値が変わるので注意です。

例えば、以下のようにループさせた関数の中にクリックイベントを書くとすると、

Java Script

$(function() {
    return $('.target').each(function() {
        var $this1 = $(this);
        $('.event').click(function(){
            var $this2 = $(this);
        });
    });
});

この場合は、「$this1」の値は「.target」です。一方で、「$this2」の値は「.event」になります。このように、特に関数を入れ子にする際は、$(this)を変数化しておいたほうが混乱しなくてよいと思います。

よく使う書き回し

jQueryをコーディングしていると、だいたい同じようなことを記述していることが多いのでそのまとめです。

クリックイベント

Java Script

$('セレクタ').click(function () {
   // ここに処理を書く
});

1.7系以降であれば「.on()」を使って書くことも出来ます。

Java Script

$(セレクタ).on('click', function(){
   // ここに処理を書く
});

スクロールイベント

Java Script

$(window).scroll(function(){
   var selector = $('div');
   var offset = selector.offset().top;
   if($(this).scrollTop() > offset) {
      // ここに処理を書く
   } else {
      // ここに処理を書く
   }
});

1.7系以降であれば「.on()」を使って書くことも出来ます。

Java Script

$(window).on('scroll', function(){
   // ここに処理を書く
});

ウィンドウをリロードした際に処理をする

Java Script

$(window).load(function () {
   // ここに処理を書く
});

1.7系以降であれば「.on()」を使って書くことも出来ます。

Java Script

$(window).on('load', function(){
   // ここに処理を書く
});

イベント同時指定

クリックやロード、スクロールのイベントで同じ処理をしたいときは、

Java Script

$(window).on('click scroll load', function(){
   // ここに処理を書く
});

といったように「.on()」を使って、同時に指定することができます。

繰り返しイベント

Java Script

$('セレクタ').each(function () {
   // ここに処理を書く
});

リンクを無効化

Java Script

$('セレクタ').click(function () {
   // ここに処理を書く
   return false;
});

Java Script

$('セレクタ').click(function (e) {
   // ここに処理を書く
   e.preventDefault();
});

アニメーション中かどうかの判定

アニメーション中かどうかで処理を変えるときは以下のような書き方をします。

Java Script

if($('div').is(':animated')) {
   // ここに処理を書く
}

アニメーション時は動作無効

アニメーションが終わらないうちに別のアニメーションを走らせると不都合な動きをする場合があります。そこで、アニメーションしている間は他のアニメーションは動作させないようにする方法です。

Java Script

var $element =$(this);
$element.not(':animated').fadeIn();

また、このような書き方もできます。

Java Script

$('div:not(:animated)').fadeIn();

アニメーション中は一切の動作を無効にする場合は、以下のように書きます。

Java Script

if($('div').is(':animated')) {
   return false;
}