CSPとjQueryを組み合わせる

jQueryとは？

• ブラウザによるJavaScriptの挙動の差異を隠蔽してくれる
• DOM要素の指定が強力
• CSSの操作が容易
• AJAXライブラリを含む
• 拡張が容易
• オープンソースかつフリー

どのように使うか

どのようなことが出来るか

function step1(){
	$('#test').empty(); // id=testの中身を全部空にする
	$('a').each(function(){ // ページ中の全てのaタグについて、以下を実行
		var url=$(this).attr('href'); // href内を変数urlに格納
		$('#test').append('<div>'+url+'</div>'); //id=testに取得したurlを<div>で囲んで追加
	});
	$('#step2').show('slow'); // id=step2を表示する
}

function step2(){
	$('#test div:even').css('background-color','royalblue'); // id=testの中の偶数個目のdivについて、背景色を設定
	$('#test div:odd').css('background-color','darkviolet'); // id=testの中の奇数個目のdivについて、背景色を設定
	$('#step3').show('slow'); // id=step3を表示する

}

function step3(){
	$('#test div').append('<input type=button class=Edit><input type=button class=Delete>');
	// id=test の中の divそれぞれに ボタンを2つずつ追加
	$('#test div input.Delete') // id=test の中の div の中の input のうち class=Deleteのものについて、
		.attr('value','Delete') // value=Delete を設定 (ボタンにDeleteと表示)
		.click(function(){ $(this).parent('div').remove(); }); // クリックされたらボタンを含むdivを空にする
	$('#test div input.Edit') // id=test の中の div の中の input のうち class=Deleteのものについて、
		.attr('value','Edit') // value=Edit を設定 (ボタンにEditち表示)
		.click(function(){ // ボタンがクリックされたら
			var str=prompt("適当に変更してみて",$(this).parent('div').text()); // 入力ダイアログを表示
			$(this).parent('div').text(str); // 入力された内容を反映
		});
}