30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS JQuery初級編終了【30DAYSトライアル】

30DAYSトライアル

『JQuery』ってこんな感じだよ~。っていうので最初サイトの動き見た時、「なにこれめっちゃいいじゃん!これ出来たら絶対楽しい!!」ってすごくワクワクした♪

ただ、

①jQueryオブジェクトを作成
②メソッドの呼び出し

の定義がなんだかややこしそう。と思いました。
これも「慣れ」ですかねー。
...と思ってたら、『jQueryはJavaScript(JS)』という記述が!
JSは本業でたまーーに使うのですが、同じ...なの?

でも全く同じならわざわざjQueryとして違うものを出す必要がないし...と思ったのでちょっと調べてみました!

JavaScriptとjQueryの違い

  • JavaScriptはプログラミング言語
  • jQueryはライブラリ

『ライブラリ』とは『便利なプログラムを集めたもの』。
jQueryはJavaScriptで構成されており、jQueryで書くことによってJavaScriptの処理をより簡単に呼び出すことができる!ということが調べてみてわかったこと!
コードの長さもjQueryの方が短くすむみたいですね。

ポイント

  • jQueryはJavaScriptを使いやすくしたもの
  • jQueryとJavaScriptは違うもの

jQueryの書き方

jQuery基本的な書き方

$('①セレクタ').②メソッド(③引数);

①セレクタ

HTMLのタグ名やclass名などを指定。
変化させたい対象を記載します。

②メソッド

要素を変更したり、アニメーションをつけたりします。
textメソッド(.text)の場合は引数は『('書き換える文字列')』になる。

htmlメソッド(.html)の場合は、textメソッドと違い置き換えではなくタグが追加される。

【HTML例】
<p id="text">Hello</p>
【jQuery例】
$('#text').html('<span>ようこそ</span>');

これを画面上で見ると文字列は『Hello』⇒『ようこそ』に変わっています。
そしてpタグの中にspanタグが追加された状態になります。
pタグはなくなりません!

③引数

アニメーションの秒数や文字色の指定をしたりする。
ない場合もある。
('color','red')のように2つの引数を使う場合もある。

idとclassの違い

①セレクタにはidかクラス名このどちらかを指定します。
jQuery使用の際は基本的にid名を指定します。
また、id名の前にはシャープ(#)、class名の前にはドット(.)を記載します。
(※ここ間違いやすいよ!私が!!!)

idの場合

$('#title').slideUp();

classの場合

$('.title').slideUp();

【Progate 初級編】学んだこと【jQuery】

【jQuery】要素を隠す

$('h1').hide();

また、アニメーションで要素を隠したい時は、以下のように定義します。

$('img').fadeOut(slow);

以下のように引数に数値(ミリ秒)を入れて速度を指定することもできます。

$('img').fadeOut(1500);

以下は下から上へアニメーション付きで要素が隠れます。

$('p').slideUp();

上から下の場合は『slideDown』を指定する。

【jQuery】隠れた要素を表示する

$('h1').show();

また、アニメーションで要素を表示したい時は、以下のように定義します。

$('img').fadeIn(slow);

hideメソッド・fadeOutメソッドとセットで覚えると良き!

【jQuery】セレクタがクリックされた時の処理

イベント構文を使って定義します。

$('セレクタ').イベント名(function(){ });

これがもうややこくてややこくて、カッコがもうどうなってんのよ?!と混乱してしまいました(笑)。

下の例はボタンを押すと、文字が下から上へアニメーションで隠れる処理を定義しています。

【HTML例】
<div class="btn" id="text-hide">隠す</div>
    <h1 id="text">隠れるよ!</h1>
【jQuery例】
$('#text-hide').click(function(){
 $('#text').slideUp();
});

【jQuery】指定した要素にのみ処理を行う【this】

以下のように複数リストにクリックイベントが設定されている場合、クリックされたリストのみ処理を起こさせます。

【HTML例】
<ul>
 <li class="list">リスト1</li>
 <li class="list">リスト2</li>
 <li class="list">リスト3</li>
</ul>
【jQuery例】
$('.list').click(function(){
 $(this).css('color','red');
});

【jQuery】変数宣言【var】

同じオブジェクトを複数回使用する場合は変数宣言すると良い!
以下の例では$("#text")を変数$textに代入しています。

var $text = $('#text');
$title.css('color', 'red');
$title.html('こんばんは');
$title.fadeOut(1000);

変数には文字列や数値、jQueryオブジェクトなどを格納することができます。
jQueryオブジェクトを格納する時は、変数の前に$を付けるのが慣例だそうです。

【jQuery】メソッドチェーン

1つのjQueryオブジェクトに連続してメソッドが利用できる構文を『メソッドチェーン』といいます。
以下の例では『cssメソッド』『htmlメソッド』『fadeOutメソッド』の3つを宣言しています。

$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう!</h3>').fadeOut(1000);

【jQuery】findメソッドとchildrenメソッド

  • findメソッドは、指定したセレクタの下層の要素すべてに対して処理を行う。
  • childrenメソッドは、指定したセレクタの一つ下の下層の要素に対して処理を行う。
<div id="wrapper">
 <a href="#">リンク1</a>
 <div>
  <a href="#">リンク2</a>
 </div>
</div>

それぞれ以下のようにjQueryを定義した場合、

$('#wrapper').find('a').css('color','red'); ⇒リンク1とリンク2両方に適用
$('#wrapper').children('a').css('color','red'); ⇒リンク1のみに適用

【jQuery】hoverイベント

要素にマウスが乗った時、外れた時の処理を定義します。

$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);

【HTML例】
<div id ="test">
 <p class="text">
  テスト
 </p>
</div>
【jQuery例】
$('#test').hover(
 function(){
  $('.text').fadeIn();
 },
 function(){
  $('.text').fadeOut();
 }
);

jQueryで気を付けたいこと

セレクタを指定する時、id名の前にはシャープ(#)、class名の前にはドット(.)
これがまだまだ頭に入っておりませぬ。。。

あと、もうたくさん定義していくとカッコがどこにかかっているのかわからなくなって発狂しそうになる(笑)。
初級編、大ボリュームでした...!

-30DAYSトライアル, お勉強
-

© 2021 文系女子とプログラミング