HTML/CSS の操作
作成日：2015年7月4日
HTML の生成
$() 関数は既存のページ要素を選択するだけではなく、HTML 文字列から要素を作成することもできます。
$("<p>Hello</p>")この式は、新しい p 要素を作成して、すぐにもページに追加できる状態にします。
<div id="sample"> <h4>Some Title</h4></div>
例えば上記のような HTML に先の要素を追加するには、以下のように記述します。
$("<p>Hello</p>").appendTo('#sample');$("<p>Hello</p>").appendTo('#sample');Some Title
<div id="sample"> <h4>Some Title</h4> <p>Hello</p></div>
要素を作成する $() メソッドの第2パラメータには、属性と値を指定できます。このパラメータはJavaScript オブジェクトの形式を取り、そのプロパティが 要素に追加すべき属性の名前と値を指定します。
$( '作成する要素' , '属性パラメータ' )
次のサンプルは、リンク要素を作成し、それにいくつかの属性を与え、それを p 要素（#appendMe）に追加している、こんなこともできるという例です（記述されているメソッドや設定については後の項で説明します）。
また、jQuery では、属性パラメータで属性を指定するだけでなく、全ての種類のイベントについてイベントハンドラを設定することもできます。
$('<a>', //基本となる <a> 要素の作成 { href: 'http://www.google.com', //href属性の指定 target: '_blank', //target属性の指定 click: function(){ //クリックハンドラの設定 alert($(this).attr('href')); //href属性の値をアラートで表示 } }) .text('アラートボックス') //テキストを設定 .css({ //リンクのスタイル設定 border: '1px solid #999', padding: '2px 10px', backgroundColor: '#EEE' }).appendTo('#appendMe'); //作成した要素を文書に追加対象となる HTML
<div> <p id="appendMe">Some Text: </p></div>
Some Text:
<div> <p id="appendMe">Some Text: <a href="http://www.google.com" target="_blank" style="border: 1px solid rgb(153, 153, 153); padding: 2px 10px; background-color: rgb(238, 238, 238);">アラートボックス</a> </p></div>
以下のような方法でも上記と同じことができます。このサンプルでは、スタイルの設定は CSS で行い（少し色を変えています）、属性やテキストは要素に直接記述しています。
#appendMe a { border: 1px solid #99CCF5; padding: 2px 10px; background-color: #D1E9F8;}$("<a href='http://www.google.com' target='_blank'>アラートボックス</a>") .click(function(){ alert($(this).attr('href'));}).appendTo('#appendMe2');Some Text:
<div> <p id="appendMe">Some Text: <a target="_blank" href="http://www.google.com">アラートボックス</a> </p></div>
HTML/CSS の操作
HTML及びテキスト
テキストの変更と取得 text()
HTML 要素に含まれるテキストを変更または取得するには、text() を使用します。
テキストを変更するには、text(...) の引数に変更後のテキストを記述します。 テキストはダブルクオーテーション、またはシングルクオーテーションで囲む必要があります。
$("li").text("Changed!");<ul><li class="odd">list item 1</li><li id="item2">list item 2</li><li class="odd">list item 3</li><li>list item 4</li></ul>
$("li").text("Changed!");$("li#item2").text("item2 変更");$("li.odd").text("奇数の項'クラス'");$("li:odd").text('偶数の項"フィルタ"');- list item 1
- list item 2
- list item 3
- list item 4
text() の引数に何も指定しなければ、セレクタで指定した要素に含まれるテキストを取得することができます。以下の例では取得したテキストを 変数「someText」に代入しています。
var someText = $('p#text1').text(); //id が text1 の p 要素のテキストを変数「someText」に取得alert(someText); //アラートで表示//以下のように変数に格納せずに直接アラートで表示することもできます。alert($('p#text1').text());<p id="text1">Paragraph 1 </p><p id="text2">Paragraph 2</p><p id="text3">Paragraph 3</p>
$('p#text3').text($('p#text1').text() + '文字列の結合' + $('p#text2').text());
Paragraph 1
Paragraph 2
Paragraph 3
$('p#text3').text($('p#text1').text() + '文字列の結合' + $('p#text2').text()); は以下のように書き換えることができます。
var text1 = $('p#text1').text(); //p#text1のテキストを取得var text2 = $('p#text2').text(); //p#text2のテキストを取得var newText = text1 + '文字列の結合' + text2; //文字列を結合して新しい文字列を生成し、変数（newText）に代入$('p#text3').text(newText); //p#text3のテキストを新しい文字列に変更HTML の変更と取得 html()
HTML のタグを含むテキストを操作する場合は html() を使用します。
$("p#text1").html("<strong>変更後</strong>");<p id="text1">Paragraph 1 </p><p id="text2">Paragraph 2</p>
$("p#text1").html("<strong>変更後</strong>");
$("p#text2").html('<a href="http://www.google.com"><em>Google</em></a>');
Paragraph 1
Paragraph 2
html() の引数に何も指定しなければ、セレクタで指定した要素に含まれる HTML を取得できます。
$("p#text2").html($("p#text1").html());<p id="text1"><a href="index.html"><strong>index.html</strong></a></p><p id="text2">text</p>
$("p#text2").html($("p#text1").html());
text
$("p#text2").html($("p#text1").html()); は以下と同じことです。
var text1_html = $("p#text1").html(); //HTMLを取得し変数に代入$("p#text2").html(text1_html); //HTML を変更text() と html() の違い
- html メソッドは HTML 文字列を返しますが、text メソッドはテキスト部分のみを取得して返します。
- html メソッドでは複数の要素にマッチしても最初の 1 つしか返しませんが、text メソッドはすべてのテキストを結合したものを返します。
<p><span>Lorem ipsum</span> dolor <em>sit</em> amet. </p><p>Dolorum, praesentium, reprehenderit.</p><p>Quasi, natus, <strong>iusto</strong>, eveniet.</p>
Lorem ipsum dolorsit amet.
Dolorum, praesentium, reprehenderit.
Quasi, natus,iusto, eveniet.
text(content) と html(content)
- html メソッドは HTML 文字列（タグ）をそのままセットします。
- text メソッドでは HTML 文字列（タグ）をエスケープ処理したものをセットします(その結果、タグがそのまま表示されます)。
- なお、テキストの取得時には text/html メソッドですべての要素を取得するか、最初の要素のみを取得するかという違いがありましたが、 設定時にはこうした違いはありません。いずれも合致するすべての要素に対してテキストを設定します。
<p id="text1"><strong>Lorem ipsum</strong> dolor <em>sit</em> amet. </p><p id="text2">Dolorum, praesentium, reprehenderit.</p><p id="text3">Quasi, natus, iusto, eveniet.</p>
$("#text2").html($("#text1").html());
$("#text3").text($("#text1").html());
Lorem ipsum dolorsit amet.
Dolorum, praesentium, reprehenderit.
Quasi, natus, iusto, eveniet.
HTML（要素）の挿入
html() は、もともと存在していた要素の内容（コンテンツ）をすべて上書きします。
要素の内容を残したまま HTML を追加したい場合は、要素を挿入する prepend(), append(), before(), after()を使います。
先頭に挿入 prepend()
指定した要素内部の先頭に HTML を挿入するには prepend() を使用します。
$("p#text1").prepend("<strong>text1の先頭に挿入します</strong>");<div id="prpnd"> <p id="text1">Lorem ipsum dolor sit amet. </p> <p id="text2">Dolorum, praesentium, reprehenderit.</p> <p id="text3">Quasi, natus, iusto, eveniet.</p></div>
$("p#text1").prepend("<strong>text1の先頭に挿入します</strong>");
$("#prpnd").prepend("<p>prpndの先頭に挿入します</p>");
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
Quasi, natus, iusto, eveniet.
上記の２つを実行すると、HTML は以下のようになります。
<div id="prpnd"> <p>prpndの先頭に挿入します</p> <p id="text1"><strong>text1の先頭に挿入します</strong>Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p> <p id="text3">Quasi, natus, iusto, eveniet.</p></div>
上記の例では、HTML断片を渡しましたが、jQuery オブジェクトを渡すことにより、その要素を移動することもできます。
$("#prpnd").prepend($("#text3"));<div id="prpnd2"> <p id="text1">Lorem ipsum dolor sit amet. </p> <p id="text2">Dolorum, praesentium, reprehenderit.</p> <p id="text3">Quasi, natus, iusto, eveniet.</p></div>
$("#prpnd2").prepend($("#text3"));
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
Quasi, natus, iusto, eveniet.
また、挿入する対象が複数の場合は、コピーされた内容が挿入されます。
$("p").prepend($("#text3 span"));<div id="prpnd3"> <p id="text1">Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p> <p id="text3">Quasi, natus, iusto,<span>*** eveniet ***</span>.</p></div>
$("p").prepend($("#text3 span"));
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
Quasi, natus, iusto,*** eveniet ***.
<div id="prpnd3"> <p id="text1"><span>*** eveniet ***</span>Lorem ipsum dolor sit amet.</p> <p id="text2"><span>*** eveniet ***</span>Dolorum, praesentium, reprehenderit.</p> <p id="text3"><span>*** eveniet ***</span>Quasi, natus, iusto,.</p></div>
最後(末尾）に挿入 append()
指定した要素内部の最後(末尾）に HTML を挿入するには append() を使用します。
$("p#text1").append("<strong>text1の最後(末尾）に挿入します</strong>");<div id="apnd"> <p id="text1">Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p></div>
$("p#text1").append("<strong>text1の最後(末尾）に挿入します</strong>");
$("#append").append("<p>apndの最後(末尾）に挿入します</p>");
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
上記の２つを実行すると、HTML は以下のようになります。
<div id="apnd"> <p id="text1">Lorem ipsum dolor sit amet.<strong>text1の最後(末尾）に挿入します</strong></p> <p id="text2">Dolorum, praesentium, reprehenderit.</p> <p>apndの最後(末尾）に挿入します</p></div>
前に挿入 before()
指定した要素の前に HTML を挿入するには before() を使用します。
$("p#text1").before("<h3>text1の前に挿入</h3>");<div id="bfr"> <p id="text1">Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p></div>
$("p#text1").before("<h3>text1 の前に挿入</h3>");
$("#bfr").before("<h3>bfr の前に挿入</h3>");
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
上記の２つを実行すると、HTML は以下のようになります。
<h3>bfr の前に挿入</h3><div id="bfr"> <h3>text1 の前に挿入</h3> <p id="text1">Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p></div>
後ろに挿入 after()
指定した要素の後ろに HTML を挿入するには after() を使用します。
$("p#text1").after("<h3>text1 の後ろに挿入</h3>");<div id="aft"> <p id="text1">Lorem ipsum dolor sit amet.</p> <p id="text2">Dolorum, praesentium, reprehenderit.</p></div>
$("p#text1").after("<h3>text1 の後ろに挿入</h3>");
$("#aft").after("<h3>aft の後ろに挿入</h3>");
Lorem ipsum dolor sit amet.
Dolorum, praesentium, reprehenderit.
<div id="aft"> <p id="text1">Lorem ipsum dolor sit amet.</p> <h3>text1 の後ろに挿入</h3> <p id="text2">Dolorum, praesentium, reprehenderit.</p></div><h3>aft の後ろに挿入</h3>
HTML（要素）の移動
前項の「HTML（要素）の挿入」で紹介したメソッドでも、HTML（要素）の移動は可能ですが、似たようなメソッドに以下のようなものがあります。
先頭に移動 prependTo()
指定した要素を他の要素の内部の先頭に移動するには prependTo() を使用します。
$("p.content").prependTo("div.target");<div class="target"> <p>既存の子要素</p></div><p class="content">移動する要素</p>
$("p.content").prependTo("div.target");
既存の子要素
移動する要素
<div class="target"> <p class="content">移動する要素</p> <p>既存の子要素</p></div>
同じことを prepend() を使って行うには以下のようにします。
$("div.target").prepend($("p.content"));
既存の子要素
移動する要素
prepend() と prependTo() は以下のように、対象が逆になっているような関係にあります。文書の構造などに合わせて使いやすいほうを使います。
$(Target).prepend($(Content)); //prepend()$(Content).prependTo(Target); //prependTo()
prepend() と同様に HTML 断片を追加することもできます。
$("<strong>追加挿入</strong>").prependTo("p");<p>Lorem ipsum dolor sit amet.</p>
$("<strong>追加挿入</strong>").prependTo("p");
Lorem ipsum dolor sit amet.
<p><strong>追加挿入</strong>Lorem ipsum dolor sit amet.</p>
最後に移動 appendTo()
指定した要素を他の要素の内部の最後（末尾）に移動するには appendTo() を使用します。
$("p.content").appendTo("div.target");<div class="target"> <p>既存の子要素</p></div><p class="content">移動する要素</p><p><strong> Strong </strong> p 要素の移動しない部分</p>
$("p.content").appendTo("div.target");
$("strong").appendTo("p"); 挿入する対象が複数の場合コピーされた内容が挿入されます。
既存の子要素
移動する要素
Strong p 要素の移動しない部分
//$("p.content").appendTo("div.target");<div class="target"> <p>既存の子要素</p> <p class="content">移動する要素</p></div><p><strong> Strong </strong> p 要素の移動しない部分</p>//$("strong").appendTo("p");<div class="target"> <p>既存の子要素<strong> Strong </strong></p></div><p class="content">移動する要素<strong> Strong </strong></p><p> p 要素の移動しない部分<strong> Strong </strong></p>前に移動 insertBefore()
指定した要素の前に HTML を移動するには insertBefore() を使用します。
$("p.content").insertBefore("div.target");<div class="target"> <p>既存の子要素</p></div><p class="content">移動する要素</p>
$("p.content").insertBefore("div.target");
既存の子要素
移動する要素
<p class="content">移動する要素</p><div class="target"> <p>既存の子要素</p></div>
後ろに移動 insertAfter()
指定した要素の後ろに HTML を移動するには insertAfter() を使用します。
$("p.content").insertAfter("div.target");<p class="content">移動する要素</p><div class="target"> <p>既存の子要素</p></div>
$("p.content").insertAfter("div.target");
$("p").insertAfter("div.target");
移動する要素
既存の子要素
//$("p.content").insertAfter("div.target");<div class="target"> <p>既存の子要素</p></div><p class="content">移動する要素</p>//$("p").insertAfter("div.target");<div class="target"></div><p class="content">移動する要素</p><p>既存の子要素</p>HTML 要素のラップとアンラップ
指定した要素で包む wrap()
要素を渡されたHTMLタグ（html要素の他に、jQuery オブジェクトや DOM 要素を指定可能）でラップする（包み込む）のに使用します。
$('.target p').wrap($('<div class="blue"></div>'));<div class="target"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div>
サンプルで div 要素がわかりやすいように、スタイルを指定しておきます。
.blue { padding: 20px; margin: 20px; border: 1px solid #E7E3E3; background-color: #E5F6F9;}$('.target p').wrap($('<div class="blue"></div>'));
jQuery
PHP
WordPress
<div class="target"> <div class="blue"><p>jQuery</p></div> <div class="blue"><p>PHP</p></div> <div class="blue"><p>WordPress</p></div></div>
「HTML の生成」で触れた、要素を作成する $() メソッドの第2パラメータで属性を指定して以下のようにすることもできます。この第2パラメータは JavaScript オブジェクトの形式で指定します。
$('.target p').wrap($('<div >', {class: 'blue'}));
jQuery
PHP
WordPress
また、以下のように既存の要素を指定すると、クローニングしてラップします。
<div class="target"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div><div class="blue"></div>
$('.target p').wrap($('div.blue'));
jQuery
PHP
WordPress
<div class="target"> <div class="blue"><p>jQuery</p></div> <div class="blue"><p>PHP</p></div> <div class="blue"><p>WordPress</p></div> <div class="blue"></div></div>
引数に function を設定
引数に function を設定することができます。その際、引数（index :インデックス番号）を受け取ることができます。
$( "selector" ).wrap(function(index) { 任意の処理（index を利用可能） return ラップする要素;});<div> <p>apple</p> <p>orange</p> <p>grape</p> <button>Unwrap</button></div>
.test0 { color: blue;}.test1 { color: red;}.test2 { color: green;}.apple { background: #F6AEAF;}.orange { background: #F4A46B;}.grape { background:#D78CF0;}apple
orange
grape
$( "p" ).wrap(function(index) { return "<div class='test" + index + "'></div>";});$( "p" ).wrap(function(index) { return "<div class='" + $(this).text() + "'></div>";});$( "p" ).wrap(function(index) {
return "<div class='test" + index + "'></div>";
});
$( "p" ).wrap(function(index) {
return "<div class='" + $(this).text() + "'></div>";
});
全要素を包む wrapAll()
複数の要素を一括して別の要素で包む場合に使用します。
$('.target p').wrapAll($('<div class="blue"></div>'));<div class="target"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div>
$('.target p').wrapAll($('<div class="blue"></div>'));
jQuery
PHP
WordPress
<div class="target"> <div class="blue"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p> </div></div>
wrapAll() は、セレクタで指定した要素が複数ある場合、要素の間にある別の要素やテキストを除外します。
<div class="target"> <p>jQuery</p> テキスト <p>PHP</p> <a href="#">リンク</a> <p>WordPress</p></div>
$('.target p').wrapAll($('<div class="blue"></div>'));
<div class="target"> <div class="blue"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p> </div> テキスト <a href="#">リンク</a></div>
子要素を包む wrapInner()
要素のコンテンツ（子要素やテキスト）を、渡されたHTMLタグ（または渡された要素のクローン）を使ってラップする場合に使用します。
$('.target p').wrapInner($('<strong></strong>'));<div class="target"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div>
$('.target p').wrapInner($('<strong></strong>'));
jQuery
PHP
WordPress
<div class="target"> <p><strong>jQuery</strong></p> <p><strong>PHP</strong></p> <p><strong>WordPress</strong></p></div>
ラップを外す unwrap()
ラップされている要素の親要素（コンテナ）を削除する場合に使用します。
$('.target p').unwrap();<div class="target blue"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div>
jQuery
PHP
WordPress
<p>jQuery</p> <p>PHP</p> <p>WordPress</p>
要素の置き換え replaceWith()
マッチした要素のそれぞれを、指定のコンテンツで置き換える場合に使用します。
$("p").replaceWith("<h3>置き換える要素</h3>");<div> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div></div>
$("p").replaceWith("<h3>置き換える要素</h3>");
jQuery
PHP
WordPress
<div> <h3>置き換える要素</h3> <h3>置き換える要素</h3> <h3>置き換える要素</h3></div></div>
元の要素のテキストをそのままにして、要素のみ変更するには以下のようにします。
$(".target p").replaceWith(function(){ return "<h3>" + $(this).text() + "</h3>";});$(".target p").replaceWith(function(){ return "<h3>" + $(this).text() + "</h3>"; });
jQuery
PHP
WordPress
<div> <h3>jQuery</h3> <h3>PHP</h3> <h3>WordPress</h3></div></div>
要素の削除 remove()
セレクタで指定した要素を削除します。
$(".target p a").remove();<div class="target"> <p>jQuery <a href="http://api.jquery.com/">Link</a></p> <p >PHP <a href="http://php.net/">Link</a></p> <p>WordPress <a href="http://codex.wordpress.org/">Link</a></p></div>
<div class="target"> <p>jQuery </p> <p >PHP </p> <p>WordPress </p></div>
オプションとしてラップ集合のうち、削除すべき要素のみを指定するフィルタセレクタが使えます。
$(".target p").remove(".php");$(".target p").remove(".php");
<div class="target"> <p>jQuery <a href="http://api.jquery.com/">Link</a></p> <p class="php">PHP <a href="http://php.net/">Link</a></p> <p>WordPress <a href="http://codex.wordpress.org/">Link</a></p></div>
※remove() メソッドも結果としてラップ集合を返します。DOM からさ削除された要素もこのラップ集合により参照可能で、appendTo(), prependTo(), insertBefore(), insertAfter() などのメソッドを使って処理することができます。
但し、remove() メソッドを使って DOM からさ削除された要素にバインドされていたデータやイベントは削除されてしまいます。
次項の detach() メソッドも DOM から要素を削除しますが、削除された要素にバインドされていたイベントやデータは失われません。
要素の切り離し detach()
detach() メソッドは要素を DOM から切り離します（削除します）が、要素にバインドされていたイベントやデータは失われません。そのため、detach() メソッドは、一時的に要素を削除するが、後で DOM に戻したい場合などに適しています。
remove() メソッド同様、引数にセレクタを設定することで、削除する対象を絞ることができます。
以下の例では、click というボタンをクリックすると「クリックされました」というアラートが表示されます（イベントがバインドされています）。
detach button というボタンをクリックすると、上記のボタンを detach() を使って削除します。その際に削除された要素を変数 detached_obj に代入しておきます。
restore button というボタンをクリックすると、削除したボタンを div 要素に append() を使って戻しています。戻したボタンをクリックすると「クリックされました」というアラートが表示され、イベントが削除されていないことが確認できます。remove() を使った場合、同じようにボタンを戻しても、イベントは削除されてしまうのでアラートは表示されません。
$("#button1").click(function() { alert("クリックされました"); });$("#button2").click(function() { detached_obj = $("#button1").detach();});$("#button3").click(function() { $("div#foo").prepend(detached_obj);});<div class="foo"> <button id="button1">click</button> <button id="button2">detach button</button> <button id="button3">restore button</button></div>
要素を空にする empty()
empty() メソッドはその要素の中身を空にします。言い換えると、指定した要素の内容（子孫要素やテキストなど）を削除します。指定した要素は削除しません。
<div id="foo"> <p>abcdefg</p> <p>あいうえお</p></div><p><button>empty</button></p>
$("button").click(function() { $("div#foo").empty(); });abcdefg
あいうえお
要素の複製 clone()
clone() メソッドを使うと既存の要素を複製（コピー）することができます。
clone() メソッドは、マッチした要素のコピー（クローン）を作成し、戻り値にそのラップ集合（コピーされた jQuery オブジェクト）を返します。
対象の要素に子孫があれば、それらもコピーされます。
<div class="foo"> <ul class="clone"> <li>jQuery</li> <li>PHP</li> <li>JavaScript</li> </ul></div><button>clone</button>
上記のような HTML があり、以下を実行すると、クラス clone の ul 要素（及びその子孫の li 要素）がコピーされ、appendTo() でクラス foo の div 要素に追加されます。
$("button").click(function() { $("ul.clone").clone().appendTo("div.foo"); });- jQuery
- PHP
- JavaScript
※clone() の対象要素に id 属性が指定されていると、コピーされた要素にもその id 属性が付くので id が重複します。attr(）で id 属性を変更するか、removeAttr() で重複した id を削除する必要があります。
イベントのコピー
パラメータを指定しないで clone() メソッドを実行すると、対象の要素のイベントハンドラ（リスナ）はコピーされません。
イベントハンドラまで含めて複製したい場合には、clone() メソッドのパラメータに true を指定します。
以下のようなアラートを表示するリンクがある場合、
<div class="foo"> <a href="#" class="alert_link"> [alert link] </a></div><button">clone link</button>
$(".alert_link").on("click",function(){ alert("alert link"); //アラートイベント})以下のようにパラメータに true を指定してコピーすると、コピーしたリンクをクリックするとアラートが表示されます。
$("#button1").click(function() { $(".alert_link").clone(true).appendTo(".foo"); });$("#button2").click(function() { $(".alert_link:last-child").remove(); });※対象の要素のイベントは複製しても、子要素のイベントは複製したくない場合は、clone() メソッドの第2引数に false をセットします。
$("selector").clone(true, false).appendTo('.somewhere'); //子要素のイベントリスナーは複製しない場合属性値の設定や変更、取得と削除
attr("属性名","属性値")
設定（追加）または変更したい属性名と属性値をカンマで区切って指定すると、一度に1個の属性を設定（追加）または変更することができます。
$("a").attr("href","http://google.com/");複数の属性を一度に指定するには、JavaScript オブジェクトの形式で指定します。
$("a").attr({href:'http://sample.com', title:'sample link'});data-xxxx のような属性名にハイフンが含まれる属性を複数指定する場合は、以下のようにすることができます。
$('.lbox').attr('data-target', '#bs-lbox-dialog').attr('data-toggle', 'modal');<p><a class="sample1" href="#" title="link">Link 1</a></p><p><a class="sample2" href="#">Link 2</a></p><p><a class="sample3" href="#">Link 3</a></p>
$("a.sample1").attr("href","http://google.com/");
$("a.sample2").attr({href:'http://google.com', target:'_blank'});
$("a.sample3").attr("title", "sample link");
<p><a class="sample1" href="http://google.com/" title="link">Link 1</a></p><p><a class="sample2" href="http://google.com/" target="_blank">Link 2</a></p><p><a class="sample3" href="#" title="sample link">Link 3</a></p>
属性値の取得 attr("属性名")
属性名のみを指定すると、指定した属性値を取得することができます。
$("a").text($("a").attr("href"));//a 要素の href 属性を取得し、//取得した値を text() で a 要素内のテキストとして書き込む上記は以下と同じことです。
var href = $("a").attr("href");$("a").text(href);<p><a href="http://jquery.com/" target="_blank">jQuery</a></p>
$("a").text($("a").attr("href"));
<p><a href="http://jquery.com/" target="_blank">http://jquery.com/</a></p>
| jQuery の正規化された名前 | DOMでの名前 |
|---|---|
| cellspacing | cellSpacing |
| class | className |
| colspan | colSpan |
| cssFloat | styleFloat(IE), cssFloat(その他のブラウザ) |
| float | styleFloat(IE), cssFloat(その他のブラウザ) |
| for | htmlFor |
| frameborder | frameBorder |
| maxlength | maxLength |
| readonly | readOnly |
| rowspan | rowSpan |
| styleFloat | styleFloat(IE), cssFloat(その他のブラウザ) |
| tabindex | tabIndex |
| usemap | useMap |
属性値の削除 removeAttr()
セレクタで指定した要素に特定の属性が設定されている場合、removeAttr() で属性を削除することができます。
$("a").removeAttr("target");上記を実行すると、 target="_blank" の属性が削除されます。
<p><a href="http://jquery.com/" target="_blank">jQuery</a></p>
<p><a href="http://jquery.com/">jQuery</a></p>
以下のリンクをクリックすると $("a").removeAttr("target"); が実行され、以下のサンプルのリンクの動作が変わります。
$("a").removeAttr("target"); を実行
removeAttr('style')
css()を使って（複数の）スタイルを指定した場合やアニメーションによりスタイルが追加された場合（show()などによる display の値など）、それらの追加指定されたスタイルをまとめて削除（初期化）する場合は、removeAttr('style') で追加されたスタイルを削除することができます。
スタイルシートで設定されている元のスタイルはそのままですが、元からインラインで指定されている CSS がある場合は、それらも削除されてしまいます。
$("p").css("font-weight", "bold");
Query is fun!（スタイルシートで文字色を緑に指定）
jQuery3.0 での変更点
古い IE の互換のために、jQuery3.0 未満では Boolean 属性(checked, selected, readonlyなど)に .removeAttr() を使用するとその属性 false を設定していましたが、3.0 からは、Boolean 属性でも削除する本来の動作に変更になりました。
DOM 要素に対して .removeAttr( "checked" ) などを適用するのはほとんどの場合誤りで、本来は .prop( "checked", false ) を適用するべきと「jQuery Core 3.0 Upgrade Guide」に記述されています。
また「 the attribute represents the initial value and the property represents the current (dynamic) value.」とあり、「属性は初期値を表し、プロパティは現在（ダイナミック）の値を表す」となっています。（※）
プロパティの取得と設定 prop()
任意の要素に対して JavaScript のプロパティを設定／取得することができます。
prop() は、要素のプロパティを取得／設定します。
attr()と似ていますが、属性値と JavaScript のプロパティとで値が異なるもの（主にフォーム関連）や JavaScript のプロパティにしかない情報を取得する場合に利用します。
- 属性値と JavaScript のプロパティとで値が異なるもの：selected, checked, disabled, multiple などの属性
- JavaScript のプロパティにしかない情報：tagName（要素名）, nodeName, nodeType のような JavaScript のプロパティ
※フォーム関連の selected, checked, disabled, multiple などの属性を扱う場合は、attr() ではなく、prop() を使ったほうが良いでしょう。
以下はフォームの要素の属性の値を prop() と attr() で取得して出力するサンプルです。
Name <input id="name" type="text" value="">Option <input id="option" type="text" value="" disabled><input type="checkbox" name="drink" id="wine" value="wine" checked> Wine <input type="checkbox" name="drink" id="beer" value="beer"> Beer<p class="result">Result: <span></span></p>
以下のリンクをクリックすると、それぞれの要素の属性とプロパティを prop() と attr() で取得して「Result」に出力します。
Result:
prop() はプロパティ値を取得するだけではなく、プロパティ値を設定することもできます。
以下のリンクをクリックすると、前述のフォームの #option の input 要素の disabled を解除します。
$('#option').prop('disabled', false);
要素名の取得
要素名を取得するには prop("tagName") が使えます。取得した要素名は全て大文字の要素名になります。
<div> <p class="foo">sample paragraph</p> <ul class="foo"> <li id="foobar">List item 1</li> <li class="bar">List item 2</li> <li>List item 3</li> </ul> <p class="bar">sample paragraph <a class="foo" href="#">Link</a></p> <p>タグの名前：<span id="tag_name"></span></p></div>
上記のような HTML がある場合、IDが foobar の要素の要素名を取得するには以下のようにします。
$("#foobar").prop("tagName"); $("#foobar").get(0).tagName; $("#foobar")[0].tagName;tagName は JavaScript のプロパティなので、2行目では get()を使って、3行目では配列のインデックスを使って JavaScript オブジェクト（DOM 要素）を取得して、そのプロパティの値を取得しています。
$("#tag_name").text( $("#foobar").prop("tagName"));
$("#tag_name").text( $(".foo").prop("tagName"));
この方法だと先頭の要素名しか取得できません。
複数の要素がある場合は、以下のように each()を使うと全ての要素名を取得することができます。
クラス名の追加と削除
クラス名を要素に追加、削除することで、要素のレンダリングを動的に変更することができます。
class 属性は他の属性と異なりスペース区切りで複数の値を設定できるため、class 属性の操作には専用の命令が用意されています。
クラス名の追加 addClass()
指定されたクラス名（複数可）をラップ集合の全要素に追加する場合に使用します。
追加したい class 属性の値を記述します。複数の class 属性を指定する場合はスペースで区切ります。
$("p").addClass("orange_box bold");<p>jQuery</p><p>PHP</p><p>WordPress</p>
以下のようなクラスを使ったスタイルを定義しておきます。
.orange_box { padding: 5px 10px; border: 1px solid #A66906; background-color: #ED8611; color: #fff;}.bold { font-weight: bold;}$("p").addClass("orange_box bold");
jQuery
PHP
WordPress
<p class="orange_box bold">jQuery</p><p class="orange_box bold">PHP</p><p class="orange_box bold">WordPress</p>
クラス名の削除 removeClass()
指定されたクラス名（複数可）をラップ集合の全要素から削除します。
追加したい class 属性の値を記述します。複数の class 属性を指定する場合はスペースで区切ります。
$("p").removeClass("orange_box bold");<p class="orange_box bold">jQuery</p><p class="orange_box bold">PHP</p><p class="orange_box bold">WordPress</p>
$("p").removeClass("orange_box bold");
$("p").removeClass("orange_box");
jQuery
PHP
WordPress
<p>jQuery</p><p>PHP</p><p>WordPress</p>
クラスの切り替え toggleClass()
しばしばスタイルを相互に切り替えて使いたい場合がありますが、jQuery にはこのようなトグル動作を容易にしてくれる toggleClass() メソッドを用意しています。
指定されたクラス名を、もし要素になければ追加し、逆に要素がそのクラス名をすでに持っていたらそのクラス名を要素から削除します。
各要素が別々にテストされるので、ある要素ではクラス名が追加され、他の要素では削除されるかもしれません。
$("p").toggleClass("orange_box bold");<p>jQuery</p><p class="orange_box bold">PHP</p><p>WordPress</p>
$("p").toggleClass("orange_box bold");
jQuery
PHP
WordPress
<p class="orange_box bold">jQuery</p><p>PHP</p><p class="orange_box bold">WordPress</p>
クラスの有無を判定 hasClass()
要素が所定のクラスを持っているかどうかを判定する場合に使用します。
if($("p").hasClass("orange_box")) { $("p").text("Orange Box");}<p class="orange_box bold">PHP</p>
if($("p").hasClass("orange_box")) { $("p").text("Orange Box"); }
PHP
スタイルの取得と設定
CSS（スタイル）の設定 css()
１つの CSS プロパティを設定するには、プロパティ名と値をカンマで区切って記述します。
$("p").css("color", "red");//p 要素の color プロパティの値が red に変更されるまた、CSS を初期値に戻すには、css("プロパティ名", "") のように値を設定せずにプロパティ名のみを指定します。
jQuery によって追加された複数のスタイルを初期値に戻すには、.removeAttr('style') で追加されたスタイルを削除することができます。但し、removeAttr('style') は、インラインで指定された CSS があると、それも削除してしまうので注意が必要です。
$("p").css("background-color", "pink");
Sample Text
以下は、幅と高さを設定（変更）する例です。
<div id="sample"></div>
#sample { box-sizing: content-box; width: 100px; height: 100px; border: 5px solid #476782; padding: 10px; margin: 20px; background: #AED0F3;}この例の場合、box-sizing: content-box を指定しているので、指定したサイズには、margin , border-width , padding は含まれません。また、単位を指定しなければ px（ピクセル）が適用されます。
$('#sample').css({width:'70%', height:50})
関連項目：サイズの取得と設定
第2引数に関数を指定
第2引数（2つ目のパラメータ）に関数を指定することもできます。
その場合、ラップ集合の各要素について、その関数を呼び出します。そのとき、関数コンテクストとして要素が設定され、要素のインデックスと現在の値という２つのパラメータが渡され、関数の戻り値が、CSSプロパティの新しい値になります。
$("セレクタ").css("プロパティ", function(インデックス, 現在の値){ 任意の処理（「インデックス」や「現在の値」を利用可能） return 設定するプロパティの値;});次のように書けば、ラップ集合の全要素の幅を20ピクセル広げることができます。
$("div.expandable").css("width", function(index, currentWidth){ return (parseInt(currentWidth) + 20) + "px"; });要素のインデックスとは、現在処理対象となっている要素が何番目の要素かという番号です。先頭の要素の番号（インデックス）は 0 になります。
要素のインデックスと現在の値のパラメータの名前（この例では、index, currentWidth）は適宜任意の名前を付けることができます。
この例での「現在の値（currentWidth）」は "150px" のような文字列になっています。そのため parseInt() 関数を使って文字列から数値へ変換を行って計算をした上で、"px"を連結することにより、文字列に戻しています。
<div class="notExpandable">DIV</div><div class="expandable">DIV.expandable</div><div class="expandable">DIV.expandable</div>
.notExpandable, .expandable { height: 40px; width: 150px; border: 1px solid #427F5E; background-color: #CEF7DA; padding: 10px; margin: 10px 0;}$("div.expandable").css("width", "")
以下は要素のインデックスを利用して、異なる幅の値を指定する例です。
以下のような同じクラス名を持つ３つの div 要素がある場合、それぞれのインデックスは出現順に 0, 1, 2 になります。これを利用してそれぞれの要素に異なる値の幅の増分を指定しています。
<div class="targets"></div><div class="targets"></div><div class="targets"></div>
.targets { width: 50px; height: 50px; background-color: #F4CAF1; border: 1px solid #7E5B83; margin: 10px 0;}$(".targets").css("width", function(index, cw){ return (parseInt(cw) + (index + 1) * 20) + "px"; });$(".targets").css("width", function(index, cw){
return (parseInt(cw) + (index + 1) * 20) + "px";
});
$(".targets").removeAttr('style');
複数の CSS プロパティを同時に指定
複数の CSS プロパティを同時に指定する場合は次のような（オブジェクト）形式で記述します。
全体を中括弧 { } で囲み、その中に「プロパティ：値」のペアをカンマ区切りで記述します。
$(セレクタ).css({ プロパティ名："プロパティの値", プロパティ名："プロパティの値", ... プロパティ名："プロパティの値"});但し、ここで指定するプロパティ名は、CSS とはルールが少し異なります。
プロパティ名にハイフンが含まれる場合は、ハイフンを削除し、その後に続く最初のアルファベットを大文字に変更する必要があるので注意が必要です。
例えば、「background-color」は「backgroundColor」と、「font-weight」は「fontWeight」と指定します。
$("p").css({ backgroundColor: "yellow", fontWeight: "bold", color: "red"});jQuery
PHP
WordPress
CSS の値の取得 css()
値を取得したい CSS のプロパティ名のみを記述すると、その値（算出されたスタイル：computed style）を取得できます。
「算出されたスタイル」とは、すべてのCSSが適用された後のスタイルを意味します。
$("p").text($("p").css("color"));//p 要素の color プロパティの値を取得し、//取得した値を text() で p 要素内にテキストとして書き込むcolor プロパティはブラウザによって取得できる値の書式が異なるため、結果は rgb(0,0,0) または #000000 などとなります。
<p>Lorem ipsum dolor sit amet. </p>
$("p").text($("p").css("color"));
Lorem ipsum dolor sit amet.
上記のサンプルで取得した値「rgb(51, 51, 51)」は、p 要素に最終的に適用されている color プロパティの値になります。
それでは、以下のような HTML がある場合、それぞれの p 要素の color プロパティの値を取得して表示するにはどうすれば良いでしょうか？
<p style="color: red;">jQuery</p><p style="color: green;">PHP</p><p style="color: blue;">WordPress</p>
取得した要素のそれぞれについて反復処理したい場合は each() メソッドが使えます。
$("p").each(function(){ $(this).text($(this).css("color"));});上記は、$("p")で取得した p 要素（オブジェクト）のそれぞれについて反復処理を行っています。
$(this) は、each() メソッドを呼び出すときに使用したオブジェクト、つまりそれぞれの p 要素（オブジェクト）になります。
$("p").each(function(){ $(this).text($(this).css("color")); });
jQuery
PHP
WordPress
サイズの取得と設定
css() は必ず文字列を返すので、数値など他の型が必要な場合は、戻り値を解析して型を変換するなどしなければなりませんが、一般にアクセスされるいくつかの CSS の値を一般的に使われる型で返してくれる次のようなメソッドがあります。
※ 空の jQuery コレクション（存在しない jQuery オブジェクト）に対して、以下のメソッドを呼んだ場合、jQuery 3.0未満では null が返ってきましたが、jQuery 3.0 からは undefined が返ります。
- .width()
- .height()
- .innerWidth()
- .innerHeight()
- .outerWitdh()
- .outerHeight()
- .offsetTop() ※.offset().top のことだと思います。（jQuery Core 3.0 Upgrade Guide）
- .offsetLeft() ※.offset().left のことだと思います。
幅と高さ width() / height()
要素の幅と高さを数値で設定するにはwidth()とheight()を使います。
$("div").width(500);//全ての div 要素の幅を 500px にする$("div").height("500px")//全ての div 要素の高さを 500px にするpx, em, % などの単位で値を指定する文字列が使えます。もし単位を指定しなければ px（ピクセル）がデフォルトとなります。
関数の場合、ラップされた各要素について、その関数が呼び出され、 その要素が関数のコンテクストとして渡され、関数の戻り値が設定値として使われます。
<div class="wh"><p>div element</p></div>
div.wh { width: 100px; height: 100px; border: 1px solid #CB6062; background-color: #FBDEDE; margin: 20px auto; padding: 5px; color: #D18586; }div element
width()とheight()を引数なしで使用すると、幅と高さを取得できます。
この場合、ラップ集合の最初の要素の幅または高さを取得して、算出された幅または高さをピクセルで返します。
※従来これらのメソッドは、整数値のみが返されていましたが、jQuery 3.0 では、小数値を返すようになりました。.css("width")、.css("height") も同様です。
<div class="wh"><p>div element</p></div>
$("div.wh").width(function(){
return $(this).width() / 2;
});
$("div.wh").width(function(){
return $(this).width() * 2;
});
div element
特別なサイズを取得する同じような働きのメソッドは他にも下記の表のようなものがあります。ウィンドウ（window）または文書（document）を要素として扱う場合には、inner や outer は使わず、width()とheight()を使うように推薦されています。
※jQuery 3.0 からは $(window).outerWidth()、$(window).outerHeight() の値にスクロールバーの幅、高さが含まれるようになりました。$(window).width の値には、スクロールバーの幅を含みません。ちなみに、$(window).outerWidth() と DOM の window.innerWidth の値は同じになります。
| メソッド | 説明 |
|---|---|
| innerHeight() | マッチした最初の要素の「内側の高さ」を返す。（枠線を含まないがパディングを含む） |
| innerWidth() | マッチした最初の要素の「内側の幅」を返す。（枠線を含まないがパディングを含む） |
| outerHeight(margin) | マッチした最初の要素の「外側の高さ」を返す（枠線とパディングを含む）。marginパラメータが trueならばマージンを含めて計算するが、 falseなら計算にいれない。 |
| outerWidth(margin) | マッチした最初の要素の「外側の幅」を返す（枠線とパディングを含む）。marginパラメータが trueならばマージンを含めて計算するが、 falseなら計算にいれない。 |
以下は、それぞれのメソッドを使用した場合の例です。その要素の box-sizing プロパティの値により取得する値が変わります。
<div id="outside"> <div id="size_sample">Size Sample</div> </div>
#size_sample { box-sizing:content-box; width: 100px; height: 100px; padding: 10px; border: 5px solid #427455; margin: 20px 40px; background-color: #C1EAB8; color: #1D4B13;}box-sizing:
- $("#size_sample").width(); → px
- $("#size_sample").innerWidth(); → px
枠線を含まないがパディングを含む（10x2） - $("#size_sample").outerWidth(); → px
枠線とパディングを含む（10x2 + 5x2） - $("#size_sample").outerWidth(true); → px
枠線とパディング、マージンを含む（10x2 + 5x2 + 40x2） - $("#size_sample").height(); → px
- $("#size_sample").innerHeight(); → px
枠線を含まないがパディングを含む（10x2） - $("#size_sample").outerHeight(); → px
枠線とパディングを含む（10x2 + 5x2） - $("#size_sample").outerHeight(true); → px
枠線とパディング、マージンを含む（10x2 + 5x2 + 20x2）
Window 幅の取得
jQuery 3.0 未満では、ウィンドウ（window）または文書（document）を要素として扱う場合には、inner や outer は使わず、width()とheight()を使うように推薦されています。
但し、$(window).width の値には、スクロールバーの幅を含みません。
JavaScript のwindow.innerWidth メソッドはスクロールバーの幅を含んだ画面サイズを取得します。
var ww = window.innerWidth;
CSS メディアクエリで取得するウィンドウ幅はスクロールバーを含んだ画面サイズを取得するので、メディアクエリを利用する場合は、window.innerWidth を使います。
※ jQuery 3.0 からは $(window).outerWidth()、$(window).outerHeight() の値にスクロールバーの幅、高さが含まれるようになりました。jQuery 3.0 からは、$(window).outerWidth() と DOM の window.innerWidth の値は同じになります。
要素のカスタムデータの格納 data()
data() メソッドを使用すると、どれでも自分で選んだ DOM 要素にデータを結びつけることができ、任意の値を（配列でもオブジェクトでも）DOM 要素に置くことが可能す。
追加（書き込み）
data(name, value)
ラップされた全要素について、渡された値を jQuery が管理するデータストアに追加します。
- name
- 格納すべきデータの名前
- value
- 格納すべき値。関数ならば、ラップされた要素それぞれについて呼び出され、その要素が関数コンテクストとして渡されます。そしてこの関数が返す値がデータ値として使われます。
- 戻り値
- ラップ集合
取り出し（読み出し）
data(name)
ラップ集合の最初の要素から、指定された名前の、前に格納されたデータを取り出します。
- name
- 取り出すべきデータの名前
- 戻り値
- 取り出したデータ。もし見つからなければ undefined が返します。
removeData() データの削除
removeData(name)
ラップ集合の全ての要素から、指定された名前で格納されたデータを削除します。
- name
- 削除すべきデータの名前
- 戻り値
- ラップ集合
以下は、my_color という名前のデータを設定して、その値を使って css() で文字色を変更する例です。
<p>Sample paragraph</p>
$("p").data("my_color", "red");
$("p").css("color", $("p").data("my_color"));
Sample paragraph
以下は、my_data という名前のデータに配列を設定して、その値を使って text() で文字列を追加し、css() でスタイルを設定する例です。
<p>Sample paragraph<span></span></p>
Sample paragraph
jQuery3.0 での変更点
jQuery3.0 からは、jQuery が管理するデータストア内の data の名前は、カバブケース/kebab-case（例 click-count）ではなく、キャメルケース/camelCase (例 clickCount)で保存されます。
jQuery3.0 でもほとんどの場合 .data("right-aligned") のようなカバブケースでも動作しますが、jQuery が管理するデータストア内の data オブジェクトから取り出す際は、「rightAligned」のようなキャメルケースになっています。
以下のようにキャメルケース、カバブケースのどちらでも設定・読み取りができますが、内部的にはキャメルケースで管理されているということだと思います。
var $div = $("<div />"); //div 要素を生成$div.data("clickCount", 2); //data clickCountを設定（2）console.log("clickCount: " + $div.data("clickCount")); //clickCount: 2$div.data("click-count", 3); //data click-count を更新（3）console.log("clickCount: " + $div.data("clickCount")); //clickCount: 3console.log("click-count: " + $div.data("click-count")); //click-count: 3 $div.data("new-count", 7); console.log("newCount: " + $div.data("newCount")); //newCount: 7console.log("new-count: " + $div.data("new-count")); //new-count: 7HTML5 のデータ属性
data メソッドは HTML5 のデータ属性にも対応しています。これを利用すると data メソッドを利用することなく、タグ中にデータを設定することができます。
<p data-name="foo">Sample paragraph</p>
属性をデータとして扱うためには、属性の名前を「data-」とする必要があり、「data-」に続く名前がプロパティ名となります。つまり上記の p 要素には name プロパティに値「foo」が設定されていることになります。
以下は、HTML5 のデータ属性の値をアラートで表示する例です。
Sample paragraph
data-xxxx 属性
以下のような HTML で、クラス foo の p 要素に data() メソッドを使ってデータを設定／取得してみます。
<div id="jqs-data4" class="jqs_div"> <p class="foo">Sample</p></div>
Sample
$("#jqs-data4 .foo").data("test", "テスト");console.log($("#jqs-data4 .foo").data("test")); // →テストブラウザーの開発者ツールで要素を確認してみると、<p class="foo">要素に data-xxxxx 属性が設定されるわけではないことが確認できます。
これは data() メソッドは、jQuery が管理するデータストアに追加するためのものだからです。
data() メソッドは取得時に指定されたキーで jQuery が管理するデータストアに値（データ）が見つからなかった場合にだけ、data-xxxxx 属性を参照します。
data-xxxxx 属性とデータストアのキーが同じ場合
以下のように data-test="テスト" が設定されている場合を見てみます。
<div id="jqs-data5" class="jqs_div"> <p class="foo" data-test="テスト">Sample</p></div>
Sample
console.log($("#jqs-data5 .foo").data("test")); //→テスト$("#jqs-data5 .foo").data("test", "変更");console.log($("#jqs-data5 .foo").data("test")); //→変更console.log($("#jqs-data5 .foo").attr("data-test")); //→テスト最初の console.log() の時点では、jQuery が管理するデータストアに値（データ）が見つからないので、data-test 属性を参照します。
$("#jqs-data5 .foo").data("test", "変更"); が実行される時点でデータストアに test キーが設定されるので、data() メソッドはデータストアの値（"変更"）を取得します。
attr() メソッドでアクセスすると、data-test 属性の元の値にもアクセスすることができます。
data() メソッドは値をキャッシュする
以下は、data-xxxxx 属性の値を、attr() メソッドで変更した場合の例です。
<div id="jqs-data6" class="jqs_div"> <p class="foo" data-test="テスト">Sample</p></div>
Sample
console.log($("#jqs-data6 .foo").data("test")); //→テストconsole.log($("#jqs-data6 .foo").attr("data-test")); //→テスト$("#jqs-data6 .foo").attr("data-test", "変更");console.log($("#jqs-data6 .foo").data("test")); //→テストconsole.log($("#jqs-data6 .foo").attr("data-test")); //→変更attr() メソッドで変更する前は、data-test 属性の値（"テスト"）を取得します。
但し、attr() メソッドで変更後は、attr() メソッドでは、更新した値（"変更"）を取得できますが、data() メソッドは取得した値を内部データ（データストア）としてキャッシュするため、data-test 属性の値にかかわらず、キャッシュした値（"テスト"）を返します。
このため、data-xxxxx 属性の値を動的に変更するような場合は、attr() メソッドを使えば動的な変更を反映することができますが、data() メソッドでは取得した値を内部データとしてキャッシュするため意図するように機能しない場合が発生します。
- data() メソッド：jQuery が管理するデータストアの値を変更（HTML の data-xxxxx 属性値は変化しない）
- attr() メソッド：HTML の data-xxxxx 属性値を変更する
ポジション（位置）とスクロール
jQuery には、要素の位置を取得するためのメソッドが２つあり、どちらも、要素の上端を示す top と左端を示す left という２つのプロパティを含む JavaScript オブジェクトを返します。
この２つのメソッドは、相対位置を示す値を算出するのに、それぞれ別の原点を使用します。これらのメソッドは どちらも可視の要素だけに使えることができ、また、正確な結果を求めるためには、パディング、ボーダー、マージンの全ての値に画素数（ピクセル）を使うことが 推奨されています。
- offset() ：ページ左上（html 要素）に対する座標を取得
- position() ：コンテナ要素（position 属性に relative , absolute , fixed のいづれかをもつ直近の親要素）に対する座標を取得
また、css() を使って位置を取得設定することもできます。
css()を使って位置を取得設定
css()を使って、対象要素の配置されてる位置を取得することができます。
位置を取得しようとする要素からみて、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素（コンテナ要素）の配置位置が原点位置となます。（コンテナ要素はoffsetParent()メソッドで取得できます）
先祖要素に、position:static が設定された要素（position プロパティが設定されていない要素）しか存在しない場合は、ドキュメントの左上( html 要素)が原点位置になります。
また、取得した値は単位付きの文字列が返されるので、数値として扱いたい場合は、parseInt() や parseFloat() 関数等で変換する必要があります。
基点となる要素及びその要素の position プロパティには、 static 以外の値を指定する必要があります。
<div id="sample"> <p id="target">Target</p></div>
console.log($("#target").css("top")); //出力 16.65pxconsole.log($("#target").css("left")); //出力 68.5333px#sample { position: relative; /* 必要 */ width: 300px; height: 100px; border: 1px solid #ddd;}#target { position: relative; /* 必要 */ top: 17%; left: 23%;}以下は、parseFloat() を使って、取得した位置を数値（小数点数）に変換して、その値を元に要素の位置（top, left）をそれぞれ 100px 移動させる例です。
var target_top = parseFloat($("#target").css("top"));var target_left = parseFloat($("#target").css("left")); $("#target").css("top", (target_top + 100) + "px");$("#target").css("left", (target_left + 100) + "px");css() メソッドの第二引数に関数を指定する方法を使って書き換えると以下のようになります。current には現在の設定値が入っていますが、単位が付いているので parseInt() を使って数値に変換しています。値が小数点数になる場合は、parseFloat() を利用します。
$("#target").css("top", function(index, current){ return (parseInt(current) + 100); }); $("#target").css("left", function(index, current){ return (parseInt(current) + 100); });相対位置を取得／設定 offset()
offset() は要素のドキュメント上の表示位置を取得／設定するメソッドです。但し、不可視の要素（display: none を指定した要素）に対しては正しく動作しません。visibility:hidden が設定された要素の座標の取得は可能です。
offset() を使うと（ラップ集合にある最初の）要素の位置（ピクセル単位）を文書の原点（ドキュメントの左上）からの相対位置で取得できます。
offset() の戻り値は、top（垂直方向の位置）と left（水平方向の位置）というプロパティを持ったオブジェクトです。
var offset = $("#sample").offset();console.log(offset); //出力：Object { top: 458, left: 157 }console.log(offset.top); //出力：458console.log(offset.left); //出力： 157言い換えると、offset() は top と left のプロパティを持ち、offset().top と offset().left は、それぞれドキュメントの上と左からの距離（ピクセル）を数値で返します。
console.log($("#offset").offset().top); //出力：458console.log($("#offset").offset().left); //出力： 157以下は、変数 offset_pos に取得したオブジェクトを代入して、そのプロパティ（top と left）をアラートで表示しています（"\n" は改行を表します）。
<div id="offset_sample" class="wh"><p>div element</p></div>
var offset_pos = $("#offset_sample").offset();alert("top: " + offset_pos.top + "\n" + "left: " + offset_pos.left);div element
要素の表示位置を設定する
offset() に、top と left プロパティを持ったオブジェクトを渡すことで、要素の位置を設定することができます。
$('#sample').offset({ top: 30, left: 30 });垂直方向のみ、又は水平方向のみにしか移動しない場合はプロパティの設定を省略できます。例えば垂直方向にしか移動しないのであれば、以下のように left は省略できます。
$('#sample').offset({ top: 30 });以下のように新しいオブジェクトを生成して、それを使って表示位置を設定することもできます。
var myOffset = new Object();myOffset.left = 50;myOffset.top = 100;$("#sample").offset(myOffset);以下でも同じことになります。
var myOffset = {top:100, left:50 }$("#sample").offset(myOffset);以下は、#sample という要素の位置を現在の位置から垂直方向に（下へ） 50px、水平方向に（右へ）500px 移動させる例です。
var os = $('#sample').offset();$('#sample').offset({ top: os.top + 50, left: os.left + 300 });変数を使わず以下のように記述しても同じです。
$('#sample').offset({ top: $('#sample').offset().top + 50, left: $('#sample').offset().left + 300 });または、「引数として関数を指定」する方法でも同様のことができます。
引数として関数を指定
offset( function( index, coords ) ) は、マッチした要素の位置座標を、function 関数で設定するメソッドです。インデックス番号（整数値）と現在の位置座標（オブジェクト）を引数として、関数に引き渡すことができます。
また、戻り値して、設定後の位置座標（top と left プロパティを持つオブジェクト）を返す必要があります。
$(セレクタ).offset(function(インデックス番号, 現在の位置座標) { return {top: 上からの位置, left: 左からの位置} ;});以下は、#sample という要素の位置を現在の位置から垂直方向に 100px、水平方向に 200px 移動させる例です。現在の垂直方向及び水平方向の位置座標はそれぞれ、coords.top と coords.left として利用できます。
$("#sample").offset(function(index, coords) { return {top: coords.top + 100, left: coords.left + 200};} );位置が正しく取得できない場合
対象の要素に display:none; を指定して非表示になっている場合、offset() の戻り値は 0 となり、位置を取得できません。
また、対象の要素が HTML に存在しない場合や、対象要素に document や window を指定した場合は、戻り値が「undefined」になるので位置を取得することができません。
相対位置を取得 position()
ラップ集合にある最初の要素の位置（ピクセル単位）をその要素の「オフセットペアレント」からの相対位置で返します。position() の戻り値は、top（垂直方向）と left（水平方向）プロパティを持ったオブジェクトです。
また、offset() と同様、不可視の要素に対しては正しく動作しません。
このメソッドは、offset() と異なり、値を設定することはできません。
- オフセットペアレント
- 相対または絶対の位置決めルールが明示的に設定されている先祖のうち、要素から最も近縁のもの（最も内側のコンテナ）を意味します。言い換えると、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素
var pos_top = $("div#pos_sample").position().top;var pos_left = $("div#pos_sample").position().left;alert("top: " + pos_top + "\n" + "left: " + pos_left);変数 pos_top と pos_left に取得したオブジェクトのプロパティ（top と left）を代入してアラートで表示しています。
<div id="jqs-70"> <div id="pos_sample" class="wh"><p>div element</p></div></div>
#jqs-70 { position: relative;}div.wh { width: 100px; height: 100px; border: 1px solid #CB6062; background-color: #FBDEDE; margin: 20px auto; padding: 5px; color: #D18586; }div element
要素のスクロール位置を取得し設定 scrollTop() / scrollLeft()
要素のスクロール位置を取得したり設定する場合に使用します。次のメソッドは、可視の要素と隠された要素のどちらにも使えます。
$(selector).scrollTop();//マッチした最初の要素の縦スクロールオフセットを返す。$(selector).scrollTop(value) //マッチした全要素の縦スクロールオフセットを設定する。$(selector).scrollLeft() //マッチした最初の要素の横スクロールオフセットを返す。$(selector).scrollLeft(value) //マッチした全要素の横スクロールオフセットを設定する。
以下の例は、div 要素のスクロール位置の取得と設定の例です。この場合、対象の div 要素にスクロールが発生するように高さを短くし、overflow: scroll; を指定しています。スクロールが発生しない場合は取得する値は 0 になります。
<div id="jqs-71"> <p>jQuery</p> <p>PHP</p> <p>WordPress</p></div>
#jqs-71 { height: 100px; overflow: scroll;}#jqs-71 p { line-height: 40px;}alert($("#jqs-71").scrollTop());
jQuery
PHP
WordPress
上記のサンプルでは、div 要素のスクロールの値を取得・設定しましたが、よく使われるのはウィンドウ（ブラウザ）のスクロールの値の取得・設定です。
以下はボタンをクリックすると、現在のウィンドウ（ブラウザ）のスクロールの値を表示するサンプルです。
以下の CSS は、appendTo('body') で挿入する領域（スクロールの値を表示する div 要素）のスタイルです。
.pop_up { width: 200px; height: 100px; background-color: #DDF5F8; border: 1px solid #A4CBD1; z-index: 10; //前面に表示 position: fixed; //固定表示 top: 100px; left: 200px; border-radius: 10px; opacity: .9;}.pop_up p { text-align: center; line-height: 100px; font-size: 15px; font-weight: bold; color: #4B7390;}以下が jQuery の記述（概要）です。スクロールイベントを利用しています。
$("#scroll_disp").click(function(){ $('<div class="pop_up"><p>Scroll !</p></div>').appendTo('body'); $(window).scroll(function() { $("div.pop_up p").text("scrollTop: " + $(this).scrollTop()); //$(this) は $(window) を指します。 }); return false;});実際の記述は以下のようになっています。
$("#scroll_disp").click(function(){ if($("div.pop_up").length === 0) { $('<div class="pop_up"><p>Scroll !</p></div>').appendTo('body').css('cursor', 'pointer').click(function(){ $(this).remove(); }); $(window).scroll(function() { $("div.pop_up p").text("scrollTop: " + $(this).scrollTop()); }); }else{ $(".pop_up").remove(); } return false;});以下はvh (Viewport Height)を使って各 section 要素をフルスクリーンで表示するページで、リンクをクリックすると次や前のセクションにスクロールするサンプルです。
<body><header class="fullscreen img1"> <h1>One</h1> <p class="text">Voluptas cumque perferendis consequuntu...<br> <a class="next" href="#">Next</a></p> </header><section class="fullscreen green"> <h2>Two</h2> <p class="text">Lorem ipsum dolor sit amet, consectetur....<br> <a class="next" href="#">Next</a> <a class="prev" href="#">Prev</a></p></section><section class="fullscreen blue"> <h3>Three</h3> <p class="text">Sequi, nam, aut rem error tenetur...<br> <a class="next" href="#">Next</a> <a class="prev" href="#">Prev</a></p></section><section class="fullscreen img2"> <h4>Four</h4> <p class="text">Eos, dicta, ex architecto aperiam...<br> <a class="prev" href="#">Prev</a></p></section></body>
* { margin: 0; padding: 0;}.fullscreen { width: 100%; height: 100vh;}.green { background: #43B967;}.blue { background: #487BAB;}.img1 { background: url(../images/sample1.jpg) center/cover;}.img2 { background: url(../images/sample2.jpg) center/cover;}.text { max-width: 500px; padding: 2vh 0 15vh;}.prev, .next { text-align: center; display: inline-block; margin-top: 15px;}h1, h2, h3, h4 { text-align: center; padding-top: 10vh;}以下の2行目～10行目はブラウザの機能判定の記述です。「animate メソッドと scrollTop プロパティ」
12行目～24行目はクリックイベントのショートハンドメソッド click()を使ったイベント処理です。
13行目は、移動する距離（トップからの距離）を格納する変数 pos の宣言です。
14行目～16行目：
クリックした要素のクラスが next であれば、pos に現在のウィンドウのトップからの距離にウィンドウの高さを加えた値を代入しています。このページは vh でセクションの高さを指定しているので、セクションの高さは $(window).height() と同じになります（この例の場合、$(window).height() と $("section").height() は同じ値になります）。
17行目～19行目：
クリックした要素のクラスが prev であれば、pos に現在のウィンドウのトップからの距離にウィンドウの高さをひいた値を代入しています。
20行目は、ブラウザの機能判定の結果により、html または body 要素に対して animate() メソッドでスクロールを行っています。
21行目は、jQuery が用意した scrollTop プロパティにトップからの距離（pos）を指定してスクロールさせています。
23行目はブラウザのデフォルトの動作（href="#" ページトップへの移動）を抑止しています。
jQuery(function($){ var isHtmlScrollable = (function(){ //ブラウザの機能判定 var html = $('html'), top = html.scrollTop(); var el = $('<section/>').height(10000).prependTo('body'); html.scrollTop(10000); var rs = !!html.scrollTop(); html.scrollTop(top); el.remove(); return rs; })(); $('.next, .prev').click(function() { var pos; if ($(this).hasClass('next')) { pos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass('prev')) { pos = $(window).scrollTop() - $(window).height(); } $(isHtmlScrollable ? 'html' : 'body').animate({ scrollTop: pos }, 600, "easeInExpo"); return false; });});前述の例の場合、ユーザーが少しスクロールしてからリンクをクリックすると、次（前）のセクションからスクロールした分だけずれてしまいます。以下はユーザーがスクロールしてもリンクをクリックすると必ずセクションのトップにスクロールする例です。
前述の例では、ウィンドウのトップからの距離 $(window).scrollTop() を使用しましたが、この例では closest()を使ってクリックされた a 要素の親要素の header 要素または section 要素を取得し、offset().top を使って、その親要素のトップからの距離を取得して使用しています。
イベント処理内の $(this) はこの場合、$('.next, .prev') になります（next, prev クラスの a 要素）。
4行目～8行目は、closest() で取得した要素が header 要素か section 要素かを判定しています。header 要素の場合は、img1 というクラスが指定されているのでそれを利用して判定しています。
$('.next, .prev').click(function() { var pos; if ( $(this).hasClass('next') ) { if($(this).closest("header").hasClass("img1")) { pos = $(this).closest("header").offset().top + $(window).height(); }else{ pos = $(this).closest("section").offset().top + $(window).height(); } } if ( $(this).hasClass('prev') ) { pos = $(this).closest("section").offset().top - $(window).height(); } $(isHtmlScrollable ? 'html' : 'body').animate({ scrollTop: pos }, 600, "easeInExpo"); return false;});scrollTop() はメソッドですが、scrollTop は jQueryが用意した CSS 用のプロパティで、 animate() メソッドで使用します。（スムーズスクロール参照）