Webサイト制作におけるjQueryのセレクタの種類１

ｊQuery

Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめておく。

セレクタはほぼCSSと同じなので、CSSが分かっている人は一度確認しておく程度でよいと思われる。

基本的なセレクタの種類

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 基本セレクタ</title>
<style>
body, p, li, em {
  margin: 0;
  padding: 0;		
}
ol li ul li{
　color: #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p>タイプセレクタ</p>
<ul>
<li id="sampleId" >idセレクタ</li>
<li class="sampleClass">classセレクタ</li>
<li><em>子孫セレクタ</em></li>
</ul>
<ol>
<li>全称１</li>
<li>全称２</li>
<li>全称３</li>
<li>
  <ul>
    <li>全称４-１</li>
    <li>全称４-２</li>
    <li>全称４-３</li>
  </ul>
</li>
</ol>
<script>
$(function(){
　$( 'p' ).css( 'background', 'lightgreen' );
  $( 'li#sampleId' ).css( 'background', 'lightblue' );
　$( 'li.sampleClass' ).css( 'background', 'yellow' );
　$( 'li em' ).css( 'background', 'pink' );
　$( 'ol *' ).css( 'background', 'purple' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示