jQueryの.loadを使って別ページの指定箇所を取得表示してみる

jQueryの.load関数を使って別ページの指定箇所のみをピンポイントで取得し、その取得した情報を表示してみます。

1．CSSのコード例

<style type="text/css">
<!--
#idLoadBtn{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FF4242;
	color:#FFFFFF;
	border:solid 1px #FF4242;
	-moz-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242 5px 5px 5px #FF4242;
	-webkit-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242, 5px 5px 5px #FF4242;
	font-size:18px;
}
#idLoadBtn:hover{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FFFFFF;
	color:#FF8686;
	border:solid 1px #FF8686;
	-moz-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686 3px 3px 3px #FF8686;
	-webkit-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686, 3px 3px 3px #FF8686;
	font-size:18px;
}
#idLoadLlink{
	cursor:pointer;
	margin:auto;
	width:700px;
	border:solid 1px #FF4242;
	color:#FF4242;
}
#idLoadLlink a{
	color:#FF4242;
	line-height:1.4em;
}
-->
</style>

2．JavaScriptのコード例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idLoadBtn").click(function(){
		$("#idLoadLlink").load("/ #categories-2 ul li");
	});
});
</script>

3．HTMLのコード例

<div id="idLoadBtn">クリック</div>


<div id="idLoadLlink">
このエリアに取得情報を表示します。
</div>
<!--/idLoadLlink-->

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

別ドメインのURL（クロスドメイン）は指定出来ないと思います。

※流用される場合は自己責任でお願いします。