【jQuery入門】jQueryって何？
jQueryって何？
JavaScriptを便利に扱うためのライブラリのことです。
公式サイト
学習に必要な知識
HTML/CSS/JavaScript
学習に必要なツール
※私はAtomを使用しています。
ブラウザ
※GoogleChromeのデベロッパーツールが強力なため、GoogleChromeがおすすめです。
jQueryの読み込み方
jQueryですが公式サイトからjQueryをダウンロードして使用するか、Google、Microsoft、jQueryなどがサーバー配信しているものを使用する必要があります。それぞれの手順をみていきましょう。
・公式サイトからjQueryをダウンロードして使用する。
①公式サイト https://jquery.com/download/ にアクセスします。
②公式サイトの［Download］ページのjQueryの項目にダウンロード用のリンクがあります。productionとdevelopmentの２種類のリンクがありますが、productionが圧縮版でdevelopmentが非圧縮版となっています。どちらでもよいのでリンクを右クリックして［名前を付けてリンク先を保存］としてあげると「〇〇.js」というファイルをダウンロードできますので専用のフォルダを作成してその中にファイルを保存してあげてください。
⓷HTMLにscriptタグを記載します。（例では「js」という専用フォルダにdevelopment（非圧縮版）を保存した場合のコードとなります。）
<body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</body>
なお、script タグは自体、header タグの中、body タグの中のどこに書いても構いませんが、bodyの閉じタグの上に書くのが一般的なようです。
・Google、Microsoft、jQueryなどがサーバー配信しているものを使用する。
Google、Microsoft、jQueryなどがサーバー配信しているものがあり、それを使用することができます。HTMLにscriptタグを追加し、コードを記入するだけなのでダウンロード不要です。
①公式サイト https://jquery.com/download/ にアクセスします。
②公式サイトの［Download］ページにOther CDNsという個所があるのでスクロールしてください。それぞれのリンクをクリックするとURLを調べることができます。
⓷HTMLにscriptタグを記載します。srcの中に②で調べたURLを入れてください。
<body>
<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
</body>
jQueryの書き方
<script></script>タグにコードを書いていきます。必ずjQueryを読み込んだ後に書く必要があります。書き方としては「$(document).ready(function(){ });」と記載した後に「{}」内に処理を記載していきます。下記例はｐ要素の文字色を赤色にするという処理となっています。（「$(document).ready(function(){」は「「$(function(){」と省略することができるので省略形で記載します。）
<body>
<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<script>
$(function(){
$('p').css('color','red');
});</script>
</body>
セレクタとメソッド
$('p').css('color','red');
上記コードのうち「$('p').」の「p」は処理対象となる要素を指定していますが、これをセレクタと呼びます。また「css('color','red');」は処理を表していますがこれをメソッドと呼びます。
メソッドチェーン
下記のようにメソッドを連続して記載することができます。例は文字色を赤色にした後、ゆっくりと文字を消す処理となります。
$('p').css('color','red').hide('slow');
このようにメソッドをつなげて書くことをメソッドチェーンといいます。
