質問: JavaScriptの勉強をいています。 以下のコードはJavaScript/jQueryのサンプルのコードで正常に動作します。 ですが、クラス名の指定に「.」が付与されているところが 2か所あり、なぜ「.」が付与されるのか理解できません。 1番の「$(idName).find(**'.check'**).addClass('crowded'); //1_「.」 2番の「$(**'.check'**).on('click',function(){ //2_「.」 はどうして、どちらともクラス名の前に「.」が必要なのでしょうか? どちらも「.」は必要ないと思うのですが、実際に「.」を削除すると動作しません。 ※文法的にはシングルクォーテーションで囲うだけで問題なく指定出来ると思うのですが。 1番と2番のコードでクラス名を指定するために「.」が必要である理由を教えて下さい。 =クラス名を指定する時に「.」が必要になる場合と、 必要ない場合の違いを教えて下さい。 --- 追記 クラス名の指定に「.」が必要、、、というだけでも理解出来ないのですが もっとわからないのは「(**'.check'**)」の方です。 仮に「.」が必要だとしても、なぜ「'」シングルクォーテーションの中に 「.」が入るのでしょうか? 「(**.'check'**)」とか「**find.('check')**」ならなんとか納得出来ます。 ※メソッドとして扱うから、、、という理由ですから。 このことも含め、クラス名のを指定する時に「.」が必要な場合と 必要ない場合の違いが全く理解できません。 すいませんが、詳しい方、説明の上手な方、よろしくお願いします。 ※ネットで調べようとしたのですが、検索するためのキーワードが思いつきません。 似たような事例について詳しく書かれているページへのリンクでもOKです。 よろしく、お願いします。 コードは以下の通りです。 ※必要ないと思いますが、json、HTML/CSSも記載しておきます。 --- ``` ``` ↓ data-A.json ``` [ {"id":"js","crowded":"yes"}, {"id":"security","crowded":"no"}, {"id":"uiux","crowded":"no"} ] ``` ``` JavaScript勉強会 空き状況を確認 セキュリティ対策講座 空き状況を確認 UI/UXハッカソン 空き状況を確認 ``` ``` .list li{ border: solid 1px; width: 12.5%; float: left; margin: 10px; list-style: none; text-align: center; } .list h4{margin: 10px;} .check{ background-color: cyan; margin: 0px 3px 3px 3px; cursor: pointer; } .red{background-color: #FF0000;} .green{background-color: #00FF00;} ``` --- 画像はブラウザ上の表示です。 動作はjsonの内容を参照しており、 水色の背景色のテキスト「空き状況を確認」をクリックすると テキストコンテンツが「checkはあるよ」(背景色:ミドリ) 「ないよ」(背景色:赤)に変わります。 --- ブラウザ上の表示 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c3a1f1f3703c1758d0df237a938efcf5.jpeg) ↓ クリック後 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e94ab7b565ce9403d55605318222e77e.jpeg)
回答: > > もっとわからないのは「('.check')」の方です。 > > > CSS での指定が「.check」なのは理解できているなら、同じ「セレクタ」という概念を使っているもの、と理解すればよいのでは。jQueryは標準のDOMメソッドに(jQuery開発当時)無かった「CSSのセレクタを使って要素を取得できる」便利なツールでした。(今はquerySelectorが有りますが) 【jQueryが要素検索に使うSizzleについて。 | Ginpen.com】 【jQueryのセレクタメモ - Qiita】 【CSS セレクター - CSS: カスケーディングスタイルシート | MDN】 【CSSのセレクタとは?覚えておきたい25種類と書き方】