利用者:Senseequal/jQuery

インストール[編集]

[1]

PRODUCTIONを選択し、jquery-1.3.2.min.jsをダウンロードし、サーバにアップロードして使います。

jQueryのコードは圧縮されています。DEVELOPMENTは圧縮されていないバージョンで、コードを読み解く際に使います。

document.getElementById...[編集]

すべて$()を使います。

$('#submit'); # id="submit"
$('div'); # <div></div>
$('p.note'); # <p class="note></p>

これらはすべてjQueryオブジェクトを返します。

たとえば、id="copyright"のテキストを変えるには、

$('#copyright').text('All text is available under the terms of the CC-BY-SA 3.0');

とします。

window.addEventListener('load', ...[編集]

$(function(){
    # loaded
});

とします。ターゲットをしぼるには、

$('#target').ready(function(){
    # id="target" loaded
});

とします。

最初の例の代わりに

$(document).ready(function(){
    # loaded
});

とすることもでき、こちらの方がわかりやすいとの意見もありますが、少々古い方法です。

メソッドチェーン[編集]

Perlでは当たり前のことだが、メソッドはオブジェクトを返す。

したがって、メソッドをつなげることができる。

$(function(){
    $('p').html('<strong>せまりくる青文字</strong>').css('color', 'blue').animate({ font-size: '200%' }, 5000); // 5秒かけてfont-sizeを200%に
});

こっちのほうが見やすいです。

$(function(){
    $('p')
        .html('<strong>せまりくる青文字</strong>')
        .css('color', 'blue')
        .animate({ font-size: '200%' }, 5000); // 5秒かけてfont-sizeを200%に
});

なめらかなスクロール[編集]

[2]

jQueryプラグインScrollToを使います。

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-scrollTo-min.js"></script>

おそらくこんな感じでしょう。

// 1秒かけてスクロール
$.scrollTo('#top', { speed: 1000, axis: 'y', queue: true });

Ajax[編集]

XMLHttpRequestオブジェクトを生成して、GETして、readystatechangeをaddEventListener()して...

といったわずらわしい処理を、3行で済ませることができます。

$.get('./log.txt', null, function(data){
    $('#log').text(data);
});

引数を与えるには、

$.post('./log.txt', { line: 10, charset: 'UTF-8' }, function(data){
    $('#input').val(data);
});

エラー処理など高度な処理をするには、

$.ajax({
    type: 'GET',
    url: '/getwikipedia.cgi',
    data: {
        lang: 'ja',
        title: 'JQuery'
    },
    dataType: 'xml',
    error: function(res){
        $('#stderr').text(res.status);
    },
    success: function(xml){
        var body = $('#bodyContent', xml).text();
        $('#stdout').text(body);
    }
});

高機能で汎用のajax()メソッドを使います。

OS/ブラウザ間の実装差[編集]

jQueryがすべて吸収してくれるはずです。開発者はそれを共通のインタフェースで、洗練された略記構文を駆使して簡単に書くことができるのです。便利なメソッド、追加プラグインの集合体。ウェブアプリケーション開発には欠かせません。