メソッドとパラメーターの解説

メソッドとは、セレクタで指定した要素を操作する命令文のことを指します。
クラスを追加して！CSSを設定して！テキストを変更して！などのことです。

パラメーターとは、どのようにメソッドを実行するか具体的に指示する補語を指します。
パラメーターに渡された値のことを引数と呼びます。
メソッドによってパラメーターは複数指定できたり、必要がないものもあります。

代表的なメソッドの紹介

jQueryの代表的なメソッド一覧

• .text()　テキストを取得する
• .text('変更したいテキスト')　テキストを' '内の文字列に変更する
• .html()　HTMLを取得する
• .html('変更したいHTML')　HTMLを' '内のHTMLに変更する
• .prepend('要素')　要素の先頭にHTMLを挿入する
  例：$('#lists').prepend('< li >先頭に追加するリスト< /li >')
• .append('要素')　要素の最後にHTMLを挿入する
  例：$('#lists').append('< li >最後に追加するリスト< /li >')
• .remove()　要素を削除する
• .attr('属性')　指定した属性の値を取得する
  例：$('a#special-link').attr('href')
• .attr('属性', '値')　指定した属性の値を変更する
  例：$('a#special-link').attr('href', 'https://xxxx.com')
• .removeAttr(属性名)　指定した属性を削除する
• .addClass(class属性値)　class属性を追加する
  例：$('#button').addClass('active')
• .removeClass(class属性値)　class属性を削除する
  例：$('#button').removeClass('active')
• .css(プロパティ名)　指定したCSSプロパティの値を取得する
  例：$('#logo').css('color')
• .css(プロパティ名, 値)　指定したCSSプロパティの値を設定する
  例：$('#logo').css('color', 'red')
• val()　フォームの入力値(value属性の値)を取得する
  例：$('input#name').val()
• val('入力値')　フォームの入力値(value属性の値)を設定・上書きする
  例：$('input#name').val('デイトラ')

メソッドチェーンについて

一つのセレクタに対して複数のメソッドを指定する場合、メソッドを繋げて書くこともできます。
※メソッドなら全て連結できるわけではありません。

コピーjQuery("#js-title").css("color", "red");
jQuery("#js-title").text("Daily Trial");
//　↓メソッドを繋げて書くと 
jQuery("#js-title").css("color", "red").text("Daily Trial");

メソッドを使ったアニメーション

jQueryにはリッチな動きをつけれるメソッドが用意されています。JavaScriptで作ろうと思ったら何行も書かないといけないアニメーションが、jQueryのメソッドひとつで実行できます。

コピー// .fadeIn()  フワッと表示。
jQuery("#js-title").fadeIn();

// .fadeOut()  フワッと消える。
jQuery("#js-btn").fadeOut();

// .slideDown()  スライドして表示。
jQuery("#js-title").slideDown();


// .slideUp()  スライドして消える。
jQuery("#js-btn").slideUp();

何かのイベントをきっかけに、特定の処理を行う方法を学びましょう。
代表的な例としてclickとhoverの二つを使ってみます！

イベントの構文は jQuery("セレクタ").on("イベント名", function() {}) という構文で書きます。 

例えば、クリックされたときに何か処理を追加したい場合は
jQuery("セレクタ").on("click", function() {
//ここに処理を書く
});

スクロールしたときに何か処理を追加したい場合は
jQuery("セレクタ").on("scroll", function() {
//ここに処理を書く
});
という風に書いていきます。

イベント監視（click編）

イベント監視（hover編）

コピー例えば、クリックされたときに何か処理を追加したい場合は
jQuery("セレクタ").click(function(){
//ここに処理を書く
});

スクロールしたときに何か処理を追加したい場合は
jQuery("セレクタ").scroll(function(){
//ここに処理を書く
});  
という風に書いていきます。