오늘은 셀렉터 기초에 대해 알아보도록 하겠습니다.
|
간단하게만 포스팅 할께요 ㅎ
|
<html>
<body>
<button id="btn_id" class="btn_class" name="btn_name">Click 1</button>
<button class="btn_class">Click 2</button>
<button name="btn_name">Click 3</button>
</body>
</html> |
ID로 찾기 (identity의 약어인거 아시죠? 같은 id를 쓸 수 없습니다.)
|
<script>
$(document).ready(function(){
$('#btn_id').click(clickBtn); //같은 표현 $('[id=btn_id]')
});
function clickBtn(){
alert("ID");
}
</script>
[결과] 
* Click 2, Click 3 을 눌렀을 때에는 아무 반응을 하지 않습니다.
|
Class로 찾기 (btn_class 라는 이름을 가진 클래스를 모두 찾습니다.)
|
<script>
$(document).ready(function(){
$('.btn_class').click(clickBtn); //같은 표현 $('[class=btn_class]')
}); // $('button.btn_class')
function clickBtn(){
alert("Class.");
}
</script>
[결과] 
* Click 3 을 눌렀을 때에는 아무 반응을 하지 않습니다.
|
Name으로 찾기 (btn_name 라는 이름을 가진 클래스를 모두 찾습니다.)
|
<script>
$(document).ready(function(){
$('[name=btn_name]').click(clickBtn);
});
function clickBtn(){
alert("Name");
}
</script>
[결과] 
* Click 2 를 눌렀을 때에는 아무 반응을 하지 않습니다. |
|
|
|
