jQueryの基本を学ぼう

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

アニメーションを実装する際によく使用される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の技術は本当に進化が早いですね。。

    Railsでのデータ取得の基本前のページ

    railsでのカラム操作次のページ

    関連記事

    1. プログラミング

      Dockerとは

      こんにちは、まくロロです。最近インフラ周りに興味が出てきて、今後do…

    2. プログラミング

      railsのincludesメソッドで関連しているデータを取得する

      こんにちは、まくロロです。申請していたアドセンスがついに通りました!…

    3. プログラミング

      railsでのカラム操作

      こんにちはまくロロです。今回はrailsでカラムの追加、削除、などの…

    4. プログラミング

      Goの基本文法を覚えよう

      今後は、少しづつ技術系記事を増やして行こと思っています。変数…

    5. プログラミング

      GCPの基本概要

      今回はGCP(Google cloud platform)について基…

    6. プログラミング

      Railsでのデータ取得の基本

      今回はRailsでデータ取得しようということで、DBに保存されている…

    コメント

    1. この記事へのコメントはありません。

    1. この記事へのトラックバックはありません。

    最近の記事

    PAGE TOP