最近はProgateでjQueryを勉強してました。
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-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について勉強してみたいと思っていただけましたら幸いです。
もし、あなたが学生ならPrime Studentを使うことで、参考書を実質10%OFFでお得に買うことができます。
Prime Studentとは、通常会費の半額の月額250円で、Amazonプライム会員と同じサービスを受けることができるようになるサービスです。
しかも、Prime Studentには通常のプライム会員とは別に、
- Adobe Creative Cloudが5%OFF
- Microsoft365 Personalが5%OFF
- Jabraワイヤレスイヤホンが最大4,000円OFF
などの特典が盛りだくさん!
学生のうちにしか受けることができないサービスなので、このチャンスを逃さないようにしてください。