■css
<style>
.clickTest{
background:#ccfdbd;
padding:20px;
margin:0 0 5px;
}
.font-border{
border:solid 5px #000000;
}
</style>
■script
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
jQuery(function(){
//読み込み後になにかする。function()
$(function(){
//alert('読み込み完了');//コメントアウトを消してね
});
//変数に格納
var div1 = $('#div1').show();
//id='div1'を表示
$('#div1').show();
$('#div1 biv').show();//#div1の中のbiv要素を表示
$('#div1').find('.classname');//#div1の中の.classnameを全て検索して表示
$('#div2').hide();//非表示
$('#div2').empty();//要素を空にする
$('#div2').remove();//要素を削除
$('#div3').css('font-size','30px');//CSSを適応
$('#div4').text('<b>要素をテキストベースに変更</b>');//要素をテキストベースに変更
$('#div5').html('<b>要素をHTMLベースに変更</b>');//要素をHTMLベースに変更
$('a#name1').attr('href','http://www.yahoo.co.jp/');//属性値を変更
$('input#name1').val('はひふへほ');//入力値を変更
$('#div8').addClass('font-border');//classを追加する
$('#div9').removeClass('font-border');//classを削除する
$('#div10').append($('#append'));//id="append"の要素を#div10の中の後の方に入れる
$('#div11').prepend($('#prepend'));//id="appendTo"の要素を#div11の前の方に入れる
$('#div12').mouseenter(function(){
$('#div12').html('<b>マウスがのったらなにかをする。</b>');//マウスがのったらなにかをする。
$('#div12').css('font-size','30px');//マウスがのったらなにかをする。
});
$('#div12').mouseleave(function(){
$('#div12').html('マウスがはなれたらなにかをする。');//マウスがはなれたらなにかをする。
$('#div12').css('font-size','12px');
});
$('#div13').hover(function(){
$('#div13').css('font-size','30px');//マウスがのったらなにかをする。
},function(){
$('#div13').html('<b>マウスがはなれたらなにかをするをセットで。</b>');//マウスがはなれたらなにかをする。
$('#div13').css('font-size','12px');//マウスがのったらなにかをする。
})
$('input#name2').focus(function(){
$('input#name2').addClass('font-border');//input要素にフォーカスしたときになにかする。
});
$('input#name2').blur(function(){
$('input#name2').removeClass('font-border');//input要素にフォーカスから外したときになにかする。
});
$('#div15').click(function(){
$('#div15').addClass('font-border');//クリックされたらなにかする。
});
$('#div15').mouseleave(function(){
$('#div15').removeClass('font-border');
});
$('#div').fadeIn(5000);//5秒後フェードイン
$('#div').fadeOut(5000);//5秒後フェードアウト
$('#div').height(100);//要素のサイズ変更
$('#div').width(100);//要素のサイズ変更
});
</script>
■html
<div class="clickTest" id="div1">テキスト<div>div1の中のbiv要素を表示</div><span class="classname">#div1の中の</span><span class="classname">.classnameを全て検索して表示。</span></div>
<div class="clickTest" id="div2">テキスト</div>
<div class="clickTest" id="div3">CSSを適応</div>
<div class="clickTest" id="div4">テキスト</div>
<div class="clickTest" id="div5">テキスト</div>
<div class="clickTest" id="div6"><a id="name1" href="https://www.google.co.jp/">属性値を変更</a></div>
<div class="clickTest" id="div7"><input id="name1" type="text" name="name" value="あいうえお"></div>
<div class="clickTest" id="div8">classを追加する</div>
<div class="clickTest font-border" id="div9">classを削除する</div>
<div class="clickTest" id="div10">id="append"の要素を</div><div id="append">#div10の中の後の方に入れる</div>
<div class="clickTest" id="div11">id="prepend"の要素を</div><div id="prepend">#div11の中の前の方に入れる</div>
<div class="clickTest" id="div12">マウスがのったらなにかをする。</div>
<div class="clickTest" id="div13">マウスがのったらなにかをするをセットで。</div>
<div class="clickTest" id="div14"><input id="name2" type="text" name="name" value="あいうえお"></div>
<div class="clickTest" id="div15">クリックされたらなにかする。</div>