HTML·CSS
id/class/name의 차이점
2승
2021. 12. 30. 02:16
| 요소(Element) | CSS | jQuery | 기타 | |
| id | 하나의 요소만 지정 가능 | 선택자(Selector) 역할 수행 가능 ex) #id | ${"#id_val"} | getElementById 활용할때 사용 |
| class | 여러 요소에 지정 가능 | 선택자(Selector) 역할 수행 가능 ex) .class | $(".class_val") | |
| name | 여러 요소에 지정 가능 | 선택자(Selector) 역할 수행 불가능 | $("input[name=name_val]" | <form>에서 submit 전송 시 사용 |
jQuery 접근 예시
//id
<button id="btn" type="button" onClick="text_start()">버튼</button>
<script>
function text_start(){
$("#btn").text('시작합니다.');
}
</script>
//class
<button class="btn" type="button" onClick="text_start()">버튼</button>
<script>
function text_start(){
$(".btn").text('시작합니다.');
}
</script>
//name
<button name="btn" type="submit" onClick="text_start()">버튼</button>
<script>
function text_start(){
$("input[name=btn]").val('시작합니다.');
}
</script>