jQuery 정리 (2)

<jQuery 선택자>

jQuery 선택자 : $("선택자") 의 형태로 선택자 작성 방법은 CSS를 따른다

ex) $("#id")

 

1) 태그 선택자

[JS] = document.getElementByTagName("태그명")

[jQuery] = $("태그명")

 

2) 클래스 선택자

[JS] = document.getElementByClassName("클래스명")

[jQuery] = $(".클래스명")

 

3) 아이디 선택자

[JS] = document.getElementBy("태그명")

[jQuery] = $("#아이디명")

 

%% JS와 다른 사용법  %%

// $(요소).on("이벤트", 이벤트 핸들러) : 지정된 요소에 이벤트 리스너를 추가
    // == JS 의 요소.addEventListener() 와 같은 동작
    // 단 요소 선택 방법에 차이가 있음.

 $("#input1").on("input", function(){
 	const input = $(this).val();
    //JS 는 this.value
    $(this).text("인풋");
    //JS는 this.innerText = "인풋";
    $(this).css("backgroundColor", "red");
    //JS는 this.style.background-color = "red";
    
    
 });

4) 자손, 후손 선택자

 $("선택자")

 

5) 입력 양식 필터 선택자

 $("input:타입명")  --> input 태그 전용 선택자 ( text, checkbox, file ) 

 $("input[type="타입명"]") --> 기본 속성 선택자

 

6) 순서에 따른 필터 선택자

odd / even : 홀수 짝수 

$("선택자 : odd")

 

first / last 첫, 마지막

$("선택자 : first")

 

<순환 탐색 메소드>

1. 조상 탐색 메소드

$("선택자").parent 

-선택된 요소의 바로 위 상위 요소(현재 요스를 감싸고 있는 요소)

$("선택자").parents([매개변수])

-모든 상위 요소 중 매개변수 반환 ( 없으면 전부)

$("선택자").parentUntil(매개변수)

-모든 상위요소 중 매개변수까지 (매개변수 필수)

 

2. 자손 탐색 메소드

$("선택자").child

-선택된 요소의 바로 위 상위 요소(현재 요스를 감싸고 있는 요소)

$("선택자").children([매개변수])

-모든 자손요소 중 매개변수 반환 ( 없으면 전부)

$("선택자").find(매개변수)

-모든 자손요소 중 매개변수  (매개변수 필수)

 

3. Sideways 탐색 메소드

$("선택자").siblings([매개변수])

-선택된 요소의 모든 형제(같은 레벨 위치)

$("선택자").next();

-선택된 요소의 다음 형제 요소 (1개)

$("선택자").nextAll();

-선택된 요소의 다음 모든 형제 요소를 반환

$("선택자").prev();

-선택된 요소의 이전 형제 요소 (1개) 를 반환

$("선택자").prevAll();

-선택된 요소의 이전 모든요소

$("선택자").prevUntil(매개변수)

-선택된 요소 이전 모든 요소 중 매매변수 요소 전까지

.is(매개변수) - 지정된 범위 내에 매개변수와 일치하는 요소가 있는지 확인

-있으면 true 없으면 false