2016/7/23

jQuery(Zepto)を使おう

どうも、クラゲです。
ここではjQueryについて解説します


https://jquery.com/


http://zeptojs.com/

【 大まかな流れ 】

  • jQueryとは？
  • 軽量版のZeptoを使う
  • jQueryの読み込み
  • jQueryの書き方
  • jQueryの例

jQueryとは？

長たらしい記述が短く書けるようになるJavaScriptのライブラリです。
主にDOMやAjaxなどでよく使われます。
DOMはDocument Object Modelの略で、例えばJavaScriptからHTMLで表示されている文字列を変更することができる機能です。
DOMのもう一つの例としてよく使われるのはアニメーションです。例えば伸びる棒グラフや動き回る画像なんてのもjQueryを使えば簡単に記述できます。
AjaxとはAsynchronous JavaScript + XML　というややこしい用語の略です。GETやらPOSTやらHTTP通信が必要になったときにお世話になります。

軽量版のZeptoを使う

jQueryは元々PCを意識して作られたライブラリで、スマートフォンに取ってはやや重いです。
そこでスマートフォン向けのjQueryライブラリとして、軽量でサイズの小さいZeptoが人気です。
konashi.jsのサンプルプログラムを探すとZeptoがよく使われていますので、ここでもZeptoを使うことにしましょう。
ちなみに、Zeptoで使えるメソッドはjQueryでもそのまま使えますので安心してください

jQuery読み込み

1行で簡単に読み込めます

<script src="http://zeptojs.com/zepto.min.js"></script>

jQueryの書き方

$マークがあるので一瞬難しく見えますが、実は簡単です
AをBする　という意味になります

$("A").B();

jQueryの例

１例を紹介します。
jQueryを使わないときの記述

document.getElementById('helloWorld').innerHTML = "Ready";

jQueryを使ったときの記述

$("#helloWorld").text("Ready");

こちらに全体の例を貼っておきます

※※※ jsdo.itは 2019/10/31 を持ちまして終了いたしました。※※※

この例ではちょっと短くなっただけですが、アニメーションやAjaxなどではかなり効果を発揮するので、これからはjQueryを使って記述してゆきます。
以上、jQuery(Zepto)を使おうでした。