jQuery基礎

標記の通り、jQueryの基礎学習終了。

一昔前、一世を風靡した（らしい）jQuryについて。webでは、モダンJSならjQueryなくてもいいよね？(むしろ、「脱jQuery」)のような記事も結構見たのであえて避けてたjQuery。
学習してみて、便利さを実感。セレクタとメソッドで対象と処理を書けばもうリッチなページに早変わり！！

CDNで導入

HTMLファイルのbody閉じタグの直前に

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

構文

$(セレクタ).メソッド()

セレクタ

• "要素名"
• ".クラス名"
• "#アイディー名"

セレクタの例

セレクタの指定方法	意味
$('p')	p要素を取得する
$('#test')	idがtestの要素を取得する
$('.test')	classがtestの要素をすべて取得する
$('div p')	div要素内にあるp要素をすべて取得する
$('div, p')	div要素とp要素をすべて取得する
$('div > p')	div要素の直下にあるp要素のみを取得する

属性フィルタ

$('HTML要素[属性名(id,class,nameなど)属性フィルタ(^,$,*)="属性値"]’)

• 部分一致（*）
• 前方一致（^）
• 後方一致（$）

html

   <ul>
     <li class="list-test">項目1</li>
     <li class="sample-list">項目2</li>
     <li class="sample-text">項目3</li>
   </ul>

js

$(function() {
// class属性値の先頭が「sample」の要素だけを抽出する
  const text = $('li[class^="sample"]').text();
  console.log(text);
});