jQuery の基礎

つい先日下記の2つの記事を書きました。
JavaScriptをHTMLファイルにどのように適用するかというものですね。

『JavaScriptをWEBサイト（HTMLファイル）に適用する方法』
https://qiita.com/kibinag0/items/7843727e4328881ae964

『JavaScript と DOM 応用編』
https://qiita.com/kibinag0/items/6e9b9169dcd261bd9ae1

今回その続編のjQuery編です。

DOMで document.querySelector("h1") とかって記載していたんですけど、何とjQueryを使用すると、、、そのコードが $("h1") で済むみたいです。時短かよ。
ちなみに "$ = jQuery" という意味で jQuery("h1")としても大丈夫見たい。

jQuery.js

// 今までのDOM Selector 
document.querySelector("h1")

// jQuery での Selector
$("h1")

しかもh1タグが複数ある場合は、document.querySelecterAll("h1")とかやらなきゃいけなかったのも、全て$("h1")で引っ張ってきてくれるようになっています。

なんと便利な。そんな便利なjQueryの基礎をメモっていきます。
今回も、AngelaさんのUdemyのコースです。→Udemyリンク

まずはjQueryを使用できる環境を作る

jQuery公式サイト の中からGoogle Hosted Libraries を探し、最新のjQueryのscriptタグを探しに行きます。google developer

qiita.html

// ①Google Developersから取得し、jQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

// ②jQuery 読み込んだ後に、javascriptシートを読み込む

<script src="index.js" charset="utf-8"></script>

// ちなみに場所は、bodyタグ内の一番最後 だから、こうなるはず

</body>

jQuery で CSS を編集・追加・消去

css("プロパティ","値") で編集できます。

直接編集・追加しちゃうやり方はこちら。

qiita.js

// h1タグのcss編集・追加

$("h1").css("color","brown");

// 複数のcssを変更・追加
$("h1").css({"color":"brown","text-align":"left"});


// ちなみにプロパティだけを選択すると値を返してくれる
console.log($("h1").css("color"));

新たにクラスを追加・消去する場合

もしクラスを作って、そのクラスを適用させたい、もしくは、すでに適用されているクラスを外したいといった場合は、こんな感じ。

今回は h1タグに"oshan"というクラスを適用・外す場合。

qiita.js

// oshan クラスを適用する

$("h1").addClass("oshan");

// すでに適用されているoshanクラスを外す

$("h1").removeClass("oshan");

// oshan と stylish 2つのクラスを適用したい場合

$("h1").addClass("oshan stylish");

jQuery でテキストを変える

次にjQueryを使用してテキストを変更する2つの方法。

text()でテキストのみを変更する。

こちらはhelloだとしたら、その"hello"部分のみを変更しています。

qiita.js

// button内のテキストを"OMG!!"変更する

$("button").text("OMG!!");

.htmlでそのタグ自体を変更する。

こちらはhelloのタグも含めた全ての部分を編集しています。だから、タグなんかも入れちゃえるのですね。

qiita.js

// buttonのタグ自体を編集する

$("button").html("<em>OMG!!</em>")

jQueryで属性（attributes）を編集する

次に、jQueryで属性を編集する方法です。属性（attributes）ってなに？って方のために説明しておくと、属性とはaタグのhrefとか、imgタグのsrc, altのようなものです。

それを attr()で変更できます。

qiita.js

//　属性とはタグの中のhrefやsrc, altなどのこと。
<a href="">
<img src="" alt="">

// aタグのsrc属性をgoogle.comに変更するよ

$("a").attr("src","https://www.google.com/");

jQuery で add Event Listener を実装する

以前のDOM, JavaScript応用編でクリックされた時やキーボードが押された時に何かしらの処理を実行させるaddEventListenerのjQuery版を見て行きます。

クリックされたときは click()で

qiita.js

// h1がclickされた時に関数で色をpurpleに変更させる

$("h1").click(function(){
   $("h1").css("color","purple")
});

キーボード入力されたときは keypress()で

qiita.js

// keyboard入力があった時に、h1の色をpurpleに変更する

$("body").keypress(function(){
   $("h1").css("color","purple")
});

まぁでも、on() で全部対応できるみたい

上記のようにclick()とか、keypress()とかでもevent別に対応できるけど、on()を使用すると、その全てに対応できるみたい。

on(イベント、適応する関数)

qiita.js

// h1がclick された時にcssの関数を適用
$("h1").on("click", function(){
    $("h1").css("color","red");
});

// mouseover された時にcssの関数を適用
$("h1").on("mouseover", function(){
    $("h1").css("color","red");
});

ただイベントを書き換えるだけ。。便利かよ。

ちなみに、clickとかkeypressとかmouseoverとかのイベント一覧↓
https://developer.mozilla.org/ja/docs/Web/Events

jQueryで直接要素をHTMLに追加する

今まではすでにあるHTML要素にCSSの変更を加えたり、HTML内のテキストを編集したりという処理でしたが、jQueryではHTMLファイルに要素自体を加えることも可能になっています。

qiita.js

// beforeは、こうなる
// <button>NEW</button> <h1>Hello World</h1>
$("h1").before("<button>NEW</button>");


// afterは、こうなる
// <h1>Hello World</h1> <button>NEW</button> 
$("h1").after("<button>NEW</button>");


// prependは、こうなる
// <h1> <button>NEW</button> Hello World</h1>
$("h1").prepend("<button>NEW</button>");


// appendは、こうなる
// <h1>Hello World <button>NEW</button> </h1>  
$("h1").append("<button>NEW</button>");

逆にHTMLファイルから要素を除去する場合はこんな感じ。

qiita.js

// 逆に何か要素をHTMLファイルから消去するときは
$("button").remove();

// ちなみに、これ button 要素が全部消え去りますのでご注意を 笑

jQueryで簡単なアニメーションを作成する

指定した要素をhide（隠す）したり、show（表示）させたり、toggle（表示・隠す）したり、fadeOut（フェードアウト）したり、fadeIn（フェードイン）したり、fadeToggle（フェードイン・アウト）したり、slideUp（スライドイン）したり、slideDown（スライドアウト）したり、いろんなアニメーションを使用することができます。

qiita.js

// button をclick したときに h1 を hide するとき

$("button").on("click", function(){

   $("h1").hide();

});

ちなみに、上記の"hide"部分をshow, fadeIn, fadeOut, slideUp, slideDownなどに変えればそれぞれの処理を適用できます。

また、animate()を使用すると、cssなどを適用して、アニメーションを作ることができます。
下記は、アニメーションを使用して 透明性（opacity）を0.5にしています。animateの場合は、中に入れる値が数字でなければならないことに注意です。

qiita.js

$("button").on("click", function(){

   $("h1").animate({opacity: 0.5});

});

複数のアニメーションを順番に適用する

複数のアニメーションを適用することもできます。やってみると意外とかっこいい。

qiita.js

// slideUpしてslideDownして、最後に透明性を0.5にしてます。

$("h1").slideUp().slideDown().animate({opacity: 0.5});

以上でjQueryの基礎終わりです。

１つ１つを暗記するのではなく、「こんなのがあるのか」とざっくり覚えておくとググりながら使えるよ！ってAngelaさんが言ってました笑

確かに〜。