はてなブログでjQueryを使てみた
はてなブログって記事を書きやすくて便利です。
とはいえ、javascriptは動かない（書き方が分からない）ので、画面上で動くプログラムが書けない。
ブログに必要ないと言われればその通りですが・・・
そんな中、jQueryが動くとの書き込み発見！。
試してみましょう。
ボタンクリックで何かするブログを作ろう！
では簡単な実験、下記のボタンをクリックすると色が変わるコードを書きました。
結果発表
クリックしないと何も起きないよ
プログラム説明
HTML編集で下記を追加するだけです。
ソースコードの空白が消えて見にくくて申し訳ないです。
書き方が分からない。
<!-- jQueryのライブラリー宣言 配置は先頭がイイよ -->
<!-- jQuery 2.0.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- ボタン（html）に識別IDを付ける id="button1" -->
<div><button id="button1" type="button">このボタンをクリック</button></div>
<h5> 結果発表</h5>
<p id="text1">クリックしないと何も起きないよ</p>
<p> </p>
<!-- ここからプログラム -->
<!-- script -->
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$('#button1')
.on('click', function(){
if(document.getElementById("button1").textContent=="元に戻す"){
document.getElementById("text1").style.color="black";
document.getElementById("text1").textContent="クリックしないと何も起きないよ";
document.getElementById("button1").textContent="このボタンをクリック";
}else{
document.getElementById("text1").style.color="red";
document.getElementById("text1").textContent="クリックできました";
document.getElementById("button1").textContent="元に戻す";
}
});
});
})(jQuery);
// ]]></script>
