jQuery
개요
JavaScript는 하나의 기업에서 혼자 만들고, 혼자 사용 환경까지 배포해주는 언어가 아닙니다.
표준과 규약이 있고 빠르게 발전하고 있기는 하지만 규약이 제대로 정해지기 전 나왔던 구형 브라우저 (Internet Explorer 9 이하)에서는 JavaScript 함수를 지원하지 않는 것이 있어 코드가 제대로 동작하지 않는 경우도 많습니다.
jQuery는, 이런 브라우저 호환성을 해결하고 자주 사용하는 코드를 재사용할 수 있도록 만들어진 라이브러리입니다.
상당히 많은 웹사이트가 현재도 jQuery를 사용하고 있습니다.
이 강의에서 상세하게 다루진 않을 예정이며, JavaScript 작업이 많이 필요한 홈페이지에는 jQuery 사용을 권장드립니다.
사용법
var spans = $('span'); // 태그이름이 div인 객체 찾기
var box = $('#my-box'); // id가 'my-box'인 객체 찾기
var cb = $('.common-button'); // class가 'common-button'인 객체 찾기
box.html('<strong>content</strong>'); // innerHTML 속성 유사 함수
box.css('background-color', '#ff3300'); // css 적용 (style 속성 유사)
예제
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).ready(function () {
var box = $('#box');
box.on('click', function () {
box.css('width', box.innerWidth() + 20 + 'px');
box.css('height', box.innerHeight() + 20 + 'px');
});
});
</script>
<style>
#box{
cursor: pointer;
width:80px;
height:80px;
background-color:#666;
}
</style>
</head>
<body>
<div>click to exapand</div>
<div id="box"></div>
</body>
</html>