【初心者向け】jQueryの基本的な使い方

最近はProgatejQueryを勉強してました。

PHPなどでWebアプリケーションの動作部分を作ったとしても、その動作を表現するための方法がわからないとWebアプリケーションとしては成り立ちません。

そんなとき、jQueryで何ができるのかを知っておくと、いざWebアプリケーションやWebページを作り始めた際に、その表現方法がイメージできるようになるため効率よく作ることができます

今回はそのjQueryでどのようなことができるのか、使用頻度が高いものをご紹介&解説していきます。

独学で勉強するのがつらいと感じてませんか?

勉強中にわからないことが出てきて解決できないと、モチベーションが一気に下がってしまいますよね。

そうならないための対処方法は、誰かに質問できる環境を作ることです。

質問できる環境を作ることで、効率よく勉強を進めることができるようになります。

また、質問をするためには、何がどうわからないかしっかり把握する必要があるため、質問後の理解度が全然違ってきます。

その結果、独学で勉強するより

  • 時間
  • 効率
  • 理解度

全てにおいて上回ることができます。

TechAcademyであれば、1週間無料でプログラミングスクールの体験をオンラインで受けることが可能です。

この無料期間にわからない部分の質問をするのもいいですし、プログラミングスクールの雰囲気も体験できるので、いい刺激になりますよ。

目次

そもそもjQueryとは何か?

jQueryとはJavascriptのライブラリです。

わかりやすく表現すると、本来Javascriptで何行も書かないといけないようなコードが数行で簡単に表現できるよーって感じのものです。

jQueryでどんなことができるのか

では、具体的にjQueryでどんなことができるのでしょうか。よく使うであろう基本的なものをいくつか解説していきます。

Clickイベント

要素をクリックしたときに決められた動作をさせることができます。

具体的にはこのように書きます。

$('#click-btn').click(function(){
  //処理
});

click-btnというIDの要素をクリックしたときに処理を実行します。

CSSメソッド

要素のCSSを変更することができます。

$('#css-btn').css('color','red');
CSSメソッド

これを実行すると、css-btnというIDの要素の色を赤へと変更されます。

1つ目の引数でプロパティを、2つ目の引数で値を指定します。

textメソッド

要素に指定した文字を記述することができます。

$('#text-box').text('テキストボックス');
記述前

この例ではtext-boxというIDの要素(記述前)にテキストボックスという文字を記述します。

textメソッドと似たようなものにhtmlメソッドというものがあります。このhtmlメソッドは名前の通り、HTMLそのものを書き換えることができます。

$('#text-box').html('<span>テキストボックス<span>');

このようにHTMLタグを書き込むことができます。

hoverイベント

CSSのhoverと似たようなもので、要素にマウスを乗せたときに決められた動作をさせることができます。

CSSの場合は、要素にマウスを乗せているときの動作だけを指定しますが、jQueryは乗せたときと外したとき、両方の動作を指定します。

$('hover-btn').hover(
 function(){
  //マウスを乗せたときの処理
 },
 function(){
  //マウスを外したときの処理
 }
);

このように2つの処理を書きます。

下の例ではマウスを乗せたときと外したときで色を変えてます。

hoverボタン

アニメーションをつける

要素にアニメーション等の動きを簡単につけることもできます。

$('#click-btn').click(function(){
  $('#hide-box').fadeOut();
});
テキスト

このようにfadeOut()というメソッドを使えば1行書くだけでフェードアウトさせるアニメーションを表現することができます。

jQueryの基本的な使い方まとめ

jQueryの基本的なところについてお話してきました。

今回お話してきたのは、ほんの一部で他にも要素を読み取って処理したりフォームを操作したりと様々なことが簡単に表現することができます。

jQueryはオワコンだなんて言われておりますが、初心者の人がフロントエンドの言語に触れるには非常にいいものであると、勉強して感じました。

この記事を読んで、もっと詳しくjQueryについて勉強してみたいと思っていただけましたら幸いです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる