■概要
jQueryは、ブラウザの互換性をもたせるために作成されたライブラリです。
詳しい内容を勉強したいなら、
jQuery公式ページへ(click)
■使用方法
var span = $(‘span’); // タグ名が「span」であるオブジェクト
var box = $(‘#box’); // idが「box」であるオブジェクト
var cbtn = $(‘.cmn-btn’); // classが「cmn-btn」であるオブジェクト
box.html(‘content‘); // innerHTML
box.css(‘background-color’, ‘#ff3300’); // css適用
■例
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(window).ready(function () {
var sqr2 = $(‘#sqr2’);
sqr2.on(‘click’, function () {
sqr2.css(‘width’, sqr2.innerWidth() + 20 + ‘px’);
sqr2.css(‘height’, sqr2.innerHeight() + 20 + ‘px’);
});
});
</script>
<style>
#sqr2 { cursor: pointer; width:70px; height:70px; background-color:green; }
</style>
</head>
<body>
<div>押下すると大きくなる</div>
<div id=”sqr2″></div>
</body>
</html>
出力結果
押下すると大きくなる
