jQuery基礎 基本的な使い方【保存版】
jQueryの基本的な使い方【保存版】
皆さんこんにちは、迅犬です。今回はjQueryの基本的な使い方を見ていきましょう。
jQueryの導入方法をまず知りたい！という方は以下の記事をご参照いただければと思います。
jQueryの基本構文
jQueryの基本的な書き方は以下の通りです。
==================================
$("セレクタ").メソッド
==================================
端的に言うと、
$("セレクタ")でHTML上の要素を指定して、
メソッドと呼ばれるもので、セレクタによって指定した要素に対して、jQueryの命令をかけてなんらかの操作をする。
という流れになります。
jQueryのお約束として覚える事
jQueryのコードは、大抵の場合、ページの読み込みが終わった後に実行したいため、以下のコード内に書く必要があります。（※例外有り）
==================================
$(document).ready(function(){
■ここにjQueryのコードを記述していく。
});
↓（※省略形として以下のように書いた場合でも同じ意味となります。）
$(function(){
■ここにjQueryのコードを記述していく。
});
==================================
上述したコードの内側にjQueryのコードを記述することにより、ページの読み込み後にjQueryのコードを読んでくれます。
jQueryの基本的なセレクタ
jQueryはセレクタと呼ばれるもので、要素を指定して、メソッドでなんらかの操作すると言いましたが、実際にどのように要素を指定するのか、セレクタについて少し詳しく見ていきましょう。
| 名称 | 特徴 | 書き方 | 効果 |
|---|---|---|---|
| 要素セレクタ | 単純に要素名から指定する | $("要素名") |
要素名に合致する要素を指定する |
| idセレクタ | id名から要素を指定する | $("#id名") |
指定したid名と合致する要素を指定する |
| classセレクタ | class名から要素を指定する | $(".class名") |
指定したclass名と合致する要素を指定する |
| 子孫セレクタ | 半角スペースで区切って子孫要素を指定する | $("A B") |
Aの子孫要素であるBを指定する |
| グループセレクタ | カンマで区切って複数要素を指定する | $("A,B") |
A要素及びB要素を指定する |
| 子セレクタ | 親要素と子要素を大なり記号で結んで親要素の直下の子要素のみを指定する | $("A>B") |
A要素の子要素Bを指定する |
| 隣接セレクタ |
Bの要素の中で、基準となるAの次に出現する要素Bを指定する（※Bは複数並んでいる兄弟要素） ※AとBは半角プラスで結ぶ。 |
$("A+B") |
Bという複数並んでいる要素の中で、基準となる要素Aの次に出現する要素Bを指定する（※Bは複数並んでいる兄弟要素） |
| 間接セレクタ |
Bの要素の中で、基準となるAの後続する要素Bすべてを指定する（※Bは複数並んでいる兄弟要素） ※AとBは半角チルダで結ぶ。 |
$("A~B") |
Bという複数並んでいる要素の中で、基準となる要素Aの後に出現する要素Bすべてを指定する（※Bは複数並んでいる兄弟要素） |
| first-child疑似クラス |
Aの中で最初の要素を指定する 要素の後にコロンで繋げてfirst-childを記述する |
$("A:first-child") |
要素Aの中で最初の要素Aを指定する |
| last-child疑似クラス |
Aの中で最後の要素を指定する 要素の後にコロンで繋げてlast-childと記述する |
$("A:last-child") |
要素Aの中で最後の要素Aを指定する |
| 否定疑似クラス |
特定の条件以外の要素Aを指定する 要素の後にコロンで繋げてnotと記述する ※特定の条件には擬似クラスを使用しても良い、例えば、li:not(:fisrt-child)と記述すると、最初以外のliを指定するといった具合になります。 |
$("A:not(特定の条件)") |
特定の条件以外の要素Aを指定する |
他にもたくさんの便利なセレクタが存在しますが、基本的には上記のもので対応できますので、必要になったら調べて使うといったやり方をオススメします。
例えば、アニメーション中の要素を指定できる$("要素A:animated")といったものや、指定した番号の要素を指定できる$("要素A:nth-child(番号)")、それから属性セレクタ等はよく使われますので是非覚えておきましょう。
セレクタに関してうまくまとめられているページがございましたので、より詳しく知りたい方は、以下のURLの記事を参考にするといいと思います。特に隣接セレクタ（+）、間接セレクタ(~)等は、使い方に一癖ありますので、実例を通して理解したほうが得策です。
【jQuery】要素を指定するセレクタの使い方 まとめ | Web制作会社スタイル
セレクタとメソッドを使って実際に操作してみよう
個人的に最も簡単なメソッドの例として、cssメソッドというメソッドを使って見ましょう。今回は、<p>という要素をセレクタで指定して、cssメソッドを使って文字色をredに変えてみたいとおもいます。ともあれまずは、cssメソッドの使い方を下記に記載しておきます。
==============================================================
■cssメソッドの使い方
$("セレクタ").css("プロパティ名","プロパティ値");
これは、セレクタにより指定された要素に対して、その指定された要素がもつプロパティ名のプロパティ値を、cssメソッドで指定したプロパティ値に変更する。という操作になります。また、
という風に、プロパティ名だけを指定すると、そのプロパティ値を取得することも出来ます。
==============================================================
では、実際にcssメソッドを使って、要素pに対して文字色をredに変えていきましょう。
$(function(){
$("p").css("color","red");
});
以上です。これにより、html上のp要素全ての文字色がredに変更されます。
このように、セレクタで要素を指定して、その指定した要素になんらかの操作をメソッドを使って加える。といった流れが、jQueryの基本的な使い方となります。
是非皆さんも、この基本を押さえつつ、これから色々なメソッドやセレクタを学び、jQueryを使って、リッチな動的コンテンツをwebサイトに組み込めるようになることを祈っております。では、また次回( ˘ω˘)
