× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】jQuery入門 (全22回)

最新版のレッスンはこちらから » 【最新版】jQuery入門 (全20回)

JavaScriptをより簡単に扱うために必要となる言語です。さまざまなプラグインと組み合わせて使うことでウェブサイトに多彩な機能や効果を盛り込むことができます。

このレッスンでは jQuery 1.7.2 を使用しています。

#01 jQueryとは何か?
1602日前
jQueryは比較的よくバージョンアップします。
バージョンアップしたjQueryを導入するとスクリプトの挙動が変わったり、動かなくなったりすることがありますので、バージョンアップの際にはきちんとサイト上での動作を確認するようにしましょう。
1618日前
jQueryの公式サイトはこちらになります。
http://jquery.com/
#04 セレクタを理解する
1385日前
table タグの直下に tr タグを記述していても、ブラウザによっては $('table>tr') というセレクタで取得できない場合があります。(最近のブラウザは特に)

<table>
  <tr><td></td></tr>
  <tr><td></td></tr>
</table>

これはブラウザが自動的に tbody タグを補間しているためです。

<!-- DOMはこのように構築されている -->
<table>
 <tbody>
  <tr><td></td></tr>
  <tr><td></td></tr>
 </tbody>
</table>

なので、そういった場合は $('table>tbody>tr') もしくは $('table tr') のようなセレクタで取得しましょう。
#05 もっとセレクタを理解する
1193日前
なお、:first、:last、:eqといったフィルターは次のようにメソッドで代用することもできます。

例えば動画中の
$('li:eq(2)').css('color', 'red');
は、
$('li').eq(2).css('color', 'red');
と書き換えることができます。

同様に、
$('li').first().css('color', 'red');
$('li').last().css('color', 'red');
といった指定も可能です。
#06 CSSを操作する
1600日前
CSSの基本的なプロパティについては、以下のレッスンをご覧ください。

CSS入門
http://dotinstall.com/lessons/basic_css
#07 クラスを操作する
1600日前
.addClass, .removeClass は、すでにその要素にそのclass名がついているかどうかを気にする必要なく使えるため便利です。

jQueryを使わずにJavaScriptでclassを操作しようとすると、そのあたりを気にする必要が出てくるため、若干面倒なことになります。
#08 値を操作する
1235日前
一方で要素の「属性値」を取得・セットするには .attr というメソッドを利用します。

http://api.jquery.com/attr/

// aタグのhref属性を取得する
$('a').attr('href');

// aタグのhref属性に http://dotinstall.com をセットする
$('a').attr('href', 'http://dotinstall.com/');

なお、.attr を使うとほとんどの要素の属性値をセットできますが、input要素のtype属性だけは値をセットすることはできない仕様となっています。
#09 クリックイベントを操作する
1193日前
「クリックした要素が何番目のものか」はindex()メソッドで取得することができます。
例えば以下のようなコードで、動画中の「1番」と書かれたli要素をクリックすると、「1」がコンソールに表示されます。
$('li').click(function() {
    var num = $(this).index();
    console.log(num);
});
1221日前
.click(function() { ... }) は .on で書き換えることもできます。

$('.listitem').click(function() {
    // ...
});

を .on を使って書くと、

$('.listitem').on('click', function() {
    // ...
});

となります。なお、 .on にはより多くの機能が備わっていますが、少々高度な内容となります。

.on() | jQuery API Documentation
http://api.jquery.com/on/
#10 クリックするたびに変化させる
1187日前
jQuery 1.9にて動画中の機能と同様のことを実現したい場合は以下のコードを参考にしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryの練習</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>jQueryの練習</h1>
    <div id="main">
    <p>これは練習です。こちらは、<a href="http://google.com/">リンク</a>です。</p>
    <ul id="menu">
        <li>0番</li>
        <li class="listitem">1番</li>
        <li class="listitem">2番</li>
        <li><a href="http://yahoo.com/">3番</a></li>
    </ul>
    </div><!-- /main -->
    <script>
        $(function() {
            // jQuery 1.9にて.toggleと同様の機能を実現
            var currentColor = 'black';
            $('.listitem').click(function() {
                if (currentColor == 'black') {
                    currentColor = 'blue';
                } else {
                    currentColor = 'black';
                }
                $(this).css('color', currentColor);
            });
        });
    </script>
</body>
</html>
1216日前
toggleメソッドですが、jQuery 1.9で仕様が変更され、「ある要素の表示・非表示を切り替える」という用途のみに機能が限定されました。
動画中のように「あるfunctionとあるfunctionを交互に実行する」という機能はなくなりましたのでご注意ください。
詳しくは公式サイトの説明をご覧ください。
http://api.jquery.com/toggle/
#13 表示したり隠したり
1402日前
要素の表示や非表示には、フェードイン効果をつけられる .fadeIn() や、フェードアウト効果をつけられる .fadeOut() といったものもあります。

Effects – jQuery API
http://api.jquery.com/category/effects/

fadeIn() / fadeOut() は【「このページの先頭へ」を実装する】のレッスンでも利用しているのでご参考にどうぞ。
http://dotinstall.com/lessons/scroll_js
#14 要素を作成・追加する
1322日前
jQuery の append() は返り値が呼び出し元の jQuery オブジェクトになるので、次のようなメソッドチェーンによって #menu の子要素に連続して追加することができます。

$('#menu')
  .append( $('<li>4番目</li>') )
  .append( $('<li>5番目</li>') );

JavaScript の appendChild() との違いについてはこちらを参照してください。
http://dotinstall.com/lessons/basic_javascript_tips/2123
1392日前
.append() とよく似たメソッドに .appendTo() があります。

// .appendTo() を使って $a を $b に追加する場合
$a.appendTo($b);

// 同じ処理を .append() で書くと...
$b.append($a);

このように .append() と .appendTo() は対象が逆になります。

ある要素を jQuery で作ってそのまま何かの要素に追加するという時には、
メソッドチェーンで .appendTo() を使うと手短に書けたりします。
#17 要素を探索する
1388日前
jQueryには兄弟要素の取得ができる .siblings() という命令もあります。

/**
 * li 要素がクリックされたら、自分自身に class="on" をつけ、
 * 兄弟要素からは class="on" を取り除くという処理
 */
$('li').click(function() {
  $(this).addClass('on').siblings().removeClass('on');
});

なお、 .siblings() で取得される要素は兄弟要素なので、自分自身は含まれません。
1400日前
.children() は1段下の子要素のみ探索します。もしそれより下の子孫要素も辿りたい場合には .find() を使います。

同様に .parent() は1段上の親要素のみ探索するので、それ以上上の先祖要素を辿りたい場合には .parents() を使うようにしましょう。

http://api.jquery.com/category/traversing/tree-traversal/
#18 Ajaxとは何か?
1305日前
Ajax では通常は同一ドメイン上のスクリプトしか読み込めませんが、外部サイトから読み込まれることを前提にした API の中には、異なるドメインからでも読み込めるものもあります。

たとえば YouTube の API はどのドメインからでも読み込みが許可されているので、次のように $.get でロードすることができます。

$.get('http://gdata.youtube.com/feeds/api/videos/-/Comedy?alt=json', {}, function(res) {
  console.log(res);
});
#22 Ajaxで動的にページを更新する (3)
1449日前
なお、このプログラムが動作するにはPHPが正常に動いている必要があります。文字数が表示されずに[object XMLDocument]となった場合は特にその可能性が高いのでご注意ください。