반응형
jQuery축약하기
jQuery를 사용함을 jQuery().... 를 -> $()..... 로 함축하여 사용할수있다.
jQuery로 요소를 선택하기
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
</script>
</body>
</html>
|
cs |
1. class와 연관된 요소를 선택하고 싶을때:
'.{클래스 이름}' 으로 선택
|
1
2
3
4
5
6
7
8
9
|
<html>
<body>
<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');
</script>
</body>
</html>
|
cs |
2. id 와 연관된 요소를 선택하고 싶을때:
'#{id 이름}' 으로 선택
jQuery의 이벤트 설치, 제거 , 발동
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function clickHandler(e) {
alert('thank you');
}
$('#click_me').live('click', clickHandler);
$('#remove_event').live('click', function(e) {
$('#click_me').die('click', clickHandler);
});
$('#trigger_event').live('click', function(e) {
$('#click_me').trigger('click');
});
</script>
</head>
<body>
<input id="click_me" type="button" value="click me" />
<input id="remove_event" type="button" value="unbind" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>
|
cs |
1. 이벤트를 설치하기
.live() 를 사용하기
해당 예제에선 'click'을 하엿을때, clickHandler 란 함수를 호출 이벤트를 설치
2. 이벤트를 제거하기
.die()를 사용하기
해당 예제에선 'click'을 하엿을때, clickHandler란 함수를 제거
3. 이벤트를 호출하기
.trigger()를 사용하기
해당 예제에선 'trigger_event'를 눌렀을때, click_me에 설치가 이미된 click를 trigger()를 통해 호출하였다.
반응형
'자바스크립트' 카테고리의 다른 글
| jQuery 사용하기 (3) [폼] (0) | 2022.12.11 |
|---|---|
| jQuery 사용하기 (2) [엘리먼트 제어] (0) | 2022.12.05 |
| jQuery 개요 (0) | 2022.11.30 |
| JavaScript의 특징 (0) | 2022.11.29 |
| 자바스크립트의 개요 (0) | 2022.11.28 |