感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでHTML要素を取得するサンプル

スポンサーリンク

jQueryでHTMLコンテンツを取得するサンプル

$('p').html();

とすることで、p要素のHTMLコンテンツを取得して表示することができる。
たとえば、以下の実行結果は、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webページに含まれるHTMLコンテンツを取得する</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
	
</script>
</head>
<body>
<p>
赤司の能力は<em>紫原</em>との1on1によって覚醒した。<br>
選手の呼び名が変わり、瞳が変わった。<br>
<em>帝王の血</em>が呼び覚まされた。<br>
</p>

<script type="text/javascript">
	//$('p').html('<strong>Hello World</strong>');
	console.log($('p').html());
</script>
</body>
</html>

こうなる。

赤司の能力は<em>紫原</em>との1on1によって覚醒した。<br>
選手の呼び名が変わり、瞳が変わった。<br>
<em>帝王の血</em>が呼び覚まされた。<br>

コメントアウトを外すと、HTML要素の中身の入れ替え、ここではp要素の中身の入れ替えができる。

jQueryで特定の兄弟を選択する

兄弟要素を色々と取得してみるサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>特定の要素の特定の兄弟を選択する</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
	
</script>
</head>
<body>
<div id="content">
	<h1>SLUM DANK</h1>
	<h2>member of SLAMDUMK</h2>
	<ul>
		<li>桜木花道</li>
		<li>流川楓</li>
		<li>宮城リョータ</li>
		<li>戸愚呂弟</li>
	</ul>
	<h1>黒子のバスケ<h1>
		<h2>member of 黒子のバスケ</h2>
		<ul>
			<li>黄瀬涼太</li>
			<li>青峰大輝</li>
			<li>赤司征十郎</li>
			<li>紫原敦</li>
			<li>緑間真太郎</li>
		</ul>

</div>
<hr>
<div id="result"></div>
<script type="text/javascript">
	var h2 = $('h1 + h2');
	console.log(h2[0]); //<h2>member of SLAMDUMK</h2>
	var list = $('h1,h3,ul');
	var kurokoUl = list[4];  
	console.log(kurokoUl); //<ul>の要素を取ってくる
	console.log($(kurokoUl).children()); //<ul>の下の<li>を取ってくる(黒子)
	console.log($("ul li:last").text()); //緑間真太郎が取れる
	var kurokoList = $(kurokoUl).children();
	$('#result').html(kurokoList); //id resultのところlistを移す

</script>
</body>
</html>

勉強した本

jQueryクックブック

jQueryクックブック

感謝のプログラミング

今回で感謝のプログラミングは【527時間目】
10000時間まで、あと【9473時間】

jQueryの前にGoogle App Engineの勉強を2時間してた。