こんにちは、かつコーチです。
jQueryを使い始めたばかりの頃、「$()の中に何を書けばいいのか分からない」と悩んだ経験はありませんか。
私も最初は、CSSのセレクタと同じ書き方でいいのか、それとも別の書き方があるのか、混乱していました。
この記事では、jQueryの基本である $() セレクタの書き方を、CSSセレクタや素のJavaScriptの querySelector との違いも交えながら解説します。
読み終える頃には、要素の取得方法に迷わなくなっているはずです。
$()セレクタの基本
$()とは何か
jQueryでは、操作したいHTML要素を取得するときに $() という関数を使います。
これをセレクタ（HTML要素を指定するための書き方）と呼びます。
$('セレクタ')
この $() の中にCSSと同じ書き方でセレクタを指定すると、該当する要素をまとめて取得できます。
id・class・タグ名での指定方法
もっとも基本的な3つの指定方法を見ていきましょう。
<h1 id="title">見出しです</h1>
<p class="text">本文です</p>
<button>ボタンです</button>
// idで指定（先頭に#）
$('#title').css('color', 'red');
// classで指定（先頭に.）
$('.text').css('color', 'blue');
// タグ名で指定（そのまま）
$('button').css('color', 'green');
# はid、. はclass、何もつけなければタグ名という点は、CSSの書き方とまったく同じです。
CSSが書ける人であれば、この時点でほとんど迷わず使えるはずです。
CSSセレクタとの違い
基本的な書き方はCSSと同じ
先ほどの例からも分かる通り、jQueryのセレクタは基本的にCSSセレクタの書き方をそのまま流用できます。
子孫セレクタや属性セレクタも同様です。
// 子孫セレクタ（.card の中の .title）
$('.card .title').text('タイトル更新');
// 属性セレクタ（data-status="done" を持つ要素）
$('[data-status="done"]').addClass('completed');
// 複数条件の組み合わせ
$('ul.list > li:first-child').addClass('active');
:first-child のような擬似クラス（要素の状態や位置を指定するCSSの記法）も使えるため、CSSの知識がそのまま活きます。
jQuery独自の拡張セレクタ
jQueryには、CSSの標準仕様にはない独自の拡張セレクタも用意されています。
代表的なものが :visible（表示されている要素のみ）や :hidden（非表示の要素のみ）です。
// 表示されている要素だけを取得
$('.item:visible').fadeOut();
// フォーム部品だけを取得
$(':input').prop('disabled', true);
これらはCSSでは存在しない書き方なので、「CSSセレクタ＋jQuery独自の拡張」という理解をしておくと整理しやすいです。
querySelectorとの違い
素のJavaScriptとの書き方比較
素のJavaScriptで同じように要素を取得する場合は、document.querySelector や document.querySelectorAll を使います。
// 素のJavaScript：1つだけ取得
const title = document.querySelector('#title');
title.style.color = 'red';
// 素のJavaScript：複数取得してループ処理
const texts = document.querySelectorAll('.text');
texts.forEach(function (el) {
el.style.color = 'blue';
});
// jQuery：1つでも複数でも書き方は同じ
$('#title').css('color', 'red');
$('.text').css('color', 'blue');
見比べると分かる通り、jQueryは「1件取得」と「複数件取得」を意識せず、同じ $() で統一的に扱える点が大きな特徴です。
戻り値の違いに注意する
素のJavaScriptとjQueryでは、セレクタで取得したものの型（データの種類）が異なります。
querySelector はHTML要素そのものを返しますが、$() はjQueryオブジェクト（jQuery独自の機能を使えるように要素をラップしたもの）を返します。
このため、jQueryオブジェクトに対して素のJavaScriptのメソッド（style.colorなど）をそのまま使おうとするとエラーになります。
よくあるつまずきポイント・エラー対処
jQueryオブジェクトとDOM要素を混同するミス
私が初心者の頃、実際にハマったのがこのパターンです。
❌ Before（jQueryで取得したのに素のJavaScriptの書き方をしてしまう）
$('#title').style.color = 'red';
// Uncaught TypeError: Cannot set properties of undefined (setting 'color')
コンソールにこのエラーが出て、最初は原因がまったく分かりませんでした。
調べてみると、$('#title') はDOM要素そのものではなく、jQueryオブジェクトを返しているため、.style というプロパティを持っていないことが原因でした。
✅ After（jQueryのメソッドを使う）
$('#title').css('color', 'red');
もし、どうしても素のJavaScriptのDOM要素として扱いたい場合は、[0] や .get(0) を使ってDOM要素を取り出すこともできます。
// jQueryオブジェクトからDOM要素を取り出す
const titleEl = $('#title')[0];
titleEl.style.color = 'red';
このように「今扱っているのはjQueryオブジェクトなのか、DOM要素なのか」を意識することが、エラーを避けるコツです。
まとめ
この記事のポイント
$()の基本的な書き方はCSSセレクタとほぼ同じである- id・class・タグ名・子孫セレクタ・属性セレクタはそのまま使える
:visible:hiddenなどjQuery独自の拡張セレクタもあるquerySelectorはDOM要素、$()はjQueryオブジェクトを返す点が最大の違いである- jQueryオブジェクトに素のJavaScriptのプロパティを直接使おうとするとエラーになる
次に読むべき記事
セレクタで取得した要素を連続して操作したい方は、「メソッドチェーンの書き方と考え方」もあわせてご覧ください。
jQueryの基礎から復習したい方は、「jQueryとは？2026年でも使われる理由とインストール方法」がおすすめです。
タグ: jQuery, 初心者向け, 基本文法