기본 선택자
아이디 선택자
- 특정 고유한 아이디 값을 가진 요소 하나만을 선택하고자 할 때
- 순수 자바스크립트 방식
- document.getElementById("아이디명")
- 선택된 요소객체에 속성에 접근해서 값을 변경 (대입을 통해)
- jQuery 방식
- $("아이디명")
- 선택된 요소객체에 메소드를 이용해서 값을 변경
<script>
$(document).ready(function(){
// 순수 자바스크립트 방식 --> document.getElementById("아이디명")
// 선택된 요소객체에 속성에 접근해서 값을 변경 (대입을 통해)
document.getElementById("id1").style.color = "red";
document.getElementById("id1").innerHTML = "h1변경";
// jQuery 방식 --> $("아이디명")
// 선택된 요소객체에 메소드를 이용해서 값을 변경
$("#id2").css("color", "pink");
$("#id2").html("h2변경");
// .html() : 선택된 요소의 innerHTML과 관련된 기능을 수행 메소드
})
</script>
태그 선택자
- 순수 자바스크립트 방식
- document.getElementsBytagName("태그명") : 배열
- 반복문 이용해서 변경해야함
- jQuery 방식 --> $("태그명")
- 반복문 이용할 필요X (한번에 변경 가능)
- 여러 종류의 태그들을 동시에 선택 가능
<script>
$(document).ready(function(){
// 순수 자바스크립트 방식 --> document.getElementsBytagName("태그명") : 배열
var p = document.getElementsByTagName("p") // [p, p, p, ..]
//p.style.color = "yellow"; -> 배열 인덱스 제시해야함
for(var i=0; i<p.length; i++){
p[i].style.color = "red";
}
/* 왜인지는 모르겠으나 오류남..
for(var i in p){
p[i].style.color = "red";
}
*/
// jQuery 방식 --> $("태그명")
$("h5").css("color", "blue");
// 여러 종류의 태그들을 동시에 선택하고자 한다면
$("p, h5, #id1").css("backgroundColor", "yellow");
})
</script>
클래스 선택자
- 특정한 클래스 속성을 가진 요소들 선택하고자 할 때 사용
- 순수자바스크립트 방식
- document.getElementsByClassName("클래스명") : 배열
- 반복문 사용
- jQuery 방식 --> $(".클래스명")
- .click() : 클릭이벤트와 관련된 기능 수행
<script>
$(document).ready(function(){
// 순수자바스크립트 방식 --> document.getElementsByClassName("클래스명") : 배열
var items = document.getElementsByClassName("item");
for(var i=0; i<items.length; i++){
items[i].style.color = "orange";
items[i].onclick = function(){
console.log("클릭됨");
}
}
// jQuery 방식 --> $(".클래스명")
$(".select").css("backgroundColor", "pink");
$(".select").click(function(){
alert("클릭됨");
});
// .click() : 클릭이벤트와 관련된 기능 수행
})
</script>
