본문 바로가기
JavaScript

jQuery에 대하여

by Dodledd 2024. 3. 21.

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>

 

 

끝!

'JavaScript' 카테고리의 다른 글

정규식 표현  (0) 2024.03.24
부트스트랩 사용법  (2) 2024.03.24
[4일차] window용 객체, 이벤트  (0) 2024.03.20
[3일차] JavaScript의 함수와 객체  (0) 2024.03.19
JavaScript의 변수에 함수 넣기, 자료구조  (0) 2024.03.18