jquery使い方まとめ【入門から実践編まで】

2021年1月12日

今回はjqueryの操作や使い方をまとめて解説していきたいと思います。

現在ではjqueryはwordpress(ワードプレス)でwebサイトを作る際に使うのが主流となっており

ワードプレスでも動作するように改良を加えています。

スポンサーリンク

jquery使い方まとめ【入門から実践編まで】

基本

jqueryで動的な操作を行う場合jQuery(function(){内でスクリプトを記述する

要素を指定する場合$(要素)で指定する

ワードプレスの場合$が使えないので$をjQueryに変更すると問題なく動作する

jQuery(function($){と記述すれば{}内でのみ$で要素を指定できる

セレクタ

$()内で取得する要素をセレクタと呼びます

css操作

#はid.はclassで指定する

pはh1やh2以外の文字列で

<?php the_content();?>の場合コンテンツ内の文章は全てpとなる

クリックイベント

要素をクリックした場合イベント操作で途中からcssのデザインなどを変更することができる

p要素を指定するとp要素全体が指定対象となる

クリックイベントのサンプル

クリックしてください

this

クリックイベントなどでクリックしている要素単体を指定したい場合に使う

thisサンプル

マウスオーバーしてください

トラバース

トラバースは例えばクリックされた要素の色を変更した後

別の要素をクリックした場合前の要素の色を元に戻す操作です。

操作を映り変える設計となっています。

findクラス

セレクタの子孫や親を全て取得する

この場合td全てを選択している

closestクラス

自身の親を取得する

tdの親となるクラスを取得する

トラバースサンプル

ヘッドヘッドヘッドヘッド
テーブルテーブルテーブルテーブル
テーブルテーブルテーブルテーブル
テーブルテーブルテーブルテーブル

文字列変更

サンプル

  • クリックしてください
  • クリックしてください
  • クリックしてください

ドロップダウンメニュー

メニューボタンをマウスオーバーしたらメニューを開きマウスが

そのリストのulとliから離れたらそのメニューを閉じます。

グローバルナビゲーションを作る際によく利用されています。

サンプル