[jQuery] 선택자(1) - 기본

아이디 선택자

   : 특정 아이디값을 가진 요소 하나만 선택할 때 사용한다.

<h1 id="id1">JavaScript로 아이디 선택자</h1>
<h1 id="id2">jQuery로 아이디 선택자</h1>

<script>
    $(function(){
        // JavaScript 방식
        document.getElementById("id1").style.color = "red";
        document.getElementById("id1").inerrHTML = "글자가 빨간색!";
    
        // jQuery 방식
        $("id1").css("color", "orange");
        $("id2").html("글자가 주황색!");
    });
</script>

 

 

 

 

태그 선택자

   : 특정 태그 요소를 선택할 때 사용한다.

<p>p태그1</p>
<p>p태그2</p>
<p>p태그3</p>
<h1>h1태그1</h1>
<h1>h1태그2</h1>
<h1>h1태그3</h1>

<script>
    $(function(){
        // JavaScript 방식
        let pTag = document.getElementsByTagName("p");
        for(let i = 0; i < p.length; i++){
            p[i].style.background = "yellow";
        }
        
        // jQuery 방식
        $("h1").css("font-style", "italic");
        
        // 여러 종류의 태그들을 한번에 선택
        $("p, h1").css("color", "blue");
    });
</script>

 

 

 

 

클래스 선택자

   : 특정 클래스 속성을 가진 요소들을 선택할 때 사용한다.

<p class="pClass">클래스 선택자1</p>
<p class="pClass">클래스 선택자2</p>
<p class="pClass">클래스 선택자3</p>

<script>
    $(function(){
        // JavaScript 방식
        let pClass = document.getELementsByClassName("pClass");
        for(let i = 0; i < pClass.length; i++){
            pClass[i].style.fontSize = "40px";
        }
        // jQuery 방식
        $("pClass").css("backgroundColor", "lightpink");
    });
</script>

 

 

 

 

*** JavaScript와 jQuery 비교

1. 요소를 선택하기

JavaScript	jQuery
document.getElementById("아이디명")	$("#아이디명")
document.getElementsByTagName("태그명")	$("태그명")
document.getElementsByClassName("클래스명")	$(".클래스명")

 

2. 선택된 요소에 속성값을 변경하기

	JavaScript	jQuery
방식	선택된 요소 객체의 속성에 접근한다.	선택된 요소에 메소드를 이용하여 접근한다.
스타일	.style.속성 = "변경값";	.css("스타일속성", "변경값");
내용	.innerHTML = "변경값";	.html("변경값");
이벤트	.on이벤트명 = function(){}	.이벤트명(function(){});