15. JQuery

JQuery를 이용해서 복잡한 js코드를 간단하게 줄일 수 있다.

JQuery의 js 파일을 받아서 HTML에 추가하거나 CDN을 이용하여 추가해서 사용가능.

파일로 이용할 경우에는

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

이런식으로 경로를 지정해주면 되고

CDN을 이용할 경우에는

<script src="http://code.jquery.com/jquery-3.6.0.js"></script>

이런식으로 코드를 입력하면 된다.

 

JQuery의 진입점(body를 읽고 제이쿼리를 실행하라는 것)은 4가지.

1. JQuery(document).ready(function() {코드});

2. JQuery(function() {코드});

3. $(document).ready(function() {코드}); ==> 표준 진입점

4. $(function() {코드});

 

제이쿼리 동작 방법

$("선택자").동작함수("속성","값");

 

예시)

$(document).ready(function() {

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

}

 

선택자 사용 방법

1. 직접 선택자

- 전체 선택자: $("*") ==> 모든 요소(태그)를 선택함.

- id 선택자: $("#아이디이름") ==> id 속성에 지정된 이름을 가진 요소를 선택함.

- 클래스 선택자: $(".클래스이름") ==> class 속성에 지정된 이름을 가진 요소를 선택함.

- 태그 선택자: $("태그명") 

- 그룹 선택자: $("선택1, 선택2, .... 선택n) ==> 지정된 요소를 한꺼번에 선택함.

 

2. 인접 관계 선택자

- 부모 선택자: $("요소 선택").parent()

- 하위 요소 선택자: $("요소선택 하위요소") //$("ul li").css("color", "blue"); 느낌

- 자식 요소 선택자: $("요소선택 > 자식요소")

- 자식 요소들 선택자: $("요소선택").children()

- 이전 형제 선택자: $("요소선택").prev()

- 이전 형제 요소들 선택자: $("요소선택").prevAll()

- 다음 형제 선택자: $("요소선택").next()

- 다음 형제 요소들 선택자: $("요소선택").nextAll()

- 형제 요소들 선택자: $("요소선택").siblings() //자기자신 미포함.

 

3. 탐색 선택자

1) 위치 탐색 선택자

- 첫번재 요소 선택: $("요소선택:first) 또는 $("요소선택").first()

- 마지막 요소 선택: $("요소선택:last) 또는 $("요소선택").last()

- 짝수 번째 요소(홀수 인덱스) 선택자: $("요소선택:odd")

- 홀수 번째 요소(짝수 인덱스) 선택자: $("요소선택:even")

even이 red / odd가 lightgray 

- 특정 숫자 번째 요소만 선택: $("요소선택:nth-child(숫자)")

- 특정 배수의 요소만 선택: $("요소선택:nth-child(숫자n)")

    예)3의 배수의 요소 ==> $("li:nth-child(3n)") //나머지 개념도 적용가능. 3n+1, 3n+2 와 같은 방식

- 지정한 인덱스가 참조하는 요소만 선택: $("요소선택:eq(index)")

- 지정한 인덱스보다 작은 요소만 선택: $("요소선택:lt(index)")

- 지정한 인덱스보다 큰 요소만 선택: $("요소선택:gt(index)")

인덱스이기 때문에 (3)했을 때 내용4가 선택됨.

 

2) 속성 탐색 선택자

1. $("요소[속성]) : 특정 속성이 있는 요소 선택

2. $("요소[속성='값']"): 속성과 값이 일치하는 요소 선택

3. $("요소[속성^='값']"): 값 으로 시작하는 요소 선택

4. $("요소[속성$='값']"): 값 으로 끝나는 요소 선택

5. $("요소[속성*='값']"): 값을 포함하는 요소 선택

6. $("요소[속성='값'][속성='값']): and 조건으로 두 가지 속성, 값을 모두 충족하는 요소 선택

 

4. 요소 조작 메서드

*속성 조작 메서드

- $("요소").html(); : 선택한 요소에 포함되는 하위 요소를 불러오거나 새 요소로 바꿈.

- $("요소").text(); : 선택한 요소 내의 텍스트를 불러오거나 텍스트를 바꿈.

- $("요소").removeAttr("속성") : 지정한 속성을 제거함.

- $("요소").attr("속성") : 지정한 속성 값을 불러옴.

- $("요소").attr("속성", "값") : 속성을 새로 추가하거나 기존의 존재하는 속성의 값을 변경.

- $("요소").addClass("값"): 요소에 class 속성을 추가.

- $("요소").removeClass("값"): 요소의 지정된 class 속성을 삭제

- $("요소").val() : 지정된 요소의 value를 가져오거나 값을 변경함.

 

5. 콘텐츠 탐색 선택자

- $("요소:contains('텍스트')"): '텍스트'를 포함하는 요소만 선택.

- $("요소").contents(): 선택한 요소 중 가장 가까운 하위 요소를 선택.

- $("요소:has(요소명)"): 요소 중 요소명을 포함하는 요소만 선택

- $("요소:not(제외요소)"): 제외요소를 제외하고 선택

- $("요소선택1").closest("요소선택2"): 요소선택1을 감싸는 상위 중 가장 가까운 상위 요소를 선택

- $("요소선택").탐색선택자().end(): 필터링이 실행되기 이전의 요소 선택

  예)

$(".list1").find(".select1").addClass("bLine");

$(".list1").find(".select3").addClass("rLine");

라는 두줄의 코드를

$(".list1").find(".select1").addClass("bLine").end().find(".select3").addClass("rLine");

로 .end()를 이용해 한줄로 작성가능.

- $("요소").filter("필터요소"): 필터요소만 선택

- $("요소").find("찾을요소"): 찾을요소만 선택

 

6. 요소 편집 메서드

- $("요소").before("새 요소"): 선택요소 이전 위치에 새 요소를 추가

- $("요소").after("새 요소"): 선택요소 이후 위치에 새 요소를 추가

- $("요소").append("새 요소"): 선택요소의 마지막 위치에 새 요소를 추가.

- $("새 요소").appendTo("선택요소"): 선택요소의 마지막 위치에 새 요소를 추가.

- $("요소").prepend("새 요소"): 선택요소의 맨 앞 위치에 새 요소를 추가.

- $("새 요소").prependTo("선택요소"): 선택요소의 맨 앞 위치에 새 요소를 추가.

- $("새 요소").insertBefore("선택요소"): 선택요소의 이전 위치에 새 요소를 추가.

- $("새 요소").insertAfter("선택요소"): 선택요소의 다음 위치에 새 요소를 추가.

- $("선택요소").clone(): 선택한 요소를 복사.

- $("요소").empty(): 선택한 요소의 하위 내용을 삭제.

- $("요소").remove(): 선택한 요소를 삭제.

- $("요소").replaceWith("새 요소"): 선택된 요소만 새 요소로 교체

- $("새 요소").replaceAll("선택 요소"): 선책 요소 전체를 새 요소로 교체