macroroblog

こんにちは、まくロロです。

アニメーションを実装する際によく使用されるJQueryの基礎について学びまじょう。

jQueryとは

jQueryとは一言で言うとjavascriptのライブラリです。jsよりも描きやすいコード設計であることが特徴です。普通にjsで書いたら何十行と書かなければならないことも、jQueryを使えば数行でかけてしまうなんてこともあります。

主にできることは、html、cssを動的に扱うことですね。DOMの概念もjQueryでは使います。

DOM(document object model)の説明を簡単にすると、htmlの要素をそれぞれをオブジェクトとして捉えて、操作する仕組みのことです。

図で考えるとわかりやすいですね。。今回説明すると長くなりそうなので、、近々、domと仮装domの違いみたいな記事を書きたいと思います。

具体的にできることは、ボタンを押したら、そのボタン色が変わったり、マウスが乗ったら、アニメーションが動作したり。実践的なことで言うと、フォームの利用規約ボタンにバリデーションをつけたりなどです。

jQueryの使い方

まず、覚えるべきは、jQueryを使った処理の実行の流れです。

基本この流れを覚えておけばjQueryで行なっていることの流れは掴めると思います。

例えば、下のコードを例にすると

<p id="hoge">クリックするとクリックされましたと表示されます</p>

上の文字列をクリックすると「クリックされました」とテキストが変更されるみたいな処理です。

$(function() {
  function('#hoge').click(function() {
    $(this).text('クリックされました！');
  });
});

では、基礎的なjqueryメソッドを見ていきましょう。

よく使うメソッド

addclass

クラスを追加する

attr

要素の属性を取得したり、変更したり、設定する

prop

要素の属性を取得したり、変更したり、設定する

change

要素が変更されたら、イベントを発生させる

click

要素をクリックしたイベントを起こす

hide

指定した要素を非表示にする

is

セレクターに一致するかどうかを判定する（boolean）

removeClass

クラスを削除する

show

非表示の要素を表示する

text

指定した要素を取得、追加、変更する

toggle

対象の要素を表示非表示にする。

まとめ

今回は簡単にjqueryの基礎的なことを書きました。しかし、ここまで書いて言いづらいですが、jqueryはもうモダンなライブラリではなくなってきていますね。

なので、これからjqueryを勉強するならvueやreactなどの方が良いと思います。webの技術は本当に進化が早いですね。。