jQueryセレクタの基本と応用

以下に、jQueryセレクタの指定方法を表形式でまとめました。
補足がある方を遠慮せずコメントをいただければ幸いです。

---

以下は、**jQueryによるカスタムセレクタかどうか**を示す列を追加した表です。

| **カテゴリ**      | **セレクタ例**                        | **説明**                                   | **例**                                                                 | **jQueryカスタムセレクタ** |
|-------------------|---------------------------------------|-------------------------------------------|-----------------------------------------------------------------------|----------------------------|
| **IDセレクタ**     | `$("#id")`                           | 特定のIDを持つ要素を選択                   | `$("#header").hide();` IDが`header`の要素を非表示に                  | ❌                         |
| **クラスセレクタ** | `$(".class")`                        | 特定のクラスを持つ要素を選択               | `$(".active").addClass("highlight");` クラスが`active`に`highlight`追加| ❌                         |
| **タグセレクタ**   | `$("tag")`                           | 特定のタグ名の要素を選択                   | `$("p").css("color", "blue");` 全ての`<p>`タグを青に                 | ❌                         |
| **グループセレクタ** | `$("a, p, div")`                    | 複数のタグやセレクタを同時に選択           | `$("*").hide();` 全ての要素を非表示                                   | ❌                         |
| **子孫セレクタ**   | `$("#id tag")`                       | 特定の親子関係にある要素を選択             | `$("#menu li").css("color", "red");` ID`menu`の子`<li>`を赤に        | ❌                         |
| **直接の子セレクタ** | `$("#id > tag")`                    | 親の直接の子要素を選択                     | `$("#list > li").css("font-size", "20px");` 直下の`<li>`を拡大       | ❌                         |
| **兄弟セレクタ**   | `$("#id + tag")`                     | 指定要素の直後の兄弟要素を選択             | `$("#item1 + p").css("color", "green");` `#item1`の直後の`<p>`を緑に | ❌                         |
|                   | `$("#id ~ tag")`                     | 指定要素の後に続く兄弟要素を全て選択       | `$("#item ~ li").addClass("bg-red");` `#item`以降の`<li>`を装飾      | ❌                         |
| **属性セレクタ**   | `$("[attr]")`                        | 属性を持つ要素を選択                       | `$("[disabled]").hide();` 無効化された要素を非表示                   | ❌                         |
|                   | `$("[attr='value']")`                | 属性の値が一致する要素を選択               | `$("[type='checkbox']").prop("checked", true);` チェックボックスを選択| ❌                         |
|                   | `$("[attr^='value']")`               | 属性が指定値で始まる要素を選択             | `$("[href^='http']").css("color", "blue");` httpで始まるリンクを青に | ❌                         |
|                   | `$("[attr$='value']")`               | 属性が指定値で終わる要素を選択             | `$("[src$='.png']").hide();` PNG画像を非表示                        | ❌                         |
|                   | `$("[attr*='value']")`               | 属性が指定値を含む要素を選択               | `$("[title*='sample']").css("border", "1px solid red");` タイトルがsampleを含む要素に赤枠 | ❌                         |
| **フォーム関連**   | `:input`                             | 全ての入力要素を選択                       | `$(":input").val("");` 全入力フォームをリセット                     | ✅                         |
|                   | `:text`                              | テキストボックスを選択                     | `$(":text").addClass("highlight");` テキスト入力を強調表示           | ✅                         |
|                   | `:radio`                             | ラジオボタンを選択                         | `$(":radio").prop("checked", true);` 全てのラジオボタンを選択        | ✅                         |
|                   | `:checkbox`                          | チェックボックスを選択                     | `$(":checkbox:checked").css("color", "green");` チェックされたものを緑に | ✅                         |
|                   | `:submit`                            | 送信ボタンを選択                           | `$(":submit").attr("disabled", true);` 送信ボタンを無効化           | ✅                         |
|                   | `:button`                            | ボタンを選択                               | `$(":button").css("background", "yellow");` ボタンを黄色に           | ✅                         |
| **状態セレクタ**   | `:first`                             | 最初の要素を選択                           | `$("ul li:first").css("color", "red");` 最初の`<li>`を赤に           | ✅                         |
|                   | `:last`                              | 最後の要素を選択                           | `$("ul li:last").css("color", "blue");` 最後の`<li>`を青に           | ✅                         |
|                   | `:even`                              | 偶数番目の要素を選択                       | `$("tr:even").css("background", "#f2f2f2");` 偶数行の背景色を変更  | ✅                         |
|                   | `:odd`                               | 奇数番目の要素を選択                       | `$("tr:odd").css("background", "#ddd");` 奇数行の背景色を変更      | ✅                         |
|                   | `:eq(index)`                         | 指定したインデックスの要素を選択           | `$("li:eq(2)").css("color", "orange");` 3番目の`<li>`をオレンジに   | ✅                         |
|                   | `:gt(index)`                         | 指定インデックスより後の要素を選択         | `$("li:gt(1)").hide();` 2番目以降の`<li>`を非表示                 | ✅                         |
|                   | `:lt(index)`                         | 指定インデックスより前の要素を選択         | `$("li:lt(2)").css("font-weight", "bold");` 最初の2つを太字に       | ✅                         |
| **コンテンツ系**   | `:contains("text")`                  | 指定テキストを含む要素を選択               | `$(":contains('重要')").css("color", "red");` 重要を含む要素を赤に   | ✅                         |
|                   | `:empty`                             | 子要素を持たない要素を選択                 | `$(":empty").remove();` 空の要素を削除                              | ✅                         |
|                   | `:has(selector)`                     | 子要素に指定のセレクタを持つものを選択     | `$(":has('img')").css("border", "1px solid green");` 画像を含む要素に枠線 | ✅                         |
|                   | `:parent`                            | 子要素を持つ要素を選択                     | `$(":parent").css("background", "lightgrey");` 子要素があるものを灰色に | ✅                         |


### 説明
- **✅（カスタムセレクタ）**: jQueryが提供する独自のセレクタ。
- **❌（標準セレクタ）**: CSSの標準セレクタ（ブラウザでもサポートされているもの）。

---

### **カスタムセレクタの補足**

#### **カスタムセレクタとは？**
jQueryが標準で提供しているセレクタに加え、独自に条件を定義して利用できるセレクタです。以下のように作成します。

```javascript
// カスタムセレクタの定義
$.expr.pseudos.customSelector = function(elem) {
    return $(elem).hasClass('custom-class'); // 例: 'custom-class' を持つ要素
};
```

これにより、`div:customSelector` のようにセレクタを使って要素を選択できます。