jquery 철학 소개
한동안 jquery 공부를 해보니 이거 물건이네요 강추입니다.
프로그래머 입장에서는 정말 쓸만한 놈인것 같습니다.
일단 철학자체가 좋아요 예를 들면 unobtrusive javascript 겸손한 자바스크립트라고들하는것 같은데 사전을 찾아보니 삼가는 자바스크립트가 더 낫은것 같습니다.
css가 다루는걸 style이라고 하면 javascript 가 다루는걸 behavior라고 하고
css를 document에서 분리해냈듯이 javascript도 분리하자는 주의입니다.
초 간단 예를 들면 이런겁니다
<html>
<head>
<script type="text/javascript">
function view() {
// 내용
}
</script>
</head>
<body>
<img id="photo" src="###" onclick='view()'>
</body>
</html>
분리해보죠
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('photo').onclick = view;
}
function view() {
// 내용
}
</script>
</head>
<body>
<img id="photo" src="###">
</body>
</html>
body내부에는 자바스크립트를 쓰고 있지 않습니다
이런식으로 분리해내는게 unobtrusive javascript 입니다
그런데 id지정하고 getElementById쓰는것도 귀찮고 손이 많이 가는 작업이니 jQuery가 알려주는 손쉬운 방법을 보죠
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" ></script>
<script type="text/javascript">
$(
$('#photo').click(
function(event) {
// view에 해당 하는 내용
}
)
);
</script>
</head>
<body>
<img id="photo" src="###">
</body>
</html>
초간단 예를 들면 이게 뭐가 쉬워졌나 싶으실 겁니다. 어쨌건 첫번째로 지켜야 할 원칙 javascript는 분리해놓은 상태입니다.
$('#photo')를 하면 document.getElementById('photo')와 동일한 역할을 합니다.
즉 $('#id')하면 해당 아이디를 갖는 element를 리턴합니다. 정확히는 해당아이디를 갖는 element 배열을 리턴합니다.
작동하는 방식은 위쪽 예제와 동일합니다.
jQuery가 기본 자바스크립트보다 unobtrusive javascript를 쓰기에 적합한 장점으로는 document내의 어떤 요소를 찾을때 괭장히 편하게 찾을 수 있는 방법을 제공한다는 점입니다.
id를 지정해서 찾을 수 있고 어떤 클래스가 지정된 요소들을 찾을 수도 있습니다.
또는 css selector처럼 복잡한 요소를 찾을 수도 있습니다
$("ul li dd") 이건 ul 밑에 li 밑에 dd인 element를 리턴합니다.
기존 css selector에서 쓰는것 말고 jQuery에서 제공하는 여러필터가 있습니다.
이걸 쓰면 테이블에서 홀수 행 혹은 짝수행만 뽑아 올수도 있고
td중에 데이터에 year라는 문자가 있는 놈만 뽑아 올수도 있고
지금 클릭한 element 바로 밑에 있는 놈 또는 바로 위에 있는 놈 또는 부모인놈을 골라낼수도 있습니다.
즉 id같은 걸 쓰지 않고도 document DOM의 구조를 이용해서 필요한 요소를 추려 낼수 있다는게 괭장한 강점입니다.
더불어 hidden상태인것만 골라낼 수도 있습니다
아 시간 관계상 예시로 만든걸 링크로 걸어놓겠습니다.
http://jfrom.tistory.com/entry/jquery를-이용한-클릭-롤링-구현
예시를 보시면 id같은걸 하나도 안쓰고 dom의 구조만 이용한 방법을 보실 수 있습니다.
다음 시간에는 jQuery가 품고 있는 다른 철학적 내용에 대해 논해보도록 하겠습니다.