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>