JQuery

728x90

개요

JavaScript는 하나의 기업에서 혼자 만들고, 혼자 사용 환경까지 배포해주는 언어가 아닙니다.
표준과 규약이 있고 빠르게 발전하고 있기는 하지만 규약이 제대로 정해지기 전 나왔던 구형 브라우저 (Internet Explorer 9 이하)에서는 JavaScript 함수를 지원하지 않는 것이 있어 코드가 제대로 동작하지 않는 경우도 많습니다.

jQuery는, 이런 브라우저 호환성을 해결하고 자주 사용하는 코드를 재사용할 수 있도록 만들어진 라이브러리입니다.
상당히 많은 웹사이트가 현재도 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>

728x90

'📚 Study > JS, JQuery' 카테고리의 다른 글

jQuery - $(document).ready() 대신 $()를 사용하자 (0)	2023.01.15
jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 (0)	2023.01.15
[node.js] req.params vs req.body vs req.query (1)	2022.09.20
Mongo DB와 Node.js 연동하기 (0)	2022.05.15
요청 라우팅하기 (0)	2022.05.14

개요
사용법
예제

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

JQuery

개요

사용법

예제

'📚 Study > JS, JQuery' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역