jQueryとJava Script比較

Java Script、jQuery勉強中なのでそれについてのメモ。

Java Scriptでは長く書かなければいけないことがjQueryの場合シンプルにかけることを知った。
div要素のbgcolorをconsole.logに表示するスクリプト
Java Scriptで書いた場合とjQueryで書いた場合を比較

Java Scriptバージョン

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>JSテスト</title>

<script>
    // クリックしたdiv要素のbgcolorをconsole.logに表示する
    // JSクリプト
    document.addEventListener('DOMContentLoaded', function(){
        // div要素すべて取得。
        let elements = document.getElementsByTagName('div');
        let len = elements.length;
        for (let i = 0; i < len; i++){
            // クリックすると関数が実行されるよう属性を設定
            elements[i].addEventListener('click',function(){
                let style=window.getComputedStyle(this);
                let bgcolor=style.getPropertyValue("background-color");
                console.log(bgcolor);
            });
        }
    });
</script>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#redbox{
    background-color:#ff0000;
}

#bluebox{
    background-color:#0000ff;
}
</style>
</head>
<body>

<div id="redbox">
</div>

<div id="bluebox">
</div>

</body>
</html>

jQueryバージョン

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>jQueryテスト</title>

<script type="text/javascript" src="jquery-3.6.0.min.js">
</script>
<script>
  // クリックしたdiv要素のbgcolorをconsole.logに表示する
  // jqueryスクリプト
$(function() {
  $("div").click(function() {
    var bgcolor = $(this).css("background-color"); 
    console.log(bgcolor);
  });
});
</script>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#redbox{
    background-color:#ff0000;
}

#bluebox{
    background-color:#0000ff;
}
</style>
</head>
<body>

<div id="redbox">
</div>

<div id="bluebox">
</div>

</body>
</html>