jQueryで要素を操作する

今回はjQueryで要素を操作する関数についてご紹介します。

要素内の文字列を操作する

要素内に記述されている文字列を取得するには以下の関数を使います。

<div id="target">
  <h1>bob</h1>
</div>

console.log($("#target").html()); // 出力:  <h1>bob</h1>

console.log($("#target").text()); // 出力:  bob

双方ともHTMLファイル中のインデントなども戻り値として返すので注意してください。

html関数はタグを含めて返し、text関数はタグを含めずに返します。

タグ内の文字列の変更にも同じ関数を使います。

$("#target").html("<h1>changed</h1>"); // changedが見出しになる

$("#target").text("<h1>changed</h1>"); // <h1></h1>もページ上に表示される

引数として関数を渡すこともできます。

<p>bob</p>
<p>bobo</p>
<p>bobob</p>

$("p").html(function(index, originalText) {
    return "<h1>changed</h1>";
}); // changedが見出しになる

$("p").text(function(index, originalText) {
    return "<h1>changed</h1>";
}); // <h1></h1>もページ上に表示される

text関数に引数で渡した無名の関数で、今回は引数がindexとoriginalTextとなっています。

$(selector)で選ばれた要素に対して、ファイル内の上に記述されている順で0から番号が振られ、その番号がひとつ目の引数に渡されます。

二つ目の引数は変更される前の、現在のテキストです。

要素の属性を操作する

要素に与えられた属性を取得するには以下の関数を使います。

<a id="link" href="https://note.com/megugu_vr">

console.log($("#link").attr("href")); // 出力:https://note.com/megugu_vr

文字列の変更と同様に属性を変更するための関数も取得する関数と同じです。

$("#link").attr("href", "https://twitter.com/megugu_vr");

引数にオブジェクトを渡すと、複数の属性を一度に変更できます。

$("#link").attr({
    "href": "https://twitter.com/megugu_vr",
    "class": "link-button"
});

また、引数に関数も渡せます。渡した関数の引数は、要素の文字列を変更するときと同じです。

$("#link").attr("href", function(index, originalAttr) {
    return "https://twitter.com/megugu_vr";
});

要素の追加

ページに新しい要素を追加するには、まずプログラム上で要素を生成しなければなりません。jQueryでは以下のような方法で要素を生成できます。

const para = $("<p></p>"); // 要素の生成

const div = $("<div></div>", { // 引数としてオブジェクトを渡す
    "class": "success",
    "id": "create",
    "css": {
        border: "1px solid black"
    },
    "on": {
        click: function() { /* マウスクリック時の処理 */ }
    }
});

jQueryでは$関数にセレクタではなく、タグを文字列として渡すと要素が生成できます。同時に引数としてオブジェクトを渡すと、生成と同時に属性などの設定を行います。

要素の追加には４つの関数が用意されています。

・append　選択した要素内の最後に追加
・preappend　選択した要素内の最初に追加
・after　選択した要素の後に追加
・before　選択した要素の前に追加

これらの関数は引数としてひとつ以上の要素を受け取ることができます。以下に例を示します。

const para = $("<p></p>").text("add text");
$("body").append(para);

const para1 = $("<p></p>").text("add text1");
const para2 = $("<p></p>").text("add text2");
const para3 = $("<p></p>").text("add text3");

$("body").append(para1, para2, para3);

要素の削除

要素を削除するために使えそうな関数はふたつあります。

・remove 選択した要素ごと削除する
・empty 選択した要素内を空にする

引数にセレクタを書くことで、対象の要素を絞ることもできます。

$("#target").remove();

$("div").remove(".targets"); // divの中でtargetsのクラスがついているものが対象

classの操作

要素に対するclassを付け替えるには以下の関数が用意されています。

// classの追加
$("#target").addClass("change-class");

// classの削除
$("#target").removeClass("change-class");

// classの追加or削除
$("#target").toggleClass("change-class");

要素のサイズを操作する

要素のサイズを変更するには以下の関数を使用します。

$("#target").width(500);

$("#target").height(500);

また、サイズを取得するには以下の関数があります。

・width、height
・innerWidth、innerHeight
・outerWidth、outerHeight

これらの関数で取得できる値と要素の関係を以下に示します。

outerWidth関数は引数でtrueを指定するとmarginを含めたサイズを返します。