jQuery勉強中

JavaScriptは、現在のWebページではなくてはならない存在です。
「Webブラウザに依存する点がある」という難しさがありますが、その点を解決するためのライブラリがいろいろ出回るようになって、以前よりもかなり便利になりました。

そのようなライブラリの中で「jQuery」は人気があるものの1つです。
遅ればせながら、私もjQueryを調べ始めました。

jQueryはJohn Resig氏が開発したライブラリで、コンパクトでありながら強力なところが魅力です。

1.CSSライクな要素操作

jQueryの特徴として、CSSのセレクタのような書き方で、HTML内の要素を柔軟に扱える点があげられます。
DOMで書くと長くなるような処理を、jQueryだと簡潔に書くことができることが多いです。

例えば、「『hide』のクラスが指定された要素を非表示にする」という場合だと、以下のように簡潔に書くことができます。

$('.hide').hide();

また、「IDが『msg』の要素の子要素のうち、『hello』のクラスが割り当てられている要素の前に、『<span>hello, </span>』のHTMLを挿入する」という場合だと、以下のように書くことができます。

$('#msg').children('.hello').before('<span>hello, </span>');

2.Ajax

jQueryは、Ajaxにももちろん対応しています。
get／postでサーバーと通信してデータを取得し、処理を行うことができます。

以下の例は、当ブログのatom.xmlを読み込んで、そこから記事の一覧を作り、「#entries_list」というIDの要素に表示するものです。
XMLの要素もjQueryの作法で扱うことができるので、DOMで書くよりも楽になります。

$('#entries_list').html('しばらくお待ちください。... <img src="http://www.h-fj.com/blog/pic/loading.gif">');
$.get(
    'http://www.h-fj.com/blog/atom.xml',
    function(xmldata) {
        var i, j, entry, url, title;
        var data = $(xmldata);
        var entries = data.children('feed').children('entry');
        var html = '<ul>';
        for (i = 0, j = entries.length; i < j; i++) {
            entry = $(entries[i]);
            url = entry.children('link').attr('href');
            title = entry.children('title').text();
            html += '<li><a href="' + url + '">' + title + '</a></li>';
        }
        html += '</ul>';
        $('#entries_list').html(html);
    },
    'xml'
);

3.プラグインによる拡張

jQueryには、プラグインで拡張を行えるという特徴もあります。
jQueryのサイトにプラグインのページがありますが、そこには多数のプラグインが登録されています。
それらを利用すると、さまざまな処理を行うことができます。

プラグインはまだこれから調べるところですが、面白そうなプラグインが多数あります。
ぜひ試してみたいです。