Introducing jQuery

Takeshi Takatsudo (mail) @2010.06.19

はじめに

jQueryって何

なぜjQueryはイケてるのか

プログラム書く流れ

JavaScriptに限らず、大体こんな感じ。

APIとかフレームワークとか知らん

大丈夫です。

開発環境を揃える

console.log(something);

jQueryの超基本

とりあえずjquery読み込ませる

<script type="text/javascript" src="jquery.js"></script>

これで準備OK

超簡単なサンプル

$('#sample1').hide();
$('#sample1').show();
$('#sample1').fadeOut();
$('#sample1').fadeIn();
<div id="sample1"></div>

$ ←これjQuery

jQueryはこんな風に動く

なんか取ってくる
それに何かする

あとは組み合わせ。

さっきの例

$('#sample1')

sample1というidが付いた要素を取ってきて…

$('#sample1').hide(); // 隠す
$('#sample1').show(); // 表示させる
$('#sample1').fadeOut(); // フェードアウト
$('#sample1').fadeIn(); // フェードイン

それに何かする。jQueryがやるのは大体こんなこと。

jQuery使用前

$(犬)

ギャリック砲だけど

$(犬).show();
サイヤ人.かめはめ波();
jQueryObject.method();

なんか取ってくる

なんか取ってくる
それに何かする

その前に…

とりあえず初めにこれは覚えておく。

$(function(){
    $('#sample1').show();
});

JavaScriptでページ上の何かを操作するとき、ページの読み込みを待つ必要がある。上のコードを書くと、その中身は、ページの読み込みが完了したら実行される。

※これも本当はブラウザごとに色々問題があるんだけど、上のように書けばjQueryがうまくやってくれる!

どうやって?

セレクタ

基本的にCSSのソレと同じ。

$('#sample1').show(); // idがsample1な要素
$('.sample1').show(); // classがsample1な要素
$('div').show(); // div全部
$('*')show(); // 全要素

セレクタ

jQueryが頑張ってくれるのでIE6、7でも色々使えます。

$('.sample1[href=hoge]').show();
    // hrefがhogeでclassがsample1な要素
$('#sample1 > div').show();
    // #sample1直下のdiv
$('#sample1 + div').show();
    // #sample1の直後のdiv

セレクタ

jQuery独自のセレクタやCSS3も使える。

$('tr:even').show(); // 偶数番目のtr
$(':image').show(); //input[type=image]
$('input:disabled').show();
    // disabledになってるinput
$('.hoge:not(#foo)').show();
    // クラスがhogeでidがfooじゃない要素

要素横断 - find

$('.hoge').find('p').show();
<div class="hoge">
    <blockquote>
        <p>text text</p>
        <p>text text</p>
    </blockquote>
    <p>text text</p>
    <p>text text</p>
</div>

要素横断 - children

$('.hoge').children().show();
<div class="hoge">
    <blockquote>
        <p>text text</p>
        <p>text text</p>
    </blockquote>
    <p>text text</p>
    <p>text text</p>
</div>

要素横断 - prev

$('#hoge').prev().show();
<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - next

$('#hoge').next().show();
<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - parent

$('#hoge').parent().show();
<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - chaining

$('#hoge').parent().parent().show();
<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - 変数に保存

var blockquote = $('#hoge').parent();
blockquote.parent().show();
<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

変数に保存してそこから探すのも可能。

まとめ

それに何かする

なんか取ってくる
それに何かする

何ができるの?

スタイルを変更する

CSSのプロパティ名と値を指定するだけ。

<div></div>
<div class="hoge"></div>
<div></div>
$('div.hoge').css('border','4px solid red');

スタイルを変更する

ストライプのテーブルもできたり。

商品A 100万円 すごいいい 買わないとだめ 人生損する
商品B 200万円 すごいいい 買わないとだめ 人生損する
商品C 80万円 すごいいい 買わないとだめ 人生損する
商品D 30万円 すごいいい 買わないとだめ 人生損する
商品E 2万円 やばい 買わないとだめ 人生損する
$('#productTable tr:odd td').css('background','#777');

スタイルを変更する

よく使うのはショートカット的なメソッドがある。

<div id="box"></div>
$('#box').width(400); //≒.css('width',400)
$('#box').height(200); //≒.css('height',200)

pxは勝手に補完してくれたりもする。

スタイルを変更する

表示、非表示も。

<div id="box"></div>
$('#box').show(); //≒.css('display','block')
$('#box').hide(); //≒.css('display','none')

spanだったら none ⇔ inline

スタイルを変更する

opacityとかIE未対応だけどうまくやってくれる。

<div id="box"></div>
$('#box').css('opacity',0.3);

#代わりにfilter使ってる。

内容を変更する

要素の中のテキスト変更

棚から
$('#box').text('ぼたもち');

内容を変更する

要素の中のhtml変更

$('#box').html('<img src="imgs/memeta.gif" alt="" />');

内容を変更する

要素の属性を変更

$('#img').attr('src','dog.jpg');

内容を変更する

ショートカット。

pikachu
$('#box').addClass('hoge');
$('#box').removeClass('hoge');

アニメーション

フェード

$('#box').fadeIn();
$('#box').fadeOut();

アニメーション

スライド

$('#box').slideDown();
$('#box').slideUp();
$('#box').slideToggle();

アニメーション

数値の値をとるCSSプロパティなら動かせる。

div
$('#box').animate({
    'left' : '400px',
    'top'  : '100px'
});

動かす

append(後ろに加える)

div#hoge
div#fuga
var hoge = $('#hoge');
var fuga = $('#fuga');
hoge.append(fuga);
fuga.appendTo(hoge); でも同じ

動かす

prepend(前に加える)

div#hoge
div#fuga
var hoge = $('#hoge');
var fuga = $('#fuga');
hoge.prepend(fuga);
fuga.prependTo(hoge); でも同じ

まとめ

なんか作る

なんか取ってくるなんか作る
それに何かする

なんか作る

要素を作って足す

div#hoge
var div = $('<div>divだよー</div>');
$('#hoge').append(div);

まとめ

イベント

イベントは超重要

ページ上でJavaScript使う時って、
大体、クリックなりなんなりされて動かすことが多い。

何かが起こった時にスクリプトを実行させる仕組み

クリック click

さっきからボタンで使ってますけど…

-
div#box
$('#box').click(function(){
    $('#result').text('クリックされた');
});

マウスオーバー mouseover

マウスがのった時

-
div#box
$('#box').mouseover(function(){
    $('#result').text('マウスのった');
});

マウスアウト mouseout

マウスがのった時

-
div#box
$('#box').mouseout(function(){
    $('#result').text('マウスおりた');
});

フォーカス focus

フォーカスされた時

-
$('#input').focus(function(){
    $('#result').text('focusされた');
});

ブラー blur

フォーカスが外れた時

-
$('#input').blur(function(){
    $('#result').text('フォーカスはずれた');
});

イベントとthis

この中(イベントハンドラ)のthisは、イベントが起こった要素

div.box
div.box
div.box
div.box
div.box
div.box
div.box
div.box
div.box
div.box
$('div.box').click(function(){
    $(this).css('background','red');
});

# 犬がサイヤ人化

その他色々

作ってみよう!の前に…

他の機能の一例を紹介します。
JavaScriptを普段書かない人にはしっくりこない内容かもしれませんが、頭の隅にでも置いておいてください。

値の取得

値をセットするメソッドは、大体、値の取得もできる。

$('#hoge').attr('src','hoge.gif');
var foo = $('#hoge').attr('src');
console.log(foo); // hoge.gif
$('#hoge').height(300);
var foo = $('#hoge').height();
console.log(foo); // 300

$(hoge).each

各要素についてループできる。thisは今の要素を指す。

本日は
晴天なり
マイクテスト
あーあー
$('div.box').each(function(){
    var text = $(this).text();
    alert(text);
});

$.each()ってのもある。こっちはただの配列もループ処理できる

$(hoge).is()

$(hoge)を、セレクタで評価。

$('#box').is('div');
    // divか? true
$('#box').is(':hidden');
    // 隠れているか? true
$('#box').is('.foo');
    // classにfooがあるか? true
$('#box').is(':checked');
    // チェックされているか? true
$('#box').is(':animated');
    // アニメーション中か? true

他にもたくさんの機能があります

この他にも便利な機能がたくさんありますが、これ以上は、具体的に手を動かしながら覚えて行った方が良いでしょう。

ググるのもよいですが、本家のドキュメント、および、日本語リファレンスを参照し、正確な使い方を把握するのがオススメです。

作例

これを作ってみます。

Home Product FAQ Contact

ふわっと(手抜き)ロールオーバー

どうやってゼロから完成に達する?

用意されたものをどうにか組み合わせてみる。
「動く」状態をキープさせながら徐々に書く。
結局のところ、試行錯誤してみるしかないが、とりあえずここでは以下のような考えのもとに完成できたと仮定します。

  1. opacityが使えるかも?
  2. とりあえず1個でやってみる
  3. 複数でやってみる
  4. each
  5. アニメーションできるか?
  6. 完成!

1. opacityが使えるかも?

opacity変えるとなんか薄くなりますよね?

Home Home Home Home
$('#menu1').css('opacity',0.9);
$('#menu2').css('opacity',0.7);
$('#menu3').css('opacity',0.5);
$('#menu4').css('opacity',0.3);

あーなんか半透明になるかもねー

2. とりあえず1個でやってみる

イベントって使えるんじゃないかこれって。

Home
var a = $('#menu1');
a.mouseover(function(){
    a.css('opacity', 0.5);
});
a.mouseout(function(){
    a.css('opacity', 1);
});

3. 複数でやってみる

クラスにすればこれって… あ…

Home Product FAQ Contact
var a = $('a.menu');
a.mouseover(function(){
    a.css('opacity', 0.5);
});
a.mouseout(function(){
    a.css('opacity', 1);
});

4. each

1個ずつ個別に処理するときはあれじゃだめっぽい

Home Product FAQ Contact
$('a.menu').each(function(){
    var a = $(this);
    a.mouseover(function(){
        a.css('opacity', 0.5);
    });
    a.mouseout(function(){
        a.css('opacity', 1);
    });
});

5. アニメーションできるか?

あ、もしかしてこれanimateってやつで動きます?

Home Product FAQ Contact
$('a.menu').each(function(){
    var a = $(this);
    a.mouseover(function(){
        a.animate({ opacity: 0.5 });
    });
    a.mouseout(function(){
        a.animate({ opacity: 1 });
    });
});

6. 完成!

Home Product FAQ Contact

しかしこれでも早くマウス動かすと動きが微妙。

そーいったことをどうするか、もっとアニメーションの機能を調べたり、もっと別の方法が無いかとか、そーいう感じでブラッシュアップを続けましょう。

どんどん書こう

JavaScriptが書けるということは
どういうことか?

まー自分が偉そうに言えたことじゃないですけど…

知識+アイデア=自分のコード

コードとはただ単にアイデアが具現化したもの。
JavaScriptが書けるようになりたいという人は
何をどうしたいんでしょう?
とりあえず書いてみることから始めましょう。

ロールオーバーの例

どうすればさっきのロールオーバーが作れる?
あれが作れるという発想に至る?

じゃあちょっと書いてみようかなとでも思う。

アニメーションの例

jQueryのanimationだのfadeInだの

どっかのスゲー人がこれを使いやすいように書いて、それがライブラリになってるってだけ。複雑なものは単純なものの組み合わせなだけ。

素敵なコードを書くために

コーディングを楽しめるということ

が重要だと思います。

jQueryはJavaScriptのコーディングを楽に、楽しくします。
どんどん色々書いてみましょう!

終わり

/

See also...


0 / 0