TECH::EXPERT【jQuery】基礎〜メソッドチェーンくらいまで割と丁寧に【69日目】

かわいかわ

2019年8月28日 00:23

先週から今週にかけて、珍しく仕事やら遊びのイベントやらで忙しく、今週はなかなか勉強時間が確保できませんでした。

最近は書籍を使用して学習を進めているのですが、これがなかなか良いです。

２週間くらいでのんびり１冊読むようなペースで進めているのですが、いい感じに飽きがきた頃に読み終わるのでちょうどいい感じです。

ということで、今週は若干苦手意識があるjQueryをやることにします。

【学習内容】

・CSSのスタイルの変更

・タイミングのコントロール

・アニメーション

【CSSのスタイルの変更】

HTML基本コード

<!DOCTYPE html>
<html lang="ja">
おまじない
・
・
・
<body>

<header class="page-header" role="banner">
  <h1>jQuery Sample</h1>
</header>

<div class="page-main" role="main">
  <div id="typo">
    <div class="inner">Creative jQuery</div>
  </div>
</div>

<footer class="page-footer" role="contentinfo">
  <small class="copyright">COPYRIGHT &copy;
    <a href="#" target="_blank">
      syojikishindoi</a>
  </small>
</footer>

</body>
</html>

javascript

$(function(){
 $('#typo').css('color', '#ebc000')
});

なんとなく雰囲気でわかるかとは思いますが、「#typo」という場所に対して、「css」の「color」の値を「#ebc000」に変化させます。

つまり、このコードは「”セレクタ”に該当する要素のCSSの”プロパティ”を”値”に変更する」という処理をしています。

基本形は下記の通りです。

$('セレクタ').css('プロパティ', '値');

このCSS()という命令は、JavaScriptに定義されている命令ではなく、jQuery独自の命令で、このような命令のことを「jQueryメソッド」と呼びます。

上記のコードで、「.css」の部分はjQueryメソッドなので、()内のプロパティと値は「2つの引数」ということになります。

また、命令の対象となっているのは、「id="typo"が指定されているHTML要素」ですが、メソッドを使用するには、jQuery独自の形式で命令の対象を指定することが必要です。

$('#typo');

「$」は関数を示していて、「('#typo')」は1つの引数として渡されています。

$()は、「HTML要素を元にしてjQuery独自の要素を生成する」という機能を持っている関数です。

ここから他のCSSも少しいじってみることにします。

$(function(){
 $('#typo .inner').css('transform', 'rotate(10deg)');
});

若干見慣れないCSSが出てきましたが、前回のnoteをご覧いただいた方は「これ進研ゼミで見た！」状態になるかと思います。

transformプロパティのrorate関数を使用すると引数で設定した分、角度を変更することができます。

もう1つくらいCSSのおさらいをしておきます。

$(function(){
 $('.page-main > div:nth-child(1) .inner').css('opacity', 0.5;
});

まず、セレクタについてはこのように無駄に長く書いてもOKですが、特に意味はありません。

div:nth-child(1)については、一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。

opacityは文字の濃さ薄さを調整するプロパティでした。

ここで地味にポイントなのは、opacityの後に続く「0.5」という数字です。

ここでは直接数値を指定しましたが、そもそもjQueryでは、「''」,「""」で

囲まれた箇所は全て"文字列"として認識されます。そのため、''や""で囲う時は、値を指定することが必要です。

CSS（）メソッドで複数のプロパティを一括変更する方法

CSSメソッドで複数のプロパティを一括変更するには、{ }で囲まれた中に、プロパティと値を「:」で区切って記述します。

複数のプロパティと値を指定する場合はさらに「,」で区切ります。

$(function(){
 $('#typo').css({
   'font-size': '50px',
   'background-color': '#ae5e9b',
   'color': '#ebc000'
 })
});

【タイミングのコントロール】

CSSのスタイルの変更では普通にCSSを変えただけにすぎないので、わざわざjQueryを使うメリットはありません。

しかし、ここからはCSSを変えるタイミングを操作することでそれっぽい動きのある見せ方をします。

タイミングをコントロールするコード

$(function(){
 $('#typo').on('mouseover', function(){
   $('#typo').css('color', '#ebc000');
 });
});

ポイントはon()メソッドを使用している箇所です。

on()メソッドは「特定の出来事が起こるタイミングに実行したい命令を設定するメソッド」です。

この特定の出来事のことを「イベント」といい、イベントの種類のことを「イベントタイプ」と言います。

また、実行したい命令（関数）のことを「イベントハンドラ」と呼びます。

on()メソッドの1つ目の引数には「イベントタイプ」を渡し、2つ目の引数には「イベントハンドラ」を渡します。

on('イベントタイプ', 'イベントハンドラ')

ここではイベントタイプは「mouseover(要素にマウスが乗っかった時)」ですが、他にも「keyup」や「click」などたくさんのイベントタイプが存在します。

イベントハンドラ内の命令は下記の構文で記述します。

function(){
  任意の処理
}

イベントタイプの例

$(function(){
 $('#typo').on('click', function(){
   $('#typo').css('color', '#ebc000');
   $('header').css('color', '#ae5e9b');
 });
});

このようにon()メソッドの対象の要素とは異なるスタイルを変更することもでき、複数個記述することもできます。

on()メソッドを複数指定する

$(function(){
 $('typo').on('mouseover', function(){
   $('#typo').css({
     color: '#ebc000',
     background-color: '#ae5e6b'
   });
 });
 $('typo').on('mouseout', function(){
   $('#typo').css({
     color: '',
     background-color: ''
   });
 });
});

このように一気に2つの処理を指定することもできます。

2つ目の処理では、colorとbackground-colorの値が空ですが、空っぽの文字列を指定することで元のCSSに戻されます。

メソッドチェーン

上記のコードにおいては、メソッドチェーンを用いることで、$()関数の記述が１回で済むためコードがシンプルになり、プログラムの処理速度が向上します。

$()関数が実行されると、ブラウザは指定されたセレクタを手がかりにして、HTMLから要素を集める処理を行うため、この処理が繰り返し実行されると、CPUの負荷になり時間がかかる原因になります。

$()関数を使うと、$()の記述が減らせるため処理速度が向上します。

$(function(){
 $('typo')
    .on('mouseover', function(){
       $('#typo').css({
         color: '#ebc000',
         background-color: '#ae5e6b'
       });
     })
    .on('mouseout', function(){
       $('#typo').css({
         color: '',
         background-color: ''
       });
     });
});

【所感】

過去の自分に向けて丁寧に書いてみました。

今週１週間かけてゆっくり進めて参ります。

明日はアニメーションやスクロールあたりを進めていきます。

この記事が気に入ったらサポートをしてみませんか？