変数宣言

jQueryで変数を宣言することが出来ます。

今まではID,class　またはtagを選ぶ時に$('SELECTOR');を使いました。

こうセレクターを使うと使うたびにhtmlソースからそのタグを探す作動をします。

しかし、一回これを変数に代入すると使うたびにまた探すことをしないんで変数に代入して使ったらもっと軽くプログラムを作れます。

では変数を宣言してみましょう。

では class属性のバリューがhelloの時にはこう使いました。

$('.hello');

今までは上のようにセレクターを使い、何かの関数を使いました。

しかし、変数を使うと

var hello = $('.hello');

var　変数を宣言するときに使いますが、必ずではありません。
hello変数の名です。そして　hello　＝　$('.hello');です。

では、どう使うんでしょうか

var hello = $('.hello');
hello.hide(); ex) 変数を使わない場合 : $('.hello').hide();
hello.show(); ex) 変数を使わない場合 : $('.hello').show();

上のように使えます。

では、ソースでやってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<style>
.yellow_circle{width:40px;height:40px;border-radius:20px;background:yellow}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var yellow_circle = $('.yellow_circle');
    var yellow_circle_word = $('.yellow_circle_word');
    yellow_circle.mouseenter(function(){
        yellow_circle_word.text('マウスポインターが黄色のサークルの上にあります。');
    });
    yellow_circle.mouseleave(function(){
        yellow_circle_word.text('マウスポインターが黄色のサークルから外れました。');
    });
});
</script>
</head>
<body>
    <div class="yellow_circle"></div>
    <p class="yellow_circle_word">黄色のサークルの上マウスポインターを置いたり外れたりしてみましょう。</p>
</body>
</html>

変数を利用した例の結果

黄色のサークルの上マウスポインターを置いたり外れたりしてみましょう。

もっと変数を使ってみましょう。

alert()をやってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var usa_hi = 'hi';
    var jp_hi = 'konnichiha';
    var kr_hi = 'annyeong';
    var cn_hi = 'nihao';
    alert(usa_hi);
    alert(jp_hi);
    alert(kr_hi);
    alert(cn_hi);
    var con1 = usa_hi + jp_hi;
    alert(con1);
    var con2 = con1 + kr_hi;
    alert(con2);
});
</script>
</head>
<body>
</body>
</html>

上のように活用することも出来ます。

alert();の中に usa_hiを入れたら変数usa_hiのバリューな　hiが出力されます。

これで変数の使い方は終わりです、ありがとうございます。