JQuery

Let's Just Go·2022년 7월 13일
jquery
0

Spring

목록 보기
19/26

JQuery

JQuery 정의

  • JQuery
    - JavaScript를 더 간편하게 사용하게 해주는 JavaScript 라이브러리
    - 링크 or 소스코드(https://jquery.com/download/)를 다운하여 사용 가능
    - 다운받아서 프로젝트에 넣어주면 끄읏~
    - Javascript처럼 함수를 사용해서 요소를 가져오는 것이 아니라 $(선택자)를 통해서 쉽게 가져올 수 있음
        - 장점
       - tag를 선택자로 한번에 선택하는 방법 제공
       - 선택자로 선택한 태그를 제어하는 기능 제공
    
    ```html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <script src="lib/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <input type="text" id="apple" value="사과">
        <input type="text" class="melon" value="멜론">
        <input type="hidden" value="망고">
    
        <script>
            const $a1 = document.getElementById('apple');
            // JavaScript
            console.log($a1);
    
            const $a2 = $('#apple');
            console.log($a2);
    
            console.log('-------------------------------');
    
            const b1 = document.querySelector('.melon').value;
            console.log(b1);
    
            const b2 = $('.melon').val();
            console.log(b2);
    
            console.log('-------------------------------');
            
            const c1 = document.querySelector('input[type=hidden]').value;
            console.log(c1);
    
            const c2 = $('input[type=hidden]').val();
            console.log(c2);
        </script>
    
        
    </body>
    </html>
    ```

선택자

  • 선택자

    • $(”#태그 아이디”), $(”.태그 클래스”), $(”요소[속성=값]”), $(this)

    • 속성 제어 함수

      • val() : 태그 값 확인
      • attr(속성, 변경값) : 태그 내부 속성 변경
      • submit() : 태그 submit
      • html() : 태그에 접근해서 내용을 얻음, html(값)을 하게 되면 값 변경
      • css(속성, 변경값) : css속성 변경

    • JQuery 이벤트 함수

      • $(document).ready(function() { });
        • 페이지 로딩 시 스크립트 실행
      • $(”선택자”).click(function() {}
        • 클릭 시 소괄호 안에 함수 실행
      • $(”선택자).on(”이벤트”, “선택자”, function(){}
        • 이벤트 위임(부모 태그에 이벤트를 등록하고 자식 태그에 이벤트를 넘겨서 사용)

    • attr()

      • JQuery를 사용하면 속성을 쉽게 가져올 수 있음
      • 매개 변수의 개수에 따라 속성을 추가 및 변경, 삭제 할 수 있음
      • $(선택자).attr(’속성명');
      • $(선택자).attr(’속성명', ‘변경할 값');
      • $(선택자).attr({ ‘속성명’ : ‘값' ~~~); 으로 추가할 수 있음

    • html()

      • 기존 JavaScript의 Innerhtml 기능을 쉽게 사용 가능
      • $(선택자).html(’값’)

    • css()

      • 요소의 Style을 css()함수를 통해 쉽게 사용 가능
      • $(선택자).css(’속성명', ‘값');

    • 클래스 추가 및 삭제

      • addClass를 통해 클래스를 추가 가능
      • $(선택자).addClass(’클래스명');
      • removeClass를 통해 클래스를 삭제 가능
      • $(선택자).removeClass(’클래스명');

    • Toggle

      • 존재한다면 삭제, 존재하지 않는다면 추가
      • $(선택자).toggleClass(’이름');

    • Code

      • Code

        <!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jQeury 라이브러리 추가  -->
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="text" id="test1" readonly>
    <div id="test2">테스트2</div>
    <div id="test3">테스트3</div>

    <img src="#" alt="test" class="test4">
    <button id="btn" class="btn btn-default">클래스 조작</button>

    <script>
        const a1 = document.getElementById('test1').getAttribute('id');
        // test1이라는 아이디의 요소에 id 속성을 가져와라 

        const a2 = $(test1).attr('id');
        // attr('속성이름') 함수는 요소의 속성 확인 

        console.log(a1);
        console.log(a2);

        console.log('------------------------------------');

        // 속성 변경 
        document.getElementById('test1').setAttribute('id', 'melon')
        // id 속성의 값을 melon으로 변경 

        $('#test1').attr('id', 'melon');
        // jQeury 속성 변경 및 추가 
        // attr('속성명', '변경할 값')

        $('.test4').attr({
            src: 'profile.png',

            width : 100, 
            height : 100,
            alt : 'hello'
        });
        // attr({ }) : 객체 리터럴 형태로 속성들을 추가 및 변경 가능

        console.log('------------------------------------');
        document.getElementById('test2').innerHTML='<a href="#>kkk</a>';
        $('#test2').html('안녕하세요');
        // jQuery를 통해 쉽게 innerHTML 기능 사용 가능 

        console.log('-------------------------------------');
        document.getElementById('test3').style.background='skyblue';
        $('#test3').css('background', 'blue');
        // jquery의 css 추가 및 변경

        console.log('-------------------------------------');
        // 클래스 추가

        document.getElementById('btn').classList.add('myBtn');
        $('.btn').addClass('myBtn2');
        // addClass()를 통해 jquery에서는 쉽게 클래스를 추가할 수 있음

        // 클래스 삭제 
        document.getElementById('btn').classList.remove('myBtn');
        $('.btn').removeClass('myBtn2');

        // 토글(존재한다면 삭제, 존재하지 않는다면 추가)
        $('.btn').toggleClass('btn');
        // btn class가 있다면 추가 없다면 삭제
    </script>

</body>

</html>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
이전 포스트

User Join

다음 포스트

User Login

0개의 댓글