기록하고 기억하는 블로그

<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

jQuery? 

기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화 하기 위해 고안된 JS 라이브러리

적은양의 코드로 많은 기능을 제공한다

(다만 라이브러리를 사용하므로 속도가 느려질 수 있다)

<연결방법>

1. 다운로드 받아 직접 연결

2. CDN 을 이용한 연결 (링크로)

head나 body 끝부분에 <script src=""></script>태그를 통해서 연결한다

<HTML의 해석 순서와 window.onload, ready() 함수의 차이점>HTML 문서는 위에서 아래로 순서대로 해석된다(아랫쪽에 작성된 미해석 코드는 위쪽에서 사용이 불가능하다) -> 이를 가능하게 해주는 바로실행 함수 : window.onload( JS) , ready() (jQuery)-> 차이점 : window.onload는 페이지 내에서 딱 한번만 작성 가능( 중복 시 마지막 내용이 적용됨)->            ready() 함수는 여러번 작성 가능

[ready() 함수의 작성방법]

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

2. $(document).ready(function(){ 코드; });

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