[jQuery] jQuery 기본 문법

🔍 jQuery란? 

자바스크립트의 라이브러리이다. 

 

✍ jQuery 기본 문법 

=> jQuery(객체명 또는 선택자).함수명(); 

=> $(객체명 또는 선택자).함수명(); 

 

- HTML 문서의 DOM 객체가 로딩되면 자동으로 호출되는 이벤트: document 객체의 ready 이벤트 

 

1) Ready 이벤트 처리 문법 - 1 

jQuery(document).ready(function () {
	alert("Ready 이벤트 처리 방법 - 1");
});

 

2) Ready 이벤트 처리 문법 - 2

$(document).ready(function() {
	alert("Ready 이벤트 처리 문법 - 2");
});

-> jQuery 객체명을 $ 기호로 대체할 수 있다. 

-> document 객체의 ready 이벤트가 아닌 다른 객체 및 이벤트에 활용이 가능한 형태이다. 

 

3) Ready 이벤트 처리 문법 - 3 

$(function () {
	alert("Ready 이벤트 처리 문법 - 3"); 
});

-> document 객체 지정 및 ready 이벤트 함수 호출 생략 하는 방법 

즉, document 객체의 ready 이벤트 전용 함수 형태이다. 

 

 

---

🔍 선택자 

- 문서 객체 내의 요소 선택을 위한 용도로 사용하는 구성 요소 

- 자바스크립트에서 사용하는 document.getElementXXX 또는 document.querySelector와 달리 

jQuery 에서는 $("선택자") 형태로 대상을 지정하므로 문장이 훨씬 간결해진다. 

 

✍ 선택자 지정 기본 문법

$("선택자" 또는 "*").함수명("속성명", "속성값"); 

ex) 지정한 요소에 대한 css 속성을 변경하는 기본 문법 

=> $("선택자").css("속성명", "속성값"); 

 

✍ 선택자 종류 

1. 직접 선택자: 특정 대상(요소)을 직접 지정하기 위한 선택자 

- 아이디(#) : 페이지 내에서 유일한 요소(중복 불가) => $("#선택자명")

- 클래스(.) : 복수개의 동일한 요소 => $(".선택자명")

- 태그 : 동일한 태그를 갖는 복수개의 요소 => $("태그명") 

- 태그 속성 : 동일한 태그들 중 특정 속성을 갖는 요소만 지정 => $("태그명[속성명]")

- 태그 속성 값 : 동일한 태그의 동일 속성들 중 특정 속성값을 갖는 요소만 지정 => $("태그명[속성명=값]") 

 

$(document).ready(function() {
	alert("ready 이벤트!");
});

-> ready 이벤트를 통해 문서 내의 선택자 요소에 접근 

 

💻 전체 요소 ( * )에 대한 css 속성을 변경

$("*").css("color", "red");

💻 id 선택자(#)에 대한 css 속성을 변경

$("#idSelector").css("color", "blue");

💻 class 선택자 ( . ) 에 대한 css 속성을 변경 

$(".classSelector").css("color", "orange");

💻 태그 선택자 활용 

별도의 선택자를 따로 지정하지 않고, 태그 자체의 이름(=태그명)으로 접근 

- table 태그의 테두리 변경, 배경색 변경 

1) table 태그를 지정하여 css 속성 중 테두리("border") 를 "1px solid blue"로 변경 

$("table").css("border", "1px solid blue");

2) table 태그의 배경색("background")을 "yellow"로 변경 

$("table").css("background", "yellow");

💻 동일한 대상에 복수개의 작업을 수행하는 경우 

=> 각각의 메서드를 연결하여 연쇄적으로 호출이 가능하다. 

$("table").css("border", "1px solid blue").css("backgroundColor", "pink");

=> background 또는 background-color 모두 배경색을 변경하는 css 속성명이다. 

이때 이름에 - 기호가 포함된 속성명은 - 기호를 제거하고, - 기호 뒤의 단어 첫 글자를 대문자로 표기한다 

 

💻 동일한 대상에 동일한 메서드를 적용할 경우 

=> 하나의 메서드명을 기술하고 소괄호 내에 중괄호 블럭을 지정하여

복수개의 속성을 한꺼번에 변경 가능(실제 css와 유사) 

$("table").css({
    border : "1px solid blue",
    background : "lightgray"
});

💻 태그들 중 특정 속성값을 갖는 태그 지정 

$("input[type=text]").css("background", "yellow");

 

2. 인접 관계 선택자 

- 자식 선택자(>) : 특정 선택자의 바로 하위 요소(자식) 선택 => $("부모선택자 > 자식선택자") 

- 자식 또는 후손 선택자(공백) : 특정 선택자 하위에 일치하는 모든 요소 선택 => $("선택자명:옵션명")

ex) 첫번째 요소 : "선택자명:first", 마지막 요소 : "선택자명:last"

홀수번째 요소 : "선택자명:odd", "짝수번째 요소" : "선택자명:even" 등

 

$(document).ready(function() {
    $("table tr:first").css("background", "green");
    // table 태그의 하위 요소들 중 첫번째 tr 태그만 변경 
    $("tr:odd").css("background", "pink");
    
    $("tr:even").css("background", "yellow");
    
    let id = $("#inputBox > input[type=text]").val();
    
    let passwd = $("#inputBox > input[type=password]").val();
    
    $("#inputBox textarea[readonly]").css("background", "lightgray");
    
    $("#divBox > div").css("color", "green");
    
    let selectedItem = $("#selectBox > option:selected").val();
    
    $("#selectResult").val(selectedItem);
});

---

🔍 css() 메서드 

- 파라미터로 속성명 지정 시 해당 css 속성 값 리턴 

=> 이때, 대상이 복수개일 경우 첫번째 요소의 값만 리턴된다. 

- 속성명과 속성값을 함께 지정 시 해당 css 속성 값 변경 

=> 이때, 대상이 복수개일 경우 복수개의 모든 요소에 변경 작업이 적용된다. 

- 메서드 파라미터에 익명함수 활용할 경우 대상 요소를 차례대로 접근하는 반복문 형태로 사용 가능하다. 

 

 

 

---

🔍 특정 요소에 대한 조작 이벤트 

1. html() 

- html 문서 내에서 지정된 범위(선택자)안의 모든 요소를 가져오거나 추가하는 함수 

- 요소를 가져올 때 주석까지 포함해서 가져옴

- 단, kml 문서를 대상으로는 사용 불다 

 

2. text() 

- html() 함수와 달리 html 문서 및 kml 문서 모두 사용 가능

- 모든 문자열을 가져오거나 추가 가능 

- 단, 브라우저마다 줄바꿈이나 공백 등이 달라질 수 있다. 

 

3. empty() 

- 지정된 선택자 내의 하위 요소 제거(비움) 

 

4. remove() 

- 지정된 선택자와 선택자 내의 하위 요소를 모두 제거 한다 

 

 

---

🔍 특정 요소에 대한 조작 이벤트 

1. append() 

- 지정한 내용을 선택자 내부의 '마지막'에 추가 

- appendTo()  함수와 문장 구조의 차이를 제외하면 기능은 동일하다. 

$("선택자").append("추가할내용"); 

$("추가할내용").appendTo("선택자");

2. prepend() 

- 지정한 내용을 선택자 내부의 '처음'에 추가 

- prependTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일하다. 

$("선택자").prepend("추가할내용");
$("추가할내용").prependTo("선택자");

3. after() 

- 지정한 내용을 선택자 요소 '뒤'에 삽입 

- insertAfter() 함수와 문장 구조의 차이를 제외하면 기능은 동일하다 

$("선택자").after("삽입할내용"); 
$("삽입할내용").insertAfter("선택자");

4. before()

- 지정한 내용을 선택자 요소 '앞'에 삽입

- insertBefore() 함수와 문자 구조의 차이를 제외하면 기능을 동일하다 

$("선택자").before("삽입할내용"); 
$("삽입할내용").insertBefore("선택자");

 

 

---

🔍 eq(인덱스) 

- 선택자를 포함하여 형제자매 요소 탐색 

- 인덱스는 0부터 시작하며, 인덱스에 해당하는 순서에 위치한 요소를 가져온다

- 음수는 뒤에서부터 탐색 

 

🔍 attr("html속성명") 

- 선택자에서 해당 속성의 값을 가져오거나 추가 

- html 태그 속성 값 자체를 가져오며 상태에 따라 변하지 않음 

ex) 체크박스 checked="checked" 속성 값을 가져올 때 체크상태가 변해도 checked임 

 

🔍 prop("Javascript속성명") 

- 선택자에서 해당 속성의 값에 대한 상태를 가져오거나 추가 

- 값 자체를 다루지 않고 해당 속성의 값에 대한 true/false 리턴 

- attr() 함수와 유사하나 html 태그의 상태에 따라 결과값이 변한다 

ex) 체크박스 checked="checked"의 속성값을 가져올 때 체크박스 체크 시 true 리턴, 해제 시 false 리턴 

 

🔍 is() 

- 선택자가 입력한 값과 관련된 상태 확인 후 일치 여부(true/false) 리턴 

- 선택자의 실행 결과나 태그 확인용

- prop() 함수 리턴값을 boolean 타입으로 비교하는 것과 동일하다.

 

 

---

🔍 form 객체의 submit() 메서드 

- form 태그를 사용한 요소의 submit 동작에 대한 이벤트 처리를 담당한다 

- 자바스크립트에서의 기본적인 처리 방법과 동일하다. (onsubmit을 통한 처리) 

 

 

---

🔍 이벤트 처리 

DOM 객체를 탐색 및 접근하여 대상에 대한 이벤트를 처리하는 방법 

- html 태그의 자바스크립트 이벤트와 동일(on"click", on"submit" 등) 

- 각각의 이벤트를 의미하는 메서드를 호출하거나 통합된 방식으로 on() 메서드를 통해 이벤트 지정이 가능하다. 

ex) 클릭 이벤트: click() 함수 또는 on("click") 함수 사용 

 

1. on("click")  메서드 이벤트 

- 특정 대상을 클릭했을 때 동작하는 이벤트 처리 (click() 함수와 동일) 

- 클릭 대상에 대한 제한이 없다(버튼이 아닌 요소도 적용 가능하다) 

 

2. on("focus") 메서드 또는 on("blur") 메서드 이벤트 

- 특정 대상에 포커스가 주어지거나 포커스 해제 시 동작하는 이벤트 처리 

- focus(), blur() 메서드로 대체 가능

- 클릭이 아닌 키보드 등을 통한 포커스 이동도 동일하게 취급된다. 

 

 

---

🔍 each() 메서드 

대상 요소에 대한 반복을 수행하는 함수 

- 지정 가능한 대상 : 태그, 배열 등의 객체 

=> 기본 문법 : $("선택자").each(function(index, item) {} );

index 파라미터 : 대상 요소의 인덱스, item 파라미터 : 대상 요소 객체

 

$(function() {
    $("h3").each(function(index, item) { // "h3" 태그를 차례대로 접근하는 반복문 
        let arr = [ // 배열 
            {no : "1번", name : "홍길동"},
            {no : "2번", name : "이순신"},
            {no : "3번", name : "강감찬"}
        ];
        $.each(arr, function(index, item) {
            $("table").eq(1).append("<tr><td>" + item.no + "</td><td>"+ item.name + "</td></tr>");
        });
    });
});

=> 배열을 활용하여 반복하는 경우. 배열처럼 지정할 선택자가 없을 경우 $.each() 형태로 메서드를 호출한 후 

파라미터로 반복할 객체(배열 등), 익명함수를 전달한다. 

배열 내의 요소가 각각의 객체이므로 객체명을 통해 객체 내의 값에 접근 가능하다. => 이때, 중괄호{}로 묶인 객체만큼 자동으로 반복된다. (배열 인덱스가 index 파라미터에, 배열 내의 각 객체가 item 파라미터에 전달된다. 

 

<h1>jQuery - test9.jsp</h1>
<h3>element-1</h3>
<h3>element-2</h3>
<h3>element-3</h3>
<div></div>
<table border="1" id="table1">
    <tr><th>번호</th></tr>
</table>
<table border="1">
    <tr>
        <th>번호</th>
        <th>항목</th>
    </tr>
</table>

=> 뷰페이지 코드 

 

💻

=> 각 요소들이 3번 반복된 걸 확인할 수 있다

 

---

🔍 on("change") 이벤트

- 특정 대상의 상태가 변하면 동작하는 이벤트

- 기본 문법 : on("change", function() {} ) 

 

🔍 on("keyup") 이벤트

키보드를 눌렀다 떼면 이벤트 동장