どうもまりぞーです。 jQueryへ入門したい初心者さん向けに、簡単な使い方やデモなどをご紹介します。 第1回目となる今回は、まずはjQuery本体をダウンロードして、HTMLで読み込み、実際に動作するか試してみます。 簡単なデモもあります。

目次

jQueryとは

Javascript をお手軽に扱えるようになるライブラリです。 詳しく知りたい方は公式のjQuery Learning Center (英語)を参考にしてください。

ダウンロード

jQueryをダウンロードしてきます。 jQuery

Download jQuery

画面右側の「Download jQuery」ボタンをクリックします。

jQuery ダウンロード

jQueryには現在2種類あります。お好みの方を選び、リンク先のファイルを保存します。

  • jQuery 1.x 初期のjQuery。結構古いブラウザにも対応しなければならない、大人の事情がある場合はこちら。
  • jQuery 2.x 新しいjQuery。IE6~8では動作しませんが、2016年1月12日以降はIE8までのサポートがなくなったので、大人の事情が特に無い場合はこちら。

読み込み

なにかHTMLファイルを用意します。

</body>の直前くらいで、ダウンロードしたjQueryファイルを読み込みます。 jQueryを読み込んだ後に、実行する処理を記述します。 上記の場合は別途ファイル super_omochi.js を用意しています(なんでもいいです)。

書き方

super_omochi.js に処理を記述していきます。

処理の内容に関しては後日改めて触れるとして、とりあえずこういうことができますよーという感じのデモを用意しています。

DEMO 01 : class「demo01_trigger」を持つ要素「ぬ」をクリックしたときにアラート「ぬふ」を出す

 

DEMO 02 : class「demo02_trigger」を持つ要素「ぬぬんがぬ」をクリックしたときに、配色を変更するclass「toggle_color」を切り替える

 

まとめ

以上、ざっくりではありますがjQuery入門、第1回目でした。 次回はセレクタについてです。おたのしみに…ぐふふ。

第2回目はこちら。 【jQuery入門 2】セレクタって何?要素を取得しよう。基本編

あわせて読みたい記事