jQuery 구성
지난시간에 기초적인 jQuery의 개요를 얘기 했다.
사실 jQuery와 같은 기술은 직접 해보면서 외우는 게 크다.
여기에는 단순히 자주 쓰는 기술, 그리고 정리의 목적이지 자신이 쓰고 싶은 기술은 자신이 찾아서 쓰는 것이 가장 현명하다.
그럼 셀렉터부터 정리를 해보자.
Selector
Selector는 무엇일까?
본연의 단어 뜻에 따라 선택하는 것이다.
내가 바꾸고 싶은 것, 내가 이벤트를 주고 싶은 것, 내가 컨트롤하고 싶은 것을 선택하기 위해 사용하는 것이다. 문법적으로 치면 대명사 같은 역할이라고 할까… 하여튼,
기본적으로 모든 것들은 여기에 가면 다 정리가 되어있다.
일반적으로 (내가) 자주 쓰는 것들을 한 번 정리 해보겠다. 자주쓴다고 해봐야 내가 자주 쓰는 것들이고, 자신이 좋아하는 문법 혹은 자신이 쓰는 데 알맞은 문법을 찾아서 쓰는 것이 제일 좋다.
기본적으로 id나 class 를 선택하는 것은 너무 자주 쓰는 것이고, 누구나 처음 배우기 때문에 넘어가도록 하겠다.
: 연산자를 이용하는 것이 자주 쓰이는데 흔히 odd나 even의 경우 규칙성을 위해 자주 쓰인다.
nth-of-child 혹은 nth-of-type의 경우도 규칙성을 만들때 자주 쓰이는데, n단계별로 규칙을 만들 때 쓰인다.
그리고 input tag 에 대한 선택을 참 많이 쓰는데, 해당 사항에 id가 없다면, 혹은 모든 tag들에 대해 쓰고 싶을 때, 쓰일 때가 많다.
Attribute
Attribute(속성)은 그냥 예제나 한번 적어보고 할 때에는 참 “왜 이건 되고 저건 안되지?” 라고 생각했었는데, 역시 그럴때는 문서를 한번 더 보는 것이 도움이 된다.
특히, jQuery 버젼이 올라가면서 prop 이라는 속성이 추가가 됬는데, 이전 속성으로 하면 되지 않던 것들이 prop 으로 해결되는 경우가 많았다.
(예전에 올라왔던 stackoverflow의 글 같은 경우는 해당 사항이 변경 되기 전에 올라온 것도 많아서 빙 둘러서 작성이 될 때도 있으니 잘 알아 두도록 하자.)
정리를 해보면,
selector.attr(attrName)의 경우 객체의 속성을 가져오는데, 이것은 리턴값이 string이다. 해당사항에 주의 하도록 하자.
이 부분이 prop과 다른 부분이기도 하다.
attrName의 경우, 해당 속성이 여러개 인 경우도 있고, 여러 조건을 넣어 주고 싶을 때도 있는데 그럴 때는 jSon 형태로 넘겨준다면 원하는 값을 얻을 수 있다.
예를 들어 Test라는 class에 있는 src를 가져와 보자.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test").attr("src"));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey">확인!</div>
</body>
</html>그럼 해당 Test 에있는 src 값인 heyheyhey가 console에 나오게 된다.
그런데 Test 가 여러 곳에 선언 되있을 때는?
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test").attr("src"));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey1">확인!</div>
<div class="Test" src="heyheyhey2">확인!</div>
<div class="Test" src="heyheyhey3">확인!</div>
<div class="Test" src="heyheyhey4">확인!</div>
<div class="Test" src="heyheyhey5">확인!</div>
</body>
</html>위 사항을 실행해서 콘솔을 보면 첫번째인 heyheyhey1만 출력이 된다.
다음은 참고 사항인데,
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test"));
console.log($(".Test")[2]);
console.log($(".Test")[2].attr("src"));
console.log($(".Test:nth-child(2)").attr("src"));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey1">확인!</div>
<div class="Test" src="heyheyhey2">확인!</div>
<div class="Test" src="heyheyhey3">확인!</div>
<div class="Test" src="heyheyhey4">확인!</div>
<div class="Test" src="heyheyhey5">확인!</div>
</body>
</html>이 예시를 실행시켜보면, jQuery의 selector가 어떻게 되는 지 다시 떠올리게 될 것이다.
첫번째는 jQuery selector의 구성이 나올 것이고, 두번째는 실제 HTML DOM 형식으로 배열 2번째 요소에 들어있는 값이 출력이 되며, 세번째는 오류가 나오고 4번째에 원하는 2번째 값의 src가 출력이 될 것이다.
즉, jQuery는 jQuery object가 쓰기 편하도록 HTML DOM 형식의 값들을 들고 있는 것이고, HTML DOM 형식에서 attr 함수는 jQuery 형식이 아니므로 오류가 나오며, 원하는 값을 들고 오기 위해서는 nth-child라는 값을 이용해 들고 올 수 있는 것이다.
자 그럼 해당 attr에 값을 넣어줘보자.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test").attr("src","heyheyhey6"));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey1" name="1">확인!</div>
<div class="Test" src="heyheyhey2" name="2">확인!</div>
<div class="Test" src="heyheyhey3" name="3">확인!</div>
<div class="Test" src="heyheyhey4" name="4">확인!</div>
<div class="Test" src="heyheyhey5" name="5">확인!</div>
</body>
</html>위를 실행시키면, 모든 src값이 heyheyhey6로 바뀌었다는 것을 볼 수 있다.
근데 할때 마다
console.log($(".Test").attr("src","heyheyhey6")
console.log($(".Test").attr("name","6")
이런식으로 바꿔주어야 할까?
다행히 그렇지 않다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test").attr({"src" : "heyheyhey6","name" : "6"}));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey1" name="1">확인!</div>
<div class="Test" src="heyheyhey2" name="2">확인!</div>
<div class="Test" src="heyheyhey3" name="3">확인!</div>
<div class="Test" src="heyheyhey4" name="4">확인!</div>
<div class="Test" src="heyheyhey5" name="5">확인!</div>
</body>
</html>위와 같이 jSon 형태로 쓴다면, 한번에 바꿀수 있다.
한가지 더 재밌는게 있다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".Test").attr("name",function(number){return number+10}));
});
</script>
</head>
<body>
<div class="Test" src="heyheyhey1" name="1">확인!</div>
<div class="Test" src="heyheyhey2" name="2">확인!</div>
<div class="Test" src="heyheyhey3" name="3">확인!</div>
<div class="Test" src="heyheyhey4" name="4">확인!</div>
<div class="Test" src="heyheyhey5" name="5">확인!</div>
</body>
</html>와 같이 한다면 parameter로 해당 선택자의 배열 순서대로 index가 가져오게 되고, name의 값을 원하는 대로 바꿔 줄 수있다.
자 그럼 prop 과의 차이를 한번 알아보자.
prop은 property고 attr는 attribute다.
이게 뭔말인가 싶다..
둘다 속성아닌가 하겠지만, 확실한 차이는 주체에 있다.
attr 은 HTML에서의 속성이다. 그러나 prop은 javascript가 실질적으로 표현하는 속성이다.
둘의 차이는 가장 대표적으로 src나 href에서 나타나는데 이것은 여기에 설명된 것을 참조하기 바란다.
특히 checked나 selected의 경우 가장 자주 틀린다.
아까전에 말했던 attr은 return이 string이라는 것이 대표적인 것이다.
예를 들어 내가 javascript로 radio의 checked속성을 바꾸고 싶다고 하자.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($("input[value='male']").attr("checked"));
if($("input[value='male']").attr("checked") === true){
console.log("true")
$("input[value='female']").attr("checked","true");
}
else{
console.log("false")
}
});
</script>
</head>
<body>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery 시작하기2</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($("input[value='male']").prop("checked"));
if($("input[value='male']").prop("checked") === true){
console.log("true")
$("input[value='female']").prop("checked","true");
}
else{
console.log("false")
}
});
</script>
</head>
<body>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</body>
</html>자 위 두 예시로 attr과 prop의 결과가 다르다는 것을, 또한 string을 return한다의 차이가 설명 될 것이라고 본다.
EVENT
자 이제 event에 정리해볼 차례다.
이벤트에 대해 사실 하나하나 다 정리하는 건 그리 실용적이지 못하다. 많은 사람들이 정리해둔 사이트가 있고, 원하는 사항에 따라 선택해서 사용하면 되기 때문이다.
예를 들어 이곳 이나 이곳에 좋은 예시와 함께 나와 있고, 정말 좋은 곳은 이곳 나도 잘 모르던 것들이 잘 정리되어 있다.
재밋는 것들은 이벤트 버블인데 이벤트에 따라 중복 적용될 경우가 있다. 해당 예시도 언급한 타 블로그에 잘 정리되어 있다.
사실 jQuery는 이정도 했을 때 대부분 작성 할 수 있다.
이 이외에 css 속성도 바꿀 수 있으며 기타 자잘한 것도 많지만 그건 개인의 목적에 따라 찾아서 하는 것이 빠를 것이다.
다음 포스팅은 jQuery mobile과 jQuery UI에 대해 소개해 보겠다.