FlashBuilder-Job.com

jQueryで内部、外部、要素自身も含めたhtmlを取得する方法です。

 

■内部のHTMLを取得する場合

var myHtml = $(“#aaa”).html();

この方法では要素自信のhtmlは取得できません。

 

■自身を含めたHTMLを取得する場合

var myHtml = $(“#aaa”).prop(‘outerHTML’);

要素自信も含めたhtmlを取得するにはpropで取得します。

 

試してみてください。

■prop(“tagName”)で取得する

console.log( $(“#hello”).prop(“tagName”) );

出力例） “INPUT”

helloの中の先頭しか取れないので使いどころ注意！

 

■get(n番目)＋tagNameで見る

console.log( $(“.aaaa”).get(0).tagName );
出力例） “DIV”
console.log( $(“.aaaa”).get(1).tagName );

出力例）”DIV”

指定したクラス名やIDの中の●●番目のタグ名を知りたい！という時にはこんな感じで参照ができます。試してみてください。

 

■メリット

・一度に複数のイベントタイプを定義できる

・データを渡すことができる

※.on()で定義したイベントは、.off()を使って解除できます。

複数のイベントタイプを半角スペースで区切って指定することで、複数のイベントに対して一括して、同じイベントハンドラ（イベントが起こったときに実行される関数）を定義することができます。（参考：https://app.codegrid.net/entry/practical-jquery-1#toc-0）

 

ディスパッチイベントみたいなものです。

■trigger(type, [data])

各要素の指定されたイベントを実行します。この関数を実行すると、指定されたイベントそのものの動作と、登録されたイベントハンドラの呼び出しを共に行います。例えば”submit”を呼び出した場合、そのformのsubmit処理が実際に実行されます。この動作は例で言えばsubmitボタンが押された場合と全く同じで、コールバック関数内の戻り値にfalseを返すなどの処理でキャンセルすることも可能です。

デフォルトで存在するイベントだけでなく、bindで登録したカスタムイベントなども呼び出すことが出来ます。

（引用：http://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/）

[inline]
[script]
function hogeclick(){
alert(“88”);
}
[/script]
[/inline]

■基本：セレクタで選択する

IDやクラス名などで選択するのが基本です。

 

■トラバースとは、走査系のメソッド

「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。

[ セレクタ ]
$(“body”)
bodyタグの要素を選択

$(“#id1″)
ID名 id1 の要素を選択

$(“.class1″)
CLASS名 class1 の要素を選択

$(“.class1 .class2″)
CLASS名 class1 の要素の中にあるCLASS名 class2 の要素を選択

$(“.class3, .class4″)
CLASS名 class3、もしくはCLASS名 class4 の要素を選択

$(“.class5″, “#id1″)
ID名 id1 の要素の中にあるCLASS名 class5 の要素を選択

$(“.class6.class7″)
CLASS名 class6 と class7 2つ持つ要素を選択

$(“a[href]”)
aタグのhref属性がある要素を選択

$(“a[href = ‘#pagetop’]”)
aタグのhref属性の値が「#pagetop」の要素を選択

$(“a[href != ‘#pagetop’]”)
aタグのhref属性の値が「#pagetop」でない要素を選択

$(“a[href ^= ‘#link’]”)
aタグのhref属性の値が「#link」から始まる要素を選択

$(“a[href $= ‘bottom’]”)
aタグのhref属性の値が「bottom」で終わる要素を選択

$(“a[href *= ‘page’]”)
aタグのhref属性の値に「page」が含まれている要素を選択

$(“ul li:first”)
すべてのulタグ内をあわせたliタグの中の最初の要素を選択

$(“ul li:first-child”)
各ulタグ内にあるそれぞれのliタグの最初の要素を選択

$(“ul li:last”)
すべてのulタグ内をあわせたliタグの中の最後の要素を選択

$(“ul li:last-child”)
各ulタグ内にあるそれぞれのliタグの最後の要素を選択

$(‘li:not(“.class6″)’)
liタグでCLASS名 class6 が指定されていない要素を選択
[ トラバース ]
要素については先祖、親子、兄弟という階層が存在します。

<div>
<ul>
<li>兄</li>
<li>この要素から見て....ul要素は親、div要素は先祖</li>
<li>弟</li>
</u/>
ul要素からみるとli要素は子、div要素は親ということになります。
</div>

 
$(“#id1″).find(“.class7″)
ID名 id1 の要素の中にあるCLASS名 class7 の要素を選択

$(“ul”).children(“.class6″)
ulタグ の子要素にある CLASS名 class6 の要素を選択

$(“li.class6″).parent()
CLASS名 class6 があるliタグを持つ親要素を選択

$(“li.class6″).parent(“#id1″)
CLASS名 class6 があるliタグを持つ親要素でID名 id1 の要素を選択

$(“li.class6″).next()
CLASS名 class6 があるliタグに隣接する弟要素を選択

$(“li.class6″).next(“.class7″)
CLASS名 class6 があるliタグに隣接する弟要素の中でCLASS名 class7 の要素であれば選択
(それ以外であれば選択しない)

$(“li.class7″).prev()
CLASS名 class7 があるliタグに隣接する兄要素を選択

$(“li.class7″).next(“.class6″)
CLASS名 class7 があるliタグに隣接する兄要素の中でCLASS名 class6 の要素であれば選択
(それ以外であれば選択しない)

$(“a[href ^= ‘#link’]”).closest(“li”)
aタグのhref属性の値が「#link」から始まる要素の最も近いliタグ(親要素)を選択

$(“li”).slice(“3,12″)
すべてのliタグをあわせた0から数えて3個目から12個目までの間の要素を選択

$(“li”).find(“a”).css({color: ‘white’}).end()
liタグ内にあるaタグにスタイルを追加した後、直前の要素を選択

$(“li”).not(“li.class6″)
すべてのliタグでCLASS名 class6 が指定されていない要素を選択

$(“a[href *= ‘middle’]”).first()
aタグのhref属性の値に「middle」が含まれている一番最初にある要素を選択

$(“a[href *= ‘middle’]”).last()
aタグのhref属性の値に「middle」が含まれている一番最後にある要素を選択

$(“p”).siblings()
pタグの兄弟要素を選択

$(“p”).siblings(“p”)
pタグの兄弟要素の中でpタグの要素を選択

 

■詳しくは以下

jQuery本家ドキュメント「Selectors – jQuery API」「Traversing – jQuery API」