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. プログラミング

      react-reduxの基礎

      こんにちは、マクロロです!季節も巡り、もうすぐ夏がきますね。。…

    2. プログラミング

      サーバーの種類について学ぼう

      こんにちはマクロロです。今回はサーバーの種類について簡単に基礎を習得…

    3. プログラミング

      kubernetes(k8s)とは

      こんにちは、まくロロです。先日とある企業さんのk8sハンズオンに参加…

    4. プログラミング

      Dockerとは

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

    5. プログラミング

      railsにreactを導入してみよう

      最近、自分で作っているポートフォリオがあるのですが、フロントをオシャ…

    6. プログラミング

      RailsからGolangを習得する際の壁

      こんにちはまくロロです。今回はRailsからGolangを習得する際…

    コメント

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

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

    最近の記事

    PAGE TOP