jQuery

jQueryweb公式サイトページ右上のオレンジのDownloadと書いてある所をクリック。

compressed=圧縮された(ファイル)＝つまり軽い。

jQuery 3.1.1はjQueryのバージョンです。常にアップデートされていますので最新版をダウンロードするようにしましょう。

slimバージョン　Ajaxなどのモジュールを省いてある

最初に書くコード

$(function(){ ここにコードを記載 }); 

または、 $(document).ready(function(){  ここにコードを記載 }); でもOK

$マークはjQueryを呼び出すためのjQueryを省略した記述。
jQuery、$どちらで記述してもよい。$はjQueryと同じ意味。

$("セレクタ").メソッド("引数")

「セレクタ」とは適用させる範囲、要素。セレクタとメソッドの間のドットを忘れないように！

オブジェクトで（主語）を指定し、メソッドで「何をする」（述語）を指定します。（つまり主語と述語です）。
そして引数にて、より具体的に指定する「どのように」（副詞）

セレクタ、引数(パラメータ)をダブルクォーテーション（“）、またはシングルクォーテーション（‘）で囲みます。

引数（ひきすう）

メソッドに渡す情報のことで（ ）内に設定します。メソッドにより具体的な指示をする。

引数が複数あるときはカンマ（,）で区切ります。

メソッドによっては引数はありません。引数(パラメータ)はあるときとないときがある！

オブジェクト . メソッド()

メソッドはオブジェクトを操作する命令文のこと

オブジェクトとメソッドはドットを挟んで記述します（「ドットシンタックス」と呼びます）。

オブジェクト . メソッド()  ※javaScriptの構文もドットシンタックスです。

これで「主語（オブジェクト）が何をする（メソッド）」という最小限の処理が完成します。

jQueryオブジェクトのメソッドは沢山あるが、すべて共通点があります。メソッドの後に( )が必要！

this $(this)　イベント時に要素を指定。

子孫要素 $("先祖 子孫")

先祖と子孫の間には半角スペースが必要です。先祖と子孫、まとめてクオテーションかダブルクオーテーションで囲む。

html要素だけでなくクラスやID属性も設定できます。

toggle() HTML要素を表示、非表示に切り替えできるメソッド

slideDown() HTML要素を上から下へ徐々にスライドさせながら表示するメソッド

slideUp() HTML要素を下から上へ徐々にスライドさせながら非表示にするメソッド。

on()

$(セレクタ).on(イベント, 関数)

引数にイベント名と関数を入れます。引数が複数なので、カンマ（,）で区切ります。

jQueryでの要素スタイルの追加・変更

css()メソッドを使用します。　css()メソッド使い方

$('要素').css('プロパティ', '値');

$('要素').css({'プロパティ':'値', 'プロパティ':'値'});

メソッドチェーン jQueryのメソッドは、メソッドチェーンといって、ドット「.」でチェーン（鎖）のようにつなげることもでき
JavaScriptの実行速度も早くなる　
メソッドとメソッドの間のカンマを忘れないように。

$("セレクタ").メソッド('プロパティ', '値').メソッド('プロパティ', '値').メソッド('プロパティ', '値')

外部リンク参考サイトさん メソッドチェーンについて

$(function(){ $('クリックするセレクタ').on('click', function(){ $('表示、非表示するセレクタ').slideToggle('速度など'); }); });

クリックするセレクタと表示、非表示するセレクタを別にする。

slideToggle() 表示、非表示を行うメソッド

slideToggle()の引数（パラメータ）はfast、normal、slowの３つとコールバック関数があり、引数は、あるときとないときがある。

$(セレクタ).slideToggle(引数);

on() クリックなので、引数のイベントにclickを使用。 jQueryを使うので、$(function(){ }); を記述する。

.on('click', function(){ $('適用セレクタ').slideToggle('速度'); });