jQuery에 대하여

jQuery란?

기존에 자바스크립트 언어만으로 구현하기에는 복잡했던 구문을 간소화 하기 위해 만들어진
javaScript기반의 라이브러리다(유용한 기능의 모음집이다.)
즉, javaScript 언어로 유용한 함수나 내용들을 다른 누군가가 이미 정의해놓은 것

복잡한 javaScript구문보다 짧고 쉽게 개발이 가능하다
(적은 양의 코드로 빠르고, 풍부한 기능을 제공)

 

 

장점
1. 돔요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다.
2. AJAX(비동기식 통신) 이벤트 처리등을 폭넓게 지원한다.
3. jQuery와 관련된 확장형 플러그인, 오픈AIP등을 지원(차트, 슬라이드, 캘린더...)

 

 

jquery 사용 준비

 

라이브러리 연결방법.

 

1. jQuery라이브러리 직접 다운로드 받은 후 경로지정(오프라인/다운로드)

2. CDN방식(온라인) : 파일을 다운로드 받아서 저장할 필요가 없다, 라이브러리를 제공하는 사이트 url제시해서 파일경로를 직접 저장

head에 삽입할 코드
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">

 

 

jquery사용법

>순수 자바스크립트에서는
document.onload,window.onload = fuction(){ 실행내용;
}
js에서의window, document => onload구문은해당 문서의
요소들이 전부 로드되고 외부 문서들도다 가지고 온 후 뒤에 실행된다.

jquery는 기본적으로 $를 많이쓴다.

    <script>
        $(document).ready(function(){
            console.log('document 로딩 완료');
        })

        $(function(){
            console.log('document 로딩 완료')

            //h3 요소들을 I선택해서 배경색 레드로 변경
            //const str = document.getElementsByTagNAme('h3'); [h3,h3,h3]
            const h3Arr  = document.querySelector('h3')
            // for( let el of h3Arr){ // 0, 1, 2
            //     el.style.background = "red";
            // };

            // jquery 방식
            $('h3').css("background", "red");

        });
    </script>

배열을 처리할 때도 for문으로 하나하나 돌려줘야했지만 jquery는 그냥 사용하면 된다.

 

    <h3>*jQuery에서 input</h3>
    텍스트상자 : <input type="text"> <br>
    일반버튼 : <input type="button"> <br>
    체크박스 : <input type="checkbox"> <br>
    첨부파일 : <input type="file"> <br>
    비밀번호 : <input type="password"> <br>
    라디오버튼 : <input type="radio"> <br>
    초기화버튼 : <input type="reset"> <br>
    제출버튼 : <input type="submit"> <br>

    <script>
        $(function(){
            $(":text").css("background","red");
            $(":button").css({width : "100px", height : "100px"}).val("왕버튼");

            //속성을 변경
            $(":checkbox").attr('checked', true);

            //첨부파일 input에 배경색을 녹색으로
            $(":file").css("background", "green");

            //비밀번호 input의 배경색을 노란색으로
            $(":password").css("background","yellow");

            //라디오버튼 check상태로, 가로50px 세로50px
            $(":radio").css({width : "50px", height : "50px",}).attr('checked', true)
            

            //제출버튼 클릭 alert("ㅋㅋㅋㅋ") 실행되도록
            $(':submit').click(function(){
                alert("ㅋㅋㅋ")
            });

            $(":submit").mouseenter(function(){
                $(this).val("선택");
            })

            $(":submit").mouseout(function(){
                $(this).val("제출");
            })

            $(":submit").hover(function(){
                $(this).val("선택");
            }, function(){
                $(this).val("제출");
            })

            const tmpList = {
                name : "jiwon",
                age: 47,
                gender: 'm'
            }
            const inputList = document.getElementsByTagName("input");

            $(inputList).each(function(i,n){
                console.log(i)
                console.log(n)
            })
            console.log($(inputList))


        })
    </script>

그냥 문법이 조금 바뀐 것이니 익숙해지면 된다.

 

jQuery에서의 이벤트

 

방법은 총 세 가지가 있다.

 

1. 이벤트 메소드 , 동적으로 만들어진 요소에 이벤트

<script>
	$("#wrap > h6").click(function(){
        $("#wrap").append("<h6>클릭시 생성된 h6</h6>");
    })
</script>

 

 

2. on 메소드

<script>
    $("#wrap > h6").on("click", function(){
        $("#wrap").append("<h6>클릭시 생성된 h6</h6>");
    })
</script>

 

 

3. $("부모요소").on(이벤트명, 자식요소, 실행할 함수)

<script>
    $("#wrap").on("click", "h6", function(){
        $("#wrap").append("<h6>클릭시 생성된 h6</h6>");
    })
</script>

 

---

번외. 이펙트 효과

동작 시 조금 더 이쁘게 만들어주는 이펙트 효과에 대해 알아보자

 

점점 커지면서 and 점점 작아지면서 숨기기, 토글

    <script>
        $("#show_btn").click(function(){ //보여주기
            $("#hedeAndShowImg").show(2000);
        })

        $("#hide_btn").click(function(){ //숨기기
            $("#hedeAndShowImg").hide(2000);
        })

        $("#toggle_btn").click(function(){ //토글
            $("#hedeAndShowImg").toggle(2000);
        })
    </script>

 

 

점점 투명해지는 이펙트

 <script>
        $("#fadein_btn").click(function(){//보여주기
            $("#fadeImg").fadeIn(1000);
        })
        
        $("#fadeout_btn").click(function(){//숨기기
            $("#fadeImg").fadeOut(1000);
        })
        
        $("#fadetoggle_btn").click(function(){//토글
            $("#fadeImg").fadeToggle(1000);
        })
    </script>

 

 

slideDown과 slideUp

우리가 Q&A 에서 많이 봤던 하나 누르면 목록이 밑으로 스르륵 나오는 느낌이다.

 <div class="qa_box">
        <div>Q. 반품은 언제되나요?</div>
        <p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
        
        <div>Q. 반품은 언제되나요?</div>
        <p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
        
        <div>Q. 반품은 언제되나요?</div>
        <p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
        
        <div>Q. 반품은 언제되나요?</div>
        <p>A. 택배사의 사정에 따라 2~3일 소요됩니다.</p>
        
        <div>Q. 판매자가 연락이 되지 않습니다.</div>
        <p>A. 문의량이 많아 지금은 연락이 어렵습니다.</p>
    </div>
    <script>
        $(".qa_box > div").click(function(){
            //this => 클릭이벤트가 발생한 요소
            //$(this).next() => 선택된 요소의 뒤에 있는 요소
            $(this).next()

            const $p = $(this).next();

            if($p.css("display")==="none"){
                $(".qa_box > p").slideUp();
                
                $p.slideDown();
            }else {
                $p.slideUp();
            }
        })

    </script>

 

 

끝!