読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryのセレクタについてまとめ。

jQuery
<スポンサーリンク>

でしゃばらないJavaScript(Unobstrusive JavaScript)

jQueryの開発者の中で注目された「でしゃばらないJavaScript(Unobstrusive JavaScript)」とは、
「HTML文書は、「スタイル」と「振る舞い」と「構造」を適切に分離させようという手法のことである。
具体的には、以下のように分離するということ。
bodyタグにJavaScriptを書いたりしていたら、「でしゃばっているJavaScript」であるといえる。

<html>
  <head>
     <!-- ここにスタイルを配置 -->
     <!-- ローカルなスタイル要素と、インポートしたスタイルシートなど -->

     <!-- 次に、ここには「振る舞い」を配置 -->
     <!-- ローカルなスクリプト要素と、インポートしたスクリプトファイル -->
  </head>
  <body>
     <!--

        で、ここには「構造」
        HTMLの構造的な要素を配置する
     -->
   </body>
</html>

なぜ、このように構造、スタイル、振る舞いをページ内で区分けするのか?
それはひとえに、読みやすさの向上と保守の容易さを向上させるためである。

デザインパターンでもそうだが、それぞれの機能を分離することで、片方の変更が、もう片方に及ぼす影響を小さくすることができる。

セレクタとは

セレクタの定義は、ページにある目標の要素を識別するのに使わる式(expression)のことである。
基本的にはこんな感じ。IDやクラスを指定して、特定のタグを指し示す。

CSSセレクタ 意味
a すべてのa要素を対象とする
#someID someIDというID値を持つ要素を対象とする
.someClass someClassというクラスを持つ全ての要素を対象とする
p a.someClass p要素の子孫であり、someClassというクラスを持つa要素を対象とする。

このままだと、listとか、tableとか、列になって並ぶものの何番目を取得する、っていうのが難しい。
そこで、位置的フィルタを使う。
位置的フィルタなら、「:first」とやれば最初に一致する要素、「:even」だったら偶数番目の要素、といったように、特定の位置にある要素を取得することができる。

たとえば、以下のサンプルではresultのところに「Google」というリストのテキストを取得して、表示する。
また、2番目のリストを集めて表示するとかをやっている。

<!DOCTYPE>
<html>
<head>
  	<!--
  	<link rel="stylesheet" type="text/css" href="style.css" />
    -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    //test1クラスのulを取得
    var linkText = $('ul.test1');
    console.log(linkText.length);

    var linkGoogle = $('ul.test1 li:eq(1)');

    $('#result').html(linkGoogle.text());

    var yahoo2Link = $('ul.test2 li:first-child');
    console.log(yahoo2Link);
    //要素の後ろに、jQueryオブジェクトを挿入する
    $('#result').after(yahoo2Link);
    
    //コンテクスト内でn番目となる子要素を選択。ここではGoogleとhatena2
    var thirdLinks = $('ul li:nth-child(2)');
    $('#result2').html(thirdLinks);
  });
</script>
</head>
<body>
<ul class="test1">
  <li><a href="http://yahoo.co.jp">Yahoo</a></li>
  <li><a href="http://google.co.jp">Google</a></li>
  <li><a href="http://www.hatena.ne.jp/">hatena</a></li>
</ul>

<ul class="test2">
  <li><a href="http://yahoo.co.jp">Yahoo2</a></li>
  <li><a href="http://google.co.jp">Google2</a></li>
  <li><a href="http://www.hatena.ne.jp/">hatena2</a></li>
</ul>

<div id="result"></div>
<br>
<hr>
<div id="result2"></div>
</body>
</html>
セレクタ 意味
:first コンテクスト内で最初に一致する要素を選択
:last コンテクスト内で最後に一致する要素を選択
:first-child コンテクスト内で最初の「子要素」を選択
:last-child コンテクスト内で最初の「最後の子要素」を選択
:only-child 兄弟を持たないすべての要素を返す(一人っ子集まれ!)
nth-child(n) コンテクスト内でn番目となる子要素を選択
nth-child(even) コンテクスト内で偶数番目のすべての要素を選択
:nth-child(odd) コンテクスト内で奇数番目のすべての要素を選択
:even コンテクスト内の偶数番目の要素を選択
:odd 気数番目
:eq(n) n番目に一致する要素
:gt(n) n番目に一致する要素を除き、それ以降の要素
:lt(n) n番目に一致する要素を除き、それ以前の要素

勉強した本(参考)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)


色々探したけれど、jQueryを基礎からちゃんと学ぶならこの本が決定版になる気がしている。
もっと読み進めたい。

感謝のプログラミング

今回で感謝のプログラミングは【573時間目】
10000時間まで、あと【9427時間】