ハック
2016.02.01
5,176
jQuery

よく使う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のお洒落な機能まとめ(表示・非表示編)