jQuery

jQueryとは JavaScript のライブラリです。jQueryを利用することにより、HTML のDOM操作やAjaxの処理を簡潔に記述できます。

<script>

jQuery のライブラリをインポートする HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <script src="/js/jquery.min.js"></script>
  </head>
  <body>
  <!-- content -->
  </body>
</html>

CDN (Content Delivery Network) を通じて jQuery のライブラリをインポートする HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

:eq()

:eq(n) は、n 番目の要素にマッチする擬似クラスセレクタである。n は0始まりである。

1番目のli要素を指定する例を示す。

$('li:eq(0)')

:radio

:radioは、type属性がradioの要素にマッチする擬似クラスセレクタである。[type=radio]と同じである。

$('input:radio')

before()

マッチする要素の前にコンテンツを追加する。

jQueryObject.before(content[,content])
jQueryObject.before(function(index){
  /* script */
})
jQueryObject
jQueryオブジェクト
content
挿入するコンテンツ(HTML文字列、DOM要素、要素の配列又はjQueryオブジェクト)
function
HTML文字列、DOM要素又はjQueryオブジェクトを返す関数を指定する。
index
マッチした要素のインデックス番号(0始まり)

beforeの使用例を次に示す。

<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>

<script>
  $("#div5").before("<p>Inserted</p>");
</script>

上記の実行結果を示す。

div4

Inserted

div5
div6

.children()

マッチする要素の子要素を取得する。マッチする要素の直下にある子要素のみ取得し、子孫要素は取得しない。

jQueryObject.children([selector]){
  /* script */
})
jQueryObject
jQueryオブジェクト
selector
取得する子要素をフィルタするためのセレクタを指定する。セレクタにマッチする子要素だけが取得される。

引数を省略した場合、無条件にすべての子要素を取得する。