jQueryのloadを使って別ページの指定箇所の情報を取得表示する方法



jQueryのloadを使用して別ページの情報を取得します。
PHPのfile_get_contents的な感じの利用方法ですかね。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
#idWrap{
	width:800px;
	margin:0 auto;
}
#idLoadClk{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#666666;
	color:#FFFFFF;
	border:solid 1px #666666;
}
#idLoadClk:hover{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#FFFFFF;
	color:#000000;
	border:solid 1px #000000;
}

#idLoadArea{
	cursor:pointer;
	margin:auto;
	width:700px;
	border:dotted 1px #333333;
}
p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idLoadClk").click(function(){
		$("#idLoadArea").load("/sitemap/ #content div[class=hfeed]");
	});
});
</script>

上記.loadの箇所ですが、
/sitemap/ページより、idがcontentタグ内にあるclassがhfeedタグ内の情報を取得します。

3.HTMLの記述例

<div id="idWrap">
	<h1>下のエリアをクリックすると<a href="/sitemap" title="SITEMAP | BLINDER HIDDEN | BLINDER HIDDEN" target="_blank">SITEMAP</a>のリンク情報をs取得表示します。</h1>
    <div id="idLoadClk">ココをクリック</div>
    <br><br>
	<div id="idLoadArea">
		<p>ココにサイトマップの情報を取得表示します。</p>
	</div><!--/idLoadArea-->
</div>

jQueryのloadを使って別ページの指定箇所の情報を取得表示するデモ

取得(load)する情報量が多いと若干読み込みに時間が掛かりそうです。
JavaScriptで結構何でも出来ちゃいますね。