jQuery初歩

これさえ覚えればとりあえず動くjQuery

要素の指定方法

記述テンプレ

$("要素")

<タグ>（<div>など）

$("div")

id="sample" IDで指定したい場合は # + ID名

$("#sample")

class="sample" クラスで指定したい場合は . + クラス名

$(".sample")

指定した要素に対してアクションを指定する

要素内のテキストを書き換える処理

$("要素").text("代替テキスト");

～したら～する

多くの場合、～したら～するという記述になると思う。例えばクリックされたら～の場合は、

$("要素").click(function(){
  ～処理内容～
});

例１：<button>がクリックされたら<div>内を代替テキストに書き換え

$("button").click(function(){
  $("div").text("代替テキスト");
});

例２：<button>がクリックされたらそのボタンのテキストを代替テキストに書き換え

$("button").click(function(){
  $(this).text("代替テキスト");
});

要素に追加/コピー/削除する

記述	説明
prepend()	指定要素内部の先頭に追加
append()	指定要素内部の最後に追加
before()	指定要素の前に追加
after()	指定要素の後に追加
clone()	指定要素を別な要素にコピー
remove()	指定要素を削除

例：<div></div>内に<ul><li>リスト<\/li></ul>を追加

$("div").append("<ul><li>リスト</li></ul>");

要素の親兄弟を選択する

下記の様な構成だったとして、一番下の階層にテキストを加えたい…

<div>
  <div class="mine">
    <div>

    </div>
  </div>
  <div>

  </div>
</div>

$("div").text("～");
と指定してしまうと全ての<div>を対象としてしまう。

親兄弟の指定1

記述	説明
parent()	対象の親要素(一つ上の階層)を指定
siblings()	対象の兄弟要素(同階層)を指定
children()	対象の子要素(一つ下の階層)を指定

例：$(".mine")をから考えて、下層のみを対象にテキストを追加する。

$(".mine").children().text("～");

親兄弟の指定2

記述	説明
next()	対象の次の兄弟要素を指定
prev()	対象の前の兄弟要素を指定

親兄弟の指定のオプション

記述	説明
:first	指定要素の中で最初のものを対象とする
:first-child	指定要素の最初の子要素を対象とする
:last	指定要素の中で最後のものを対象とする
:last-child	指定要素の最後の子要素を対象とする

例：最後のdiv要素のみテキストを追加

$("div:last").text("～");

ある要素をそのまま複製したい時は.clone()を使う

例：最初<p></p>の要素を最後の<div></div>に複製

$("p:first").clone().appendTo("div:last"); or $("p").clone().prependTo("div");

記述	説明
appendTo()	()に指定した要素内の最後に追加
prependTo()	()に指定した要素内の先頭に追加

例：最初<p></p>の要素を最後の<div></div>にコピー

$("p:first").clone().appendTo("div:last"); or $("p").clone().prependTo("div");