jQuery

jQuery 기본선택자

1. 아이디 선택자

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

• 순수 javascript 방식 코드 :

<h1 id="id1">ID1</h1>
<h2 id="id2">ID2</h2>

$(document).ready(function(){
    //순수 자바스크립트 방식 -> document.getElementById("아이디명");
    //선택된 요소 객체의 속성에 접근해서 값을 변경 (대입을 통해)
    document.getElementById("id1").style.color = "blue";
    document.getElementById("id2").innerHTML = "h1변경";
});

• 순수 javascript 방식 html 출력 :
  

id1을 선택하여 색을 blue로 변경하고 id2를 선택하여 문자열을 변경했다.

• jQuery 방식 코드 :

<h1 id="id1">ID1</h1>
<h2 id="id2">ID2</h2>

$(document).ready(function(){
    //jquery 방식 $("#아이디명")
    //선택된 요소 객체에 메소드를 이용해서 값을 변경
    $("#id1").css("color","red");
    $("#id2").html("h2 변경");
    //.html() : 선택된 요소의 innerHTML 과 관련된 기능을 수행하는 메소드
});

• jQuery html 출력 :
  

id1을 선택하여 색을 red로 변경하고 id2를 선택하여 문자열을 변경했다.

---

2. 태그 선택자

• 순수 javascript 코드 :

<p>JAVA</p>
<p>ORACLE</p>
<p>JDBC</p>
<h5>HTML</h5>
<h5>CSS</h5>
<h5>JAVASCRIPT</h5>

$(document).ready(function(){
    var p = document.getElementsByTagName("p"); //[p,p,p...]
    // p.style.color = "red"; //p에 담겨있는것은 배열의 형태이기 때문에 속성적용 불가.
    
    for(var i=0; i<p.length;i++){
        p[i].style.color = "red";
    }
});

• 순수 javascript 방식 html 출력 :
  

p태그인 JAVA, ORACLE, JDBC의 색상을 red로 변경된 것을 확인한다.

p에 담긴 것은 배열의 형태라서 속성 적용이 불가하므로 p[i]에 속성을 적용해야 한다.

---

• jQuery 방식 코드 :

<p>JAVA</p>
<p>ORACLE</p>
<p>JDBC</p>
<h5>HTML</h5>
<h5>CSS</h5>
<h5>JAVASCRIPT</h5>

$(document).ready(function(){
	$("h5").css("color","blue");
});

• jQuery 방식 html 출력 :
  

h5태그인 HTML, CSS, JAVASCRIPT의 색을 blue로 변경한 것을 확인한다.

---

• 여러 태그를 동시에 선택하는 방식 코드 :

<p>JAVA</p>
<p>ORACLE</p>
<p>JDBC</p>
<h5>HTML</h5>
<h5>CSS</h5>
<h5>JAVASCRIPT</h5>

$(document).ready(function(){
	$("p,h5").css("backgroundColor","beige");
});

• 여러 태그를 동시에 선택하는 방식 html 출력 :
  

p태그와 h5태그의 배경색을 beige로 변경한 것을 확인한다.

---

3. 태그 선택자

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

• 순수 javascript 방식 코드 :

<h1 class="item">Class1</h1>
<h1 class="item select">Class2</h1>
<h1 class="item select">Class3</h1>

$(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(i+"번 클릭됨");
        }
    }
});

• 순수 javascript 방식 html 출력 결과 :
  

---

• jQuery 방식 코드 :

<h1 class="item">Class1</h1>
<h1 class="item select">Class2</h1>
<h1 class="item select">Class3</h1>

$(document).ready(function(){
    //jQuery 방식 
    $(".select").css("backgroundColor","lightblue");
    $(".select").click(function(){
        alert("클릭됨");
    });
    //.click() : 클릭 이벤트와 관련된 기능 수행
});

• jQuery 방식 html 출력 결과 :
  

• jQuery 방식 .select 클릭 시 출력 결과 :
  

---