코딩 공부/jQuery

[jQuery] 문법

희원96 2022. 5. 18. 17:51
jQuery란 무엇인가

-모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반 라이브러리

 

Library, Framework

-개발을 쉽게 할 수 있도록 도와주는 도구

 

Library(라이브러리)

-응용 프로그램 개발을 위해서 필요한 기능(함수)을 모아놓은 소프트웨어

-개발에 필요한 기능들을 가져다 사용하는 것

 

Framework(프레임워크)

-응용 프로그램이나 소프트웨어의 솔루션 개발을 수월하게 하기 위해 제공된 소프트웨어 환경

-제공된 틀 안으로 들어가 주어진 규칙을 지켜가며 사용하는 것

 

 

<!DOCTYPE html>
<html lang="en">
<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>
    <!--1. jQuery 파일을 다운로드 받아서 사용-->
    <!-- <script src="./js/jquery-3.6.0.min.js"></script> -->

    <!--2. CDN을 이용해서 사용-->
    <script src ="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>jQuery 적용 전!</p>
    <!-- <h1 id = "h1Tag">jQuery 적용 후!</h1> -->
    
    <script>
        // 만약에 문서를 사용할 준비가 되었다면!
        // 예)이미지가 많은 페이지 -> 오래걸림 ->
        // "문서 준비되면 그냥 바로 실행해줘!"


        // basic vs jQuery
        // do~getElement -> $('선택자')
        
        // - 동작 메소드
        // .innerText -> .text('대입할 텍스트')
        // .innerHTML -> .html('대입할 태그+텍스트')
        
        // - 스타일
        // .style.속성 ='값' -> .css('속성','값')


        // $(document).ready(function(){
        //     $('p').text('jQuery 적용 후!')
        // })

        //신문법
        $(()=>{
            $('p').html('<h1>jQuery 적용 후!</h1>')
            $('p').css('color','orange')
            $('p').css('font-family','궁서체')
        })
    </script>
</body>
</html>
실습
<!DOCTYPE html>
<html lang="en">
<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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>로그인 폼을 작성해봅시다</p>
    <button id="btnP">p태그 다루기</button>
    <div id="div1">
       <h1 class="h">로그인폼</h1>
       ID : <input type="text" name="id"><br>
       PW : <input type="text" name="pw">
    </div>
    <p class="h"></p>
    <button id="btnDiv">div태그 다루기</button>
    <button id="btnH">h태그 다루기</button>
    <button id="addAttr">id input 속성 추가</button>
    <button id="getId_Pw">input태그 다루기</button>
    <button id="removeAttr">속성지우기</button>
    <button id="removeP">p태그 지우기</button>

    <script>
         // 1. 'p태그 다루기'라는 버튼 클릭 시, p태그 안에 내용 'p태그 클릭!'으로 변경
         $('#btnP').click(function(){
             $('p').html('p태그 클릭!')
         })
         // 2. 'div태그 다루기'라는 버튼 클릭 시, id가 div1인 태그의 배경 색상을 pink 색으로 변경 
         $('#btnDiv').click(function(){
             $('#div1').css('background-color','pink')
         })
            // 3. 'h태그 다루기'라는 버튼 클릭 시, 버튼 안의 글자 '바꾸기!'로 변경 
         $('#btnH').click(function(){
             $('#btnH').html('바꾸기!')
         })

            


            
    </script>
</body>
</html>