jQuery CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
上記のようにCDN方式はダウンロードが必要なく、コードを書くだけで使えます。
Vanilla JavaScript
<body>
<ul id="menu">
<li class="item" name="list">menu1</li>
<li class="item" name="list">menu2</li>
<li class="item" name="list">menu3</li>
</ul>
<script>
// 1. ID (#menu)
// getElementById
document.getElementById("menu").style.border = "1px solid black";
// 2. Tag (li)
// getElementsByTagNameは複数のliを返します。
var liList = document.getElementsByTagName("li");
for (var i = 0; i < liList.length; i++) {
liList[i].style.fontWeight = "bold";
}
// 3. Class (.item)
// getElementsByClassNameは複数のitemを返します。
var items = document.getElementsByClassName("item");
for (var i = 0; i < items.length; i++) {
items[i].style.color = "#f00";
}
// 4. Name (name='list')
// getElementsByName
var names = document.getElementsByName("list");
for (var i = 0; i < names.length; i++) {
names[i].style.backgroundColor = "black";
}
</script>
</body>
jQuery
<body>
<ul id="menu">
<li class="item" name="list">menu1</li>
<li class="item" name="list">menu2</li>
<li class="item" name="list">menu3</li>
</ul>
<script>
// 1. ID (#)
$("#menu").css("border", "1px solid black");
// 2. Tag
$("li").css("font-weight", "bold");
// 3. Class (.)
$(".item").css("color", "#f00");
// 4. Name
$("[name='list']").css("background-color", "#eee");
// idがmenuで、liを全部赤色に
$("#menu li").css("color", "red");
</script>
</body>
jQueryのメリット
jQueryの方が簡単でよく使われます。そしてjQueryは自動的に複数のコンポーネントに適用されます。
Vanilla JavaScriptではforで繰り返したものがjQueryでは必要ありません。