jQuery 문법
jQuery 문법은 HTML elements를 선택하고 액션을 주는 형태로 만들어져 있습니다.
처음 보면 좀 이상한 자바스크립트 문법에 당황할 수도 있겠지만 몇번 사용해 보면 매우 직관적이고 편리하다는 것을 알 수 있습니다.
기본형태 :
$(selector).action()
- $는 jQuery라는 단어를 대체합니다. 즉 $로 줄여서 쓸 수 있습니다.
- selector는 HTML elements를 찾습니다.
- action은 elements를 수행합니다. 메서드의 형태로 되어 있습니다.
예)
$(this).hide() --> 현재 element를 숨깁니다.
$("p").hide() --> 모든 <p>를 숨깁니다.
$("p.test").hide() --> 모든 <p class="test">를 숨깁니다.
$("#test").hide() --> id="test"인 element를 숨깁니다.
ready()에 대해 알아봅시다.
이 함수는 문서로딩이 끝나기 전에 jQuery코드가 실행되는 것을 막는 함수입니다.
왜 그래야 할까요?
문서로딩이 되기 전에 이미지 사이즈를 얻으려 하거나 엘리먼트를 숨기는 코드가 실행되면 에러가 발생하게 되기 때문입니다. 모든 자원들이 다 컴퓨터에 불러와진 후에 명령이 실행되도록 하는 것이지요.
그렇기 때문에 jquery만의 이런 독특한 코딩스타일을 사용하게 되는 것입니다.
다른 자바스크립트프레임워크들도 다 비슷합니다.
사용법은 아래와 같습니다.
ready()메서드 안에 함수의 형태로 넣으면 됩니다.
$(document).ready(function(){
// jQuery 메서드는 여기로 간다.
});
$(this).hide예제
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
$("#test").hide예제
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
$("p").hide예제
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
$(".test").hide예제
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
각각을 실행해 보면서 어떤 차이가 있는지 쉽게 알 수 있습니다.
응용해서 사용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
var tempNum = 0; // 이렇게 상태변수를 사용해 주고
$(document).ready(function(){
$("button").click(function(){
// 조건문을 사용하여 요소들이 사라졌다가 나타나게 할 수 있습니다.
if(tempNum == 0){
$("p").hide();
tempNum = 1;
alert(tempNum);
} else if(tempNum == 1){
$("p").show();
tempNum = 0;
alert(tempNum);
}
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
'WEB_TECH > jquery' 카테고리의 다른 글
| [jQuery] 8. HTML Set (0) | 2013.04.22 |
|---|---|
| [jQuery] 7. HTML Get (0) | 2013.04.22 |
| [jQuery] 6. jQuery method chaining (0) | 2013.04.22 |
| [jQuery] 5. jQuery 이펙트 (0) | 2013.04.22 |
| [jQuery] 4. jQuery이벤트 (0) | 2013.04.22 |
| [jQuery] 3. jQuery 셀렉터 (0) | 2013.04.16 |
| [jQuery] 1. jQuery 시작하기 (0) | 2013.04.11 |
