22.03.08 JS jQuery 선택자.동작메소드()

최고고·2022년 3월 8일

JavaScript

$(선택자|요소).동작메소드()

.html = innerHTML 와 같은 기능

.text = innerText 와 같은 기능

$('#id').html() => script내에서는 getElementById('id').innerHTML
$()안에 선택자를 넣어 HTML요소를선택하여 jQuery객체로 반환
태그를 가지고 오려면 - get역할
let h1Tag = $('h1').html(); ->가져와준다
매개변수자리 비워둠
h1 태그에 접근하려면? - set 역할 요소 안의 내용을 변경을 하고 싶다면
$('h1').html('< h2>h2로 변경< /h2>')
매개변수 자리에 변경 내용을 작성해 주면 된다!

.css(스타일속성, 값)

선택한 요소의 스타일 속성을 접근하거나 설정하는 메소드
$('li').css('color','blue'); li요소의 color를 blue로 변경
=> document.getElementsByTagName('li').style.color = 'blue';

속성에 접근하고 추가-변경해주는 키워드 .attr

$('input[name=id]').attr('placeholder','ID작성')
name이 id인 input태그의 속성 placeholder를 id작성으로 변경

input태그의 value(값)을 가져올때 .val

let id = $('input[name=id]').val();
name이 id인 input태그의 value를 가져와 변수에 담아줌

속성삭제할때 .removeAttr

$('input[name=id]').removeAttr('placeholder')
placeholder속성 삭제

태그 삭제할때 .remove

$('p').remove();
p태그 삭제

기준이 되는 요소 | 선택자와 바꿀기준이 같다면 this키워드 사용

예제

<!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> -->
    <!-- CDN 이용해 사용할때 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>제이쿼리가 적용되지 않은 상태입니다.</p>
    <h1 id="h1Tag">jQuery 활용하기!</h1>

    <script>
        //만약 브라우저가 jQuery를 사용할 준비가 됐다면, 문구 변경
        // $(document).ready(  //문서가 준비됐다면 자스 시작
        //     function(){
        //         $('p').text('문서 준비 완료!')

        //     }
        // )

        $(function(){
            $('p').text('문서 준비 완료!')
            $('#h1Tag').html('<h2>h2태그</h2>')
            //js의 innerHTML과 같은 역할
            $('#h1Tag').css('color','salmon')
        })
    </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태그에서 h3바꾸기로 변경

       $(function(){
        $('#btnP').click(function(){
            //버튼 클릭시 사용되는로직
            $('p').html('<h3>h3로바꾸기</h3>')
        })
       })

       //2. div태그 다루기 버튼 클릭시 id가 div1인 태그의 배경 색상을 pink로 변경

       $('#btnDiv').click(function(){
           $('#div1').css('background','pink')
       })

       //3. h태그 다루기 버튼 클릭시 버튼안의 글자를 바꾸기 완료!로변경
       $('#btnH').click(function(){
           $(this).text('바꾸기완료!')
       })
       //기준과 바꿀기준이 같다면 this키워드

       //4. 'id input 속성추가 ' 버튼 클릭시, 속성  추가 
       //input태그의 placeholder를 id작성으로 변경
       //jQuery에서는 속성에 접근하고 추가해주는 키워드 .attr

       $('#addAttr').click(function(){
           $('input[name=id]').attr('placeholder','ID작성')
       })
       //5. inup태그 다루기 라는 버튼클릭시 사용자가 입력한 창을 alert창에 띄워주기
       //jQuery에서 값을 가져올때 .val
       $('#getId_Pw').click(function(){
           let id = $('input[name=id]').val();
           let pw = $('input[name=pw]').val();
           alert('아이디는 ' + id + '이고, 비밀번호는 ' + pw +'입니다!')
       })   
       //6. 4번에서 추가했던 placeholder라는 속성  삭제
       //jQuery에서 속성삭제할때 .removeAttr
       $('#removeAttr').click(function(){
           $('input[name=id]').removeAttr('placeholder')
       })
       //7.removeP(ID) 버튼 클릭시 p태그 삭제
       //jQuery에서 태그 삭제할때 .remove
       $('#removeP').click(function(){
           $('p').remove();
       })


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

동적인 작업 전 :

작업 후 :

스타일 다중 등록 - 중괄호 넣기{}

스타일 단일등록
$('h1').css('background-color','red')
jQuery 스타일을 다중 등록하는 법
.css({ 속성 : 값 } )
$('h1').css({
'background-color' : 'black',
'color' : 'white',
'font-size' : '50px'
})

다중 이벤트 처리 on 메소드()

이벤트란? 웹페이지 방문 사용자가 수행하는 동작 >> 실행시점 제어
특정사건이 발생한 시점에 실행할 명령을 설정하는 메소드

 $(function(){
       $('h1').on({
           click : function(){
               $(this).css({
                   'background-color' : 'blue',
                   'color' : 'green'
               })
           },
           mouseenter : function(){
               $(this).css({
                   'background-color' : 'whitesmoke',
                   'color' : 'black'
               })
           }
       })
   })

<!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>
    <h1> 마우스를 올리셨군요🐭🐹😺 </h1>
    <script>
        //스타일 단일등록
        $('h1').css('background-color','red')

        //jQuery 스타일을 다중 등록하는 법
        $('h1').css({
            'background-color' : 'black',
            'color' : 'white',
            'font-size' : '50px'
        })
        //jQuery 다중 이벤트 처리 on 메소드()

        $(function(){
            $('h1').on({
                click : function(){
                    $(this).css({
                        'background-color' : 'blue',
                        'color' : 'green'
                    })
                },
                mouseenter : function(){
                    $(this).css({
                        'background-color' : 'whitesmoke',
                        'color' : 'black'
                    })

                }
            })
        })

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

실행 전 :

실행 후 :

DOM이 생성되지 않은 상태에서 실행되면 처리되지않음
$(document)

<!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>
    <button id='like'>좋아요</button><span>0</span>
    <br>
    <input type="text"><button class='writeCom'>댓글작성</button>
    <br>
    <div id="com">
        <!-- 댓글이 들어가는 공간 -->
    </div>

  <script>
      //문서가 준비되면 document
      //1. id가 like인 좋아요 버튼을 눌렀을때 숫자가 증가, 텍스트를 변경
      $(document).on('click', '#like', function(){
          let like = Number($('span').text())
          $('span').text(like+1)
          $('#like').text('좋아요 취소')
          //id속성 삭제
          $(this).removeAttr('id')
          //id속성 다시부여
          $(this).attr('id','dislike')
      })
      // 로직실행된 후 내용: 좋아요 -> 좋아요 취소, id는 like에서 dislike
      //문서를 새로고침해서 동적인 메소드를 써야됨---어떤속성값이 변화했을 때를 대비해서 새로고침해서 속성가져옴

      //2.id가 dislike인 '좋아요취소'버튼을 눌렀을때 숫자는 다시 0으로 텍스트도 다시 '좋아요', id=like로
      $(document).on('click', '#dislike', function(){
          $('span').text('0')
          $(this).text('좋아요')
          $(this).removeAttr('id')
          $(this).attr('id','like')
      })
      // 3. Class가 removeCom인 버튼을 클릭했을 때, input 안에 있는 값을 가지고 온다!
      // 그 내용 + 삭제 버튼 (Class name 부여) 을 div 안에 넣어준다 
      // val값 초기화 
      $(document).on('click', '.writeCom', function(){
          //그 내용 + 삭제버튼 (classname부여)을 div안에 넣어줌
          let comment = $('input').val()
          let div = $('#com')
          div = $('#com').html(comment + '<button class="remove">삭제</button>')
      })
  </script>
</body>
</html>