jQuery：TIPS

参考ページ

• ダウンロード： jQuery 1.10.2（非圧縮版）

• jQuery
• jQuery 開発者向けメモ
• jQueryの日本語リファレンス

◆使い方

本家サイト（http://jquery.com/）の「Download」ボタンを押してjQuery本体をダウンロードし、HTMLから呼び出す。

または、Googleのサイトに置いてあるjQueryをURLで指定して使う。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

http://ponk.jp/jquery/basic/install

◆要素の生成

var element = $("<p></p>");

↓<p></p>

var element = $("<p class='description'>テキスト</p>");
↓<p class="description">テキスト</p>

var element = $("<p>", {class: "description", text: "テキスト"});

↓<p class="description">テキスト</p>

◆要素の選択

$("#id div") ： #id を先祖にもつすべての div 要素を選択する
$("#id > div") ： #id を親にもつすべての div 子要素を選択する（孫要素は選択されない）

◆要素の追加

.append or .appendTo：子要素を最後に追加

$('#box').append('<div>…</div>') or
$('<div>…</div>').appendTo('#box)
↓
<div id="box">
      :
    <div>…</div>
</div>


.prepend or .prependTo：子要素を最初に追加

$('#box').prepend('<div>…</div>') or
$('<div>…</div>').prependTo('#box')
↓
<div id="box">
    <div>…</div>
      :
</div>


.after or .insertAfter：後ろに追加

$('#box').after('<div>…</div>') or
$('<div>…</div>').insertAfter('#box')
↓
<div id="box"></div>
<div>…</div>


.before or .insertBefore：前に追加

$('#box').before('<div>…</div>') or
$('<div>…</div>').insertBefore('#box')
↓
<div>…</div>
<div id="box"></div>

◆要素の削除

.remove
$('#box').remove();
↓
<div id="box">・・・</div> を削除

◆テキストの設定

.text

$('<name>').text("テキスト")

↓

<name>テキスト</name>

◆属性の設定

.attr

$('<img>').attr("src", "http://・・・.jpg")

↓

<img src="http://・・・.jpg">

◆全ての要素に対して関数を実行する

.each  $.each

$('#slideshow div').each(function(){
$(this).css({opacity: 0.0});
});
          ↓
<div id="slideshow">
<div style="opacity:0.0;>…</div>
<div style="opacity:0.0;>…</div>
:
</div>

Reference:
[1] jQueryのeachと$.eachの簡単な使い方のメモ

◆jQuery を高速に使う CSS セレクタの書き方

1. 何度も同じセレクタを実行しない（変数にキャッシュしておく、メソッドチェーンを使う）
2. クラスだけを指定するのは禁止
3. #id を積極的に使う
4. 途中までの結果を再利用する（変数にキャッシュしておく、メソッドチェーンを使う）
5. 子供セレクタ(>)を使うと速くなることがある

参考　jQuery を高速に使う CSS セレクタの書き方

◆jQueryでimgタグのsrc情報を取得する方法。 

例えばHTMLコードが
<img src="test.jpg" id="test" />
という時、
src = $("#test").attr('src');
で取得可能。

◆jQuery で自分自身のHTMLを取得する方法 

References
[1] jQuery で自分自身のHTMLを取得する
[2] jQueryオブジェクトとDOM要素の互換性

var htmlText = $jQueryObject[0].outerHTML;

◆classの追加、削除、取得 

追加：　.addClass("class名")
削除：　.removeClass("class名")
取得：　.hasClass("class名")

例：

        $("#play-button").on("click", function(){
            if ( $(this).hasClass("active") ){
                $(this).removeClass("active");
                 console.log("play-button is idle");
            } else {
                $(this).addClass("active");
                console.log("play-button is active");
            }
        });

以上