jQuery 子孫セレクタとユニバーサルセレクタと複数
jQuery 子孫セレクタ
子孫セレクタとは
要素には親要素と子要素があります。
ulだと子はliですね。
それとdivの中にp要素を入れ子にしても子孫ということになります。
サンプル
$(“div p”)
要素の間にスペースを入れます。
絶対パスみたいな感覚で使用しますね。
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“div p”).css(“color”,”red”);
});
</script>
<title>
</title>
</head>
<body>
<div>
<p>red</p>
</div>
</body>
<html>
この場合p要素だけでも指定はできますが。
jQuery ユニバーサルセレクタ
ユニバーサルセレクタは
*アスタリスクで指定することにすべての要素を指定できます。
サンプル
$(“div *”)
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“div *”).css(“color”,”red”);
});
</script>
<title>
</title>
</head>
<body>
<div>
<p>red</p>
</div>
</body>
<html>
divの中の全てが指定されました。
jQuery 複数のグループセレクタ
グループセレクタは
複数の要素をしていすることができます。
サンプル
$(“.red,.Green”)
複数の要素を,でつなげることにより複数のクラスを指定してます。
ここではfontを72pxにしました。
他にp要素がなければp要素を指定するかbodyで
fontsizeを設定してもいいですがサンプルなのでこのようにしました。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red,.Green”).css(“font-size”,”72px”);
});
</script>
<title>
</title>
</head>
<body>
<div>
<p class =”red”>red</p>
<p class =”Green”>Green</p>
</div>
</body>
<html>
