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

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

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

    2. プログラミング

      未経験エンジニア学習順序【アプリリリースまで】

      こんにちはまくロロです。今回は、未経験から一人でサービスをリ…

    3. プログラミング

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

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

    4. プログラミング

      【エンジニア】サービス開発とアルゴリズムは別物?

      こんにちはまくロロです。今回は「サービス開発とアルゴリズムは別物であ…

    5. プログラミング

      これから伸びる言語Golangを習得しよう。

      こんにちは、まくロロです。私は現在、主にrailsを使用した…

    6. プログラミング

      kubernetes(k8s)とは

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

    コメント

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

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

    最近の記事

    PAGE TOP