<style>
.box{
width:200px;
height: 200px;
background-color:#ddd;
}
</style>
<body>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).css({
"background-color":"#ff9999",
});
}, function(){
$(this).css({
"background-color": "#dddddd",
});
});
});
</script>
$(document).ready(function()
HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行
書き方を変えて試してみます。
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(".box").html("hello");
}, function(){
$(".box").html("你好");
});
});
</script>
おお、すこし馴染んできました。
クリックされた時
$(document).ready(function(){
$(".box").click(function(){
$(".box").html("クリックされました");
});
});
buttonがクリックされたら、.boxの表示を変える
<body>
<div class="box">こんにちは</div>
<button class="button">表示</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".box").html("クリックされました");
});
});
</script>
なるほど！
少し応用して、Math.floor(Math.random * 配列の数)として、配列の乱数をつくると、おみくじも簡単にできますね♪
<body>
<div class="box"></div>
<button class="button">おみくじを引く</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
var kuji = ['大吉','中吉','小吉','吉','凶','大凶']
$(document).ready(function(){
$(".button").click(function(){
var rand = Math.floor(Math.random() * 6);
$(".box").html(kuji[rand]);
});
});
</script>
