Basic

JQuery는 현재 사용 비율이 많이 줄어들긴 하지만 개인적인 생각으로 순수 JS로 구현을 못하지는 않지만 조금 힘든 부분에서 사용이 용이하다고 생각함.

JS에서 getElementById를 통해 속성 선택자에 접근하고 그 선택한 속성 요소에 접근할 때 querySelector를 사용해서 접근이 방식을 제이쿼리를 사용하면 쉽게 접근할 수 있음. 즉, 페이지 내부 요소에 접근하기 쉽다는 장점이 있다.

스프링 부트를 하면서 느낀 것이 js로 ajax 작성하는 것보다 JQuery를 사용하게 되면 조금 더 편하다고 생각.

간단히 몇 가지만 적어보겠다.

---

 <script>
        function myFunc(){
                //document.getElementById를 통해 접근했지만 $를 이용해서 바로 접근 가능
                //$ - 선택자 (selector) - HTML 요소를 선택하여 가져온다.
                //document.getElementById.style.backgroundColor="red";
                //디자인 바꾸기 css()메소드 이용
            $("#wrap").css("backgroundColor","red");

        }
    </script>

    function myFunc(){
           
            getElementsByClassName
            $(".wrap").css("backgroundColor","red").css("width","200px");
            //함수를 연속으로 부르는 것 - 체이닝 (chaining)
            
        }

   <script>
        //제이쿼리 - 라이브러리
        //사용 - cdnjs
        //자바스크립트 라이브러리 for 돔 제어
        //dom document 객체에 접근할 수 있게 함.
        //
        function myFunc(){
            $("#wrap").css("backgroundColor","red");
        }

   <script>
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById("title").style.color='red';
        });
        // document.getElementById("title").style.color='red';
        // 그냥 위에 처럼 적을시 dom 객체가 만들기 전에 
        // 즉, 밑에 html이 만들기 전에 위에서 만들어지기 때문에 불러오지를 못함
        // 따라서 DOMContentLoaded 사용해줘야됨.
        // TypeError: Cannot read properties of null (reading 'style')
        // 잡히지 않은 타입오류 : null의 속성을 읽을 수 없다. (style속성을 읽을때...)
        
    	//제이쿼리 이용시 ready를 사용하면 됨.
           $(document).ready(()=>{
            //document객체를 선택해서 ready메소드를 걸었다.
            //DOM 생성이 완료되면 ready 메소드 안에 있는 콜백함수가 실행된다.
            //function(){} - 익명함수 (자체가 그냥 호출), 일회용 - 즉시 실행함수
            $("#my-h1").css("backgroundColor","red");
        });
    </script>

---

그 외 기초적인 메서드

- 제이쿼리 요소 선택
parent()  : 부모 요소
prev() : 이전 요소
prevAll() : 선택한 요소의 이전에 위치한 형제 요소를 모두 선택
prevUntill : 선택한 요소의 형제 요소와 지정한 선택자에 해당하는 요소 사이의 모든 형제 요소.
next() : 다음 요소
nextAll() : 선택한 요소 다음에 위치한 모든 형제 요소
nextUntill() : 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택
siblings() : 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 제외하고 모두 선택
odd() : 일치하는 요소 집합을 0부터 번호가 매겨진 집합의 홀수 요소를 반환
even() : 일치하는 요소 집합을 0부터 번호가 매겨진 집합의 짝수 요소를 반환


-제이쿼리 요소 선택 설명
:nth-child처럼도 가져올 수 있음 ex) ul의 자식인 첫 번째 li를 가져올 때 $("#menu> li"). first로 표기가 가능하다.
마찬가지로 $("#menu> li"). last면 마지막 자식.

eq() :  equal-index 번호 일치 확인
lt() : 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴
gt() : 지정된 숫자보다 인덱스 번호가 큰 요소들을 리턴
slice(시작점, 끝점) : 시작점 이상, 끝점 미만 ex) slice(1,2) 1 이상 2 미만까지 요소들을 호출

attr() : 요소의 속성의 값을 가져오거나 속성을 추가
html() : html 안에 값들을 넣어줌.
text() : 글자를 넣어줌.
toggelClass() : 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있다.
hasClass() : 선택한 요소한테 클래스가 있는지 확인하고 불륜을 반환한다.
prev() : 이전 요소 선택
removeClass() : 선택한 요소에서 클래스 값을 제거할 수 있다.