Web開発の基本知識（メモ用）

背景

フロントサイドのソースを見たら、なんじゃこれ？のこれをメモする目的

jQuery

• $から始まる
• ready(function(){})関数

内側の関数は：HTMLの読み込みが終わった後に、実行される。

例

$(document).ready(function() {
　　ここに処理記述
});

readyが省略可能

上記の例の省略形

$(function() {
　　ここに処理記述
});

• 各種セレクター

1.要素セレクター：$("li").css("color", "blue");

要素セレクター

<ul>
  <li>要素</li>
</ul>

2.IDセレクター：$("#myID").css("color", "blue");

IDセレクター

<ul>
  <li id="myID">IDセレクターの場合、"#"を使う</li>
</ul>

3.クラスセレクター：$(".myClass").css("color", "blue");

クラスセレクター

<ul>
  <li class="myClass">クラスセレクターの場合、"."を使う</li>
</ul>

4.子孫セレクター：$(".myClass strong").css("color", "blue");

クラスセレクター

<ul>
  <li class="myClass"><strong>子孫セレクター</strong>の場合、"space"を使う</li>
</ul>

5.ユニバーサルセレクター：$(".li *").css("color", "blue");

ユニバーサルセレクター

<ul>
  <li><strong>ユニバーサルセレクター</strong>の場合、"*"を使う</li>
  <li><span>ユニバーサルセレクター</span>の場合、"*"を使う</li>
</ul>

6.グループセレクター：$("#myId1", #myId3).css("color", "blue");

グループセレクター

<ul>
  <li id="myId1">IDセレクターの場合、","を使う</li>
  <li id="myId2">IDセレクターの場合、","を使う</li>
  <li id="myId3">IDセレクターの場合、","を使う</li>
</ul>

まとめ

セレクター	サンプル	備考
要素	$("li").css("color", "blue");
ID	$("#myID").css("color", "blue");	"#"を使う
クラス	$(".myClass").css("color", "blue");	"."を使う
子孫	$(".myClass strong").css("color", "blue");	spaceを使う
ユニバーサル	$(".li *").css("color", "blue");	"*"を使う
グループ	$("#myId1", #myId3).css("color", "blue");	","を使う