よく使うjqueryのお洒落な機能まとめ(クラス系・要素生成編)

クラス系・要素生成

クラス系は「クラスを追加」「クラスを外す」「クラスをもっているか判別」など使いやすいものばかりですね。
元々のJavascriptでこれらのスクリプトを書くとちょっと長くなってしまいますが、jQueryならささっと書けるのがおしゃれです。

クラス系

  • addClass(“クラス名”) -> クラスを追加

  • removeClass(“クラス名”) -> クラスを外す

  • toggleClass(“クラス名”) -> クラスを持っていれば外す・持っていなければ追加する

  • hasClass(“クラス名”) -> クラスをもっているかどうか

要素生成

  • 要素をつくる
var 変数名 = $("<生成する要素>");
  • 生成した要素にidやclassをつける
var 変数名 = $("<生成する要素>",{
  "id" : "ID名",
  "class" : "クラス名"
});
  • 生成した要素にテキストを記述する
var 変数名 = $("<生成する要素>",{
  text : "ここにテキストを書きます"
});
  • data(‘名前’) -> data属性をつける

  • attr(‘data-名前’,’値’) -> data属性に値を入れる

  • html(“タグなどを記入”) -> HTMLを記述する

  • css(“プロパティ名”,”値”) -> 生成した要素にCSSを追加する

  • (“生成した要素のID”).append(“追加先の要素”) -> (仕上げ)生成した要素を既存の要素に追加する
    ※(変数名).append(“追加先の要素”)でもOK

(サンプル:jquery側)

var sampleDiv = $("<div>",{
  "id" : "sample",
  "class" : "test01"
});

/* data属性 */
("#sample").data("test");
("#sample").attr("data-test","hoge");

/* css */
("#sample").css("background-color","red");

/* html */
("#sample").html("<p>赤い背景のDIV要素</p>");

("#sample").append("<body>");

(サンプル:実行後html)

<html>
<head>
  <title>サンプル</title>
  <!-- 省略 -->
</head>
<body>
  <!-- 生成されたDOM -->
  <div id="sample" class="test01" data-test="hoge">
    <p>赤い背景のDIV要素</p>
  </div>
</body>
</html>


関連:よく使うjqueryのお洒落な機能まとめ(表示・非表示編)