【初級編DAY16】jQueryを学ぼう② - のーとそーだこーど。

前回に引き続きjQueryについて学んでいきましょう。

メソッドとパラメーター

メソッドとパラメーター

前回、jQueryはjQuery("セレクタ").メソッド("パラメータ")であることを学び、jQueryでセレクタを指定できることがわかりましたね。

chimu-dailytry.hatenablog.com

次はメソッドとパラメーターについて詳しく見ていきましょう。

メソッドとパラメーターについて

■メソッドとは■

セレクタで指定された要素を操作する命令文

「classを追加して！」「cssを設定して！」「テキストを変更して！」など、動詞に当たります。

■パラメーターとは■

先ほどのメソッドに対して、具体的な実行指示文

「色は赤にして」「追加するclass名を指定」「このテキストにして」など、補語を指します。

※パラメーターに引き渡された値を引数と呼ぶ

※メソッドによって複数指定が出来たり、必要がないものなどがある

jQueryの代表的なメソッド

情報の追加と変更

例

// .text()・・・textを取得
jQuery("#title").text();

// .text("変更したいテキスト")・・・テキストを””内の文字列に変更
jQuery("#title").text("new title");

// .html()・・・htmlを取得する
jQuery("#title").html();

// .html("変更したいHTML")・・・HTMLを""内のHTMLに変更
jQuery("#title").html("<span>new title</span>");

// val()　フォームの入力値(value属性の値)を取得する
jQuery('input#name').val()

// val('入力値')　フォームの入力値(value属性の値)を設定・上書きする
jQuery('input#name').val('新しい値')

取得した情報を変数に格納して使用することも可能

パラメーターを空白とすることで要素を取得します。

// 文字列の格納
const title=jQuery("#title").text();
console.log(title);

いまいちtitleとhtmlの変更の違いが判らない・・そんな方におすすめのサイトです。
👇参考にさせて頂きました👇

www.koikikukan.com

要素の挿入と削除

例

// .prepend('要素')　指定した要素内の先頭にHTMLを挿入する
jQuery("#title").prepend("<span>先頭に追加するHTML</span>");

// .append('要素')　指定した要素内の最後にHTMLを挿入する
jQuery("#title").append("<span>最後に追加するHTML</span>");

// .remove()　指定した要素を削除する（子要素も含め）
jQuery("div").remove();

属性の取得、変更、追加、削除

// .attr('属性')　指定した属性の値を取得する
// 属性hrefの値が返ってくる
jQuery('a#special-link').attr('href');

// .attr('属性', '値')　指定した属性の値を変更する
// 該当するidのリンクタグのhref属性の値が変更となる
jQuery('a#special-link').attr('href', 'https://xxxx.com');

// .removeAttr(属性名)　指定した属性を削除する
// 該当するidのaタグからhref属性が削除さる
jQuery('a#special-link').removeAttr('href');

class属性の追加と削除

// .addClass(class属性値)　class属性を追加する
// id button　にclass .active　が追加される
jQuery('#button').addClass('active');

// .removeClass(class属性値)　class属性を削除する
// id button　のclass .active　が削除される
jQuery('#button').removeClass('active');
 
// .toggleClass(class属性値)　class属性をつけはずしする
// id button　にclass.activeがついていれば外し、ついていなければつける
jQuery('#button').toggleClass('active');

※追加削除を行う際、パラメーター""内には".active"ではなく、"active"と直接文字列を入れてしまってokです。

2023/10/12　追記　.toggleClass

cssの取得、設定

// .css(プロパティ名)　指定したCSSプロパティの値を取得する
// id logoのcssに表記があるcolorを取得する
jQuery('#logo').css('color');

// .css(プロパティ名, 値)　指定したCSSプロパティの値を設定する
// id logoのcssに記載あるcolorを赤に変更する
jQuery('#logo').css('color', 'red');

cssの複数の設定方法

// CSSのプロパティの設定
jQuery("#title").css({
  color:"red",
  fontSize:"80px",
});

メソッドチェーン

一つのセレクタに対して複数のメソッドを指定したいときはメソッドをつなげて書くことが出来ます。

メソッドをつなげて記述することをメソッドチェーンと言います。

※メソッドならすべて連結できるわけではないので注意しましょう。

例

jQuery("#title").css("color", "red");
jQuery("#title").text("new title");
//　↓メソッドを繋げて書くと 
jQuery("#title").css("color", "red").text("new title");

処理も見やすくなり、記述量も減るね！

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

jQueryにはリッチな動きをつけれるメソッドが用意されています。

JavaScriptで作ろうと思ったら何行も書かないといけないアニメーションが、jQueryのメソッドひとつで実行が可能です！

代表的なメソッド一覧

.fadeIn() ・・・フワッと表示
.fadeOut() ・・・フワッと消える
.slideDown() ・・・スライドして表示
.slideUp()・・・スライドして消える

例

// .fadeIn()  フワッと表示。
パラメーターに数字を入力することで表示の時間を変えられる
jQuery("#js-title").fadeIn();

// .fadeOut()  フワッと消える。
パラメーターに数字を入力することで表示の時間を変えられる
jQuery("#js-btn").fadeOut();

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

// .slideUp()  スライドして消える。
jQuery("#js-btn").slideUp();
 
// .slidetrigger() 表示されている時は隠し、隠れている時は表示する
jQuery("#js-btn").slidetrigger();

※第1引数()内に演出速度が変更可能。（1000と設定⇒1秒かけて要素が変化）

スライドはHP作成に欠かせないアコーディオンメニュー（クリックすることで伸び縮みするメニュー）の作成に使用するので覚えておきましょう。

2023/10/11 追記　slidetrigger
2023/10/11 追記　第一引数の演出速度

イベントの監視・構文

何かのイベントをきっかけに特定の処理が行われる方法を学びます。

■イベント構文の基本■

jQuery("セレクタ").on( イベント名, セレクタ, データ ,関数 )

イベント名：何をしたときか
セレクタ　：対象要素内でさらに指定したセレクタからのイベントだけを設定
データ　　：任意のデータを渡したい時に値を設定
関数　　　：どんな処理をするか

今回はjQuery("セレクタ").on( イベント名, 関数 )で下記解説をしていきます。

セレクタ、データについてもっと知りたい方用

👇参考にさせて頂きました👇

www.jquerystudy.info

.on()を使った主なイベント処理

click : クリックされたとき
change : フォーム内に変更があったとき
load : 読み込まれたあと
resize : ブラウザサイズが変更されたとき
mouseenter : ホバーされたとき
mouseleave : ホバーが外れたとき
submit : フォームが送信されたとき

公式サイトで確認：.on() | jQuery API Documentation

実際の使い方を見ていきましょう。

クリックイベントの例

例

// #buttonがクリックされたら関数が実行される
// 関数（#button-titleのテキストが変更となる)
jQuery("#button").on("click",function(){
 jQuery(#button-title).text("new title");
});

hoverイベントの例

hoverのイベントに関しては記述の仕方が少し変わります。
イベント名にhoverされた時と外れたときの処理を書いていきます。

例

jQuery("#button").on(
// hoverされたときのイベント　色をオレンジに
mauseenter:function(){
  jQuery(this).css("color","orange");
},
// hoverが外れたときのイベント　色を白に
moouseleave:function(){
  jQuery(this).css("color","white");
});

イベントとイベントはカンマで区切ることを忘れずにしましょう。

少し特殊ですが、こーゆー記述なんだな、くらいで覚えておいて大丈夫です。

ワンポイント【いろいろなイベント構文の書き方】

.onを使用してイベント構文を記述しましたが、上記の書き方のほかにも記述の仕方があります。

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

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

.onがないね！

先ほどまではメソッドを.onをとしていましたが、こちらはメソッドを直接指定しています。

このような書き方もあることを覚えておきましょう♫

jQueryで出来ることがたくさんあり、またリッチなアニメーションもつけられることがわかりました！

覚えることも多く大変ですが、素敵なサイトがつくれると思うとワクワクしますね！

では、今日はここまで٩( ''ω'' )وお疲れさまでした。