JavaScript入門講座|jQueryの使い方を学ぼう

JavaScript
うさタブ
うさタブ

今日はjQueryを勉強するッピ!

ユウキ
ユウキ

jQuery ~??

うさタブ
うさタブ

jQueryJavaScriptをもっとわかりやすく、複雑な処理をカンタンに表現できる方法ッピ!

今日はこのjQueryを一緒に勉強するッピ♪

この記事で学べること
  • jQueryとは?
  • jQueryを使うための準備
  • 基本の書き方
  • jQueryでできること見本
  • よく使うメッソド一覧

jQueryの使い方を学ぼう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>






</script>
<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

今回はこのソースコードを元にして、

更にCDNを使用するッピ!

ユウキ
ユウキ

CDN~~? ってなんだ?

うさタブ
うさタブ

CDNというのは、コンテンツデリバリーネットワークの略で、

カンタンにいうと、世界中のみんなで自由に《呼び出して》使えるプログラムのことッピ!

うさタブ
うさタブ

今回は、このみんなで使えるプログラム

jQueryを、自分のサイトに呼び出して組み込む方法を伝授するッピよ~

jQueryプログラムを呼び出す

うさタブ
うさタブ

jQuery<head></head>内に呼び出して組み込むことがイッパン的ッピ!

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

といった感じに記入するッピ!

うさタブ
うさタブ

他にもGoogleのCDN

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

マイクロソフトのCDNがあるッピ!

<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script>
ユウキ
ユウキ

これ、いったいどうやって使うんだ?

うさタブ
うさタブ

ふふふ、それはこれから説明するッピ!

JQueryの基本の使い方

うさタブ
うさタブ

jQueryを使うには、<script></script>内に

$(function(){ 
  //ここに命令文
});

$(‘要素セレクタ’).メッソド(命令文);

のセットで使うことができるッピ!

ユウキ
ユウキ

んん? セットってどゆこと?

うさタブ
うさタブ

まずはコードの見本をみせるッピ!
サンプルもつけておくから、最初にそれを確認してみるッピよ~

jQuery見本

 $('p').click(function(){
       $('p').text('Good morning');
 });
<p>Hello world</p>
<!-- 見えない部分 -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->

<p>Hello world</p>

<script>
 $('p').click(function(){
       $('p').text('Good morning');
 });
</script>

<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

↓の【Hello World】をクリックしてみるッピ!

【 Hello World 】

ユウキ
ユウキ

すっげえ! 文字が変わった!

ユウキ
ユウキ

いったいどういうこと?

なんでこんなふうに変わるの??

うさタブ
うさタブ

これは

<p>段落をつくりますHello world</p>段落を終わります

$(‘p’)<p>の部分を .clickクリックしたら(function()変更をくわえます{
   
$(‘p’).<p>の部分のtext 文章を (‘Good morning!‘);へ変えます
 });

という命令文をつかって変更したんだッピ!

ユウキ
ユウキ

だから文章が変わったのか~

セットってこういう意味ね

うさタブ
うさタブ

つまり JQueryを使うには

$(functionいつ(){ 
  $(‘要素セレクタ’どこの).メッソドなにを(命令文変更するか?);
});

のヒトカタマリで命令をする必要があるッピ!

うさタブ
うさタブ

ついでに、JQueryを使うときは

任意のセレクタ(要素)の後ろにないと動かないことがあるから注意が必要ッピ!

要素にはidやclassも入れられる

うさタブ
うさタブ

この要素の部分には、
<p><div><h1><ul>以外にも

id や class

も入れられるッピ!

<p><span id="A">Hello</span> <span class="B">world</span></p>
<script>
 $('p').click(function(){
       $('#A').text('Merry');
       $('.B').text('Christmas');
 });
</script>
<!-- 見えない部分 -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->

<p><span id="A">Hello</span> <span class="B">world</span></p>

<script>
 $('p').click(function(){
       $('#A').text('Merry');
       $('.B').text('Christmas');
 });
</script>

<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

↓の【Hello World】をクリックしてみるッピ!

【 Hello world 】

ユウキ
ユウキ

お、変わった!

JQueryのメッソドとイベントトリガー

メッソド(何を変えるか?)について

うさタブ
うさタブ

JQueryのメッソド・・・

$(functionいつ/イベントのトリガー(){ 
  $(‘要素セレクタ’どこの).メッソドなにを(命令文変更するか?);
});

このメッソド何を変えるか?の部分は自由に変更することができるッピ!

うさタブ
うさタブ

良く使うメッソド一覧はこんな感じッピ!

メッソド変更する場所
.html () HTMLを書き換える ・取得する
.text () 文章データを書き換え・取得する
.val () 入力フォームの中のデータを書き換え・取得する
.css () スタイルシートのデータを書き換え ・取得する
.hide()要素を非表示にする
.show()要素を可視化する
.empty () 要素を空にする
.remove () 要素を削除する
.attr () 要素に新しく何かを追加・変更する
.prepend()要素内の先頭に 新しく何かを追加する
.append()要素内の最後に 新しく何かを追加する
.before()指定した要素の前に 新しく何かを追加する
.after()指定した要素の後に 新しく何かを追加する
.wrap()要素を 新しく何かタグで囲む
.addClass()要素にクラスを追加する
.removeClass()要素のクラスを削除する
ユウキ
ユウキ

いろんなのがあるんだな~

うさタブ
うさタブ

次はメッソドごとの使い方の見本を教えるッピよ~

メッソドごとの見本

CSSの変更のやり方 .css ()

うさタブ
うさタブ

CSSをjQueryで変更するには

$(function(){ 
  $(要素セレクタ’).css(‘プロパティ‘,’‘);
});

という1つだけ変更するやり方と

$(function(){ 
  $(要素セレクタ’).css({
    プロパティ:‘,
    プロパティ:
   });

という複数スタイルを変更するやり方があるッピ!

ユウキ
ユウキ

()かっこの中に{}なみかっこが入ってるんだなぁ

うさタブ
うさタブ

その他にも

プロパティ‘,’

から

プロパティ:’,

と真ん中の区切りが【 , 】→【 : 】になってるッピ!

複数のスタイルシートの方は後ろに【 , 】を入れるように変わってるッピよ~

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓をクリックするッピよ~

【 Hello world 】

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<p>【 <span id="C">Hello</span> <span class="D">world</span> 】</p>
<script>
 $('p').click(function(){
       $('#C').css('background','red');
       $('.D').css({'background':'blue','font-size':'150%',});
 });
</script>

表示・非表示のやり方 .show() .hide()

うさタブ
うさタブ

次は要素見せたり隠したりすることをやってみるッピ!

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓をクリックするッピよ~

【 Hello world 】

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
/* はじめに#Eの部分を非表示に設定する */
#E{
  display:none;
}
</style>
<p>【 <span id="E">Hello</span> <span class="F">world</span> 】</p>
<script>
 $('p').click(function(){
       $('#E').show(1000);
       $('.F').hide();
 });
</script>
ユウキ
ユウキ

わ! なんだコレすげえぇ

うさタブ
うさタブ

ムフフ!

これがプログラミングのちからッピ!

うさタブ
うさタブ

これは

$(‘p’<p>が).clickクリックされたら(function()動作します{
  $(
‘#E’id=”E” の部分を).show表示します(10001秒かかって);
  $(
‘.F’class=”F”の部分を).hide隠します();
 });

という意味ッピよ~!

新しく要素を入れる.attr

うさタブ
うさタブ

他にも新しく要素を入れる

.attr

があるッピよ~

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓の星をクリックするッピよ~

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<p> ★ <img id="G" /> </p>
<script>
 $('p').click(function(){
       $('#G').attr('src','画像URL');
 });
</script>
ユウキ
ユウキ

お、画像が出た~

うさタブ
うさタブ

これは

<p> ★<img id=”G” />画像を表示するための命令文を設置します </p>

<scriptjavascriptを開始します>
 $(
p<p>要素が).clickクリックされたとき(function 動作してください(){
   $(
#Gid=”G”に).attr 属性を追加して (‘src指定した画像を‘,’画像URLこのURLの画像です‘);
  });
<
/scriptjavascriptを終わります>

という意味ッピ!

.attrは色々なことに使うから覚えておくと良いッピよ~

イベントトリガー(いつ変えるか?)について

ユウキ
ユウキ

・・・なあ、うさタブ

この.clickクリックされたらっていうメッソド?なんだけどさ

ユウキ
ユウキ

クリック以外にも発動条件ってあるのか?

うさタブ
うさタブ

もちろんッピ

クリックだけじゃなく、マウスが押されたら~とか

スクロールされたら変わるみたいなこともできるッピ!

うさタブ
うさタブ

良く使うイベントトリガーを紹介するッピよ~!

メッソド場所(イベントトリガー
click () 要素がクリックされたとき変更
focus () 入力フォームがクリックされたとき
blur () 入力フォームから離れたとき
scroll () 画面がスクロールされたとき変更
keydown () キーが押されたときに反応
keyup () キーが離れたときに変更
mousedown () マウスボタンが押されたときに変更
mouseup ()  マウスボタンが離れたときに変更
mouseover()マウスカーソルが重なったとき変更
mouseout()マウスカーソルが離れたとき変更
load () データを読み込んだときに変更
ユウキ
ユウキ

ずいぶんイッパイあるんだなぁ~

ユウキ
ユウキ

とてもじゃないけど

こんなに覚えられそうにないや・・・

うさタブ
うさタブ

安心するッピ!
わからないこと・覚えられないことはそのつど調べれば良いんだッピ!

うさタブ
うさタブ

わからないことは調べる!

これが独学の第一歩ッピよ~

イベントトリガーごとの見本

うさタブ
うさタブ

たた一覧を見ただけじゃ使い方がわからないッピね・・・

次はトリガーごとの見本をみてみるッピ!

マウスに動きがあったとき変化する mouseover /mousedown

うさタブ
うさタブ

まずは見本をみてみるッピ!

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓にマウスを移動押してみるッピよ~

ここにマウスを当ててみてね

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<p id="H">ここにマウスを当ててみてね</p>
<script>
 $('#H').mouseover(function(){
       $('#H').text("さらに文字が変化するよ!マウスを押してみてね");
 });
 $('#H').mousedown(function(){
       $('#H').text("クリックありがとう♪");
 });
</script>
ユウキ
ユウキ

すっげえ! こんなこともできるのかっ

うさタブ
うさタブ

これは

$(#Hid=”H”に ).mouseoverマウスカーソルが当たった時(function()動作します{
  $(
#Hid=”H”の ).text文章を(“さらに文字が変化するよ!マウスを押してみてね”);
 });
$(
#Hid=”H”に).mousedownマウスを押された時に(function() 動作します{
  $(‘#H‘).
text文章を(“クリックありがとう♪”);
 });

という意味ッピ! 覚えておくと便利ッピよ~

入力フォームをクリックすると変化するfocus

うさタブ
うさタブ

まずは入力フォームをクリックすると変化する focus ッピ!

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓の入力フォームをクリックしてみるッピよ~

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input id="I"></input>
<script>
 $('#I').focus(function(){
       $('#I').val("自動的に文字が入るよ!");
 });
</script>
ユウキ
ユウキ

すっげえ文字が入った!

うさタブ
うさタブ

これは

<input入力フォームをつくります id id(住所)は=”Hです></input入力フォームを終了>

$(‘#H’).focusid=”H”の入力フォームに (function(){焦点があったら動作します
   $(
‘#H’id=”H”の).val中の文章を(“自動的に文字が入るよ!”);に変更します
 });

という意味ッピ!

うさタブ
うさタブ

入力フォームに文字を入れるときは

.val

を使うッピ!

.text.html ではないから注意するッピよ~

キーが押された時に変化する keyDown

うさタブ
うさタブ

最後は入力フォームにキーが押された時に変化する方法ッピ!

うさタブ
うさタブ

サンプルはこんな感じッピ! ↓に注目して文字をみてみるッピ!

入力フォームにキーを押されたときに変化します

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input id="J"></input>
<p id="K">入力フォームにキーを押されたときに変化します</p>

<script>
$('#J').keydown(function(){
       $('#K').text('変化したよ!');
 });
</script>
うさタブ
うさタブ

これは

<input id=”J入力フォームid(住所)はJです></input>
<
p id=”K段落 id(住所)はKです>入力フォームにキーを押されたときに変化します</p段落を終了>

<scriptjavascriptを開始>
 $(
‘#J’id=”J”の場所の).keydown何かしらのキーを(function()押されたら作動します{
   $(
‘#K’id=”K”の).text文章を(‘変化したよ!’);
  });
<
/scriptjavascript終了>

という意味ッピね~

ユウキ
ユウキ

いろんなことができるんだな~

学習のまとめ
  • jQueryとは、
    みんなで自由につかえるJavaScriptをカンタンに書けるプログラムのこと
  • jQueryを使うための準備
    <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
  • 基本の書き方は、
     $(function(){
      $(‘要素’).メソッド(命令文);
     });
  • idやclassも要素に入れられる
  • メッソドにはいつ変えるか?という発動条件にあたるものと、何を変えるか?という変更後の要素を指定するものがある

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました