34일차 복습

jQuery

자바 스크립트 문법을 간결하게 하며 많은 기능을 제공하기에 사용하는 기능이다. 과거에는 혁신적인 기술로 각광받으며 많은 사랑을 받았으나, 지금에 와서는 DOM에 직접 접근하는 개발 방식에 대한 기피, 다른 언어들의 발전, 자바스크립트의 지속된 업데이트로 입지가 좁아졌다.

하지면 여전히 많은 곳에서 사용되고 있고, 기존에 만들어진 사이트들 역시 jQuery를 사용해 만들어졌기 때문에 최소한 읽을수는 있어야 한다.

 

사용법

1. 파일을 직접 배포함(직접 다운 받아서 불러옴)

https://jquery.com/

jQuery

  <script src="jquery-3.6.0.js"></script>
  <script src="jquery-3.6.0.min.js"></script>

2. 온라인 배포(파일이 배포된 서버 링크를 적는다.)

  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

순수한 jQuery는 용량이 너무 커서 중요 기능만 간추린 min버전이 존재한다.

 

$기호를 사용한다.

 

window.onload함수를 대체하는 ready함수

DOM이 모두 읽어진 이후 자바스크립트가 실행되기 위해서는 window.onlad 함수로 자바스크립트 코드를 감싸줘야만 했다. jQuery에도 이와 같은 일을 해주는 함수가 존재한다.

    $(document).ready( () => {  // function으로 표현해도 됨
        let h1Array = document.getElementsByTagName('h1');
        h1Array[0].innerHTML += " ready함수 호출됨.<br>";
      } );

$(document).ready( 함수{ 실행문 } ) 과 같이 적을수 있다.

 

jQuery를 이용한 객체 선택

jQuery는 기본적으로 $( functoin(){ 실행문 }); 과 같은 형식으로 사용한다.

jQuery는 아주 직관적으로 문서 객체를 선택할 수 있다. jQuery를 사용한다는 의미에서 $를 앞에 쓰고, 괄호 안에 아이디, 클래스, 태그를 적으면 된다. css에서 태글 선택하는 방식과 똑같이, 문자열로 표현하면 된다.

$(function(){
  $('#id');  // id로 선택
  $('.class');  // class로 선택
  $('h1') // 태그 선택
});

자바스크립트 마찬가지로 id를 제외하곤 모두 배열 형식으로 받는다.

속성을 변경하고자 하면 .css로 접근한 다음, (속성이름, 속성값) 의 형식으로 지정할수 있다.

$( function(){
   $('h1').css('color','pink'); // h1태그 글자색 변경
});

또한 배열의 특정 요소값을 선택하기 위한 :eq() 예약어가 존재한다.

$( function(){
   let a = $('input[type=text]:eq(3)'); // 4번째 input[type="text"]태그 문서 객체 선택
   a.val();   // value값 선택
});

배열이 그러하듯 0부터 시작한다.

참고로 jQuery에서 value값은 .val()로 얻어온다.

 

jQuery의 순환

jQuery에는 .each함수가 존재한다. 

$( 순환하고 싶은 객체 ).each( function(a, b) ){ 실행문 }); 과 같은 형식으로 표현할 수 있다.

  $( function() {
       $('h1').each( function(index, item) {
        console.log( "index:"+index );
        console.log( "item:"+item.innerHTML );
      } );
    });

이때 a, 는 인덱스값, b는 객체 배열 요소가 된다. 굳이 둘 다 필요 없다면 인덱스 값만 받아와도 된다.

 

상태 확인함수 is()

상태 확인 함수 .is() 를 사용할 수 있다.

  $( function() {
      var isCheckedRadio = $('input[type=radio]').is(':checked');
      console.log( isCheckedRadio );
      });

만약 체크되어 있다면 true, 아니라면 false값을 반환할 것이다.

 

속성변경 함수 .attr( a, b );

변경하고자 하는 속성이름을 a로, 변경값을 b로 받는다.

  $( function() {
      $('input[type=checkbox]').attr('checked', true);
    });

예시에서는 'checked' 속성값을 변경했지만, img 태그의 src속성을 변경해 이미지 파일을 변경할 수도 있다.

 

클래스 이름 추가/ 삭제

.addClass() : 배열 전부에 부여

.removeClass() : 배열 전부에서 삭제

.classList.add() : 한가지 요소에 부여

.classList.remove() : 한가지 요소에서 삭제

    $( function (){
    
      $('h1').addClass('class1'); // 모든 h1태그에 class1부여
      $('h1').removeClass('class1'); // 모든 h1태그에서 class1삭제
      
      $('h1').each( function( index, object ){ // 배열을 통해 추가
        $(object).addClass('class'+ (index+1) );
      } );
      
      $('h1:eq(1)').css('color', 'yellow'); // h1의 2번째 요소 선택
      $('h1:nth-child(3)').attr('id', 'id1'); // nth:child()를 통한 선택
      $('h1:nth-child(3)').attr('id', '');   // attr함수를 통해 다양한 속성을 변경했다.
      $('h1:nth-child(4)').attr('name', 'pw');
      $('h1:nth-child(5)').attr('type', 'text');
      $('h1:nth-child(5)').attr('src', 'image1.png');
    });

 

add()함수

선택한 객체에 다른 객체를 추가로 선택하게 만든다.

한번에 다양한 객체를 선택해 속성을 변경, 추가, 삭제할수 있게 만드는 아주 편리한 함수다.

    $( function(){
      $('h1').eq(0).css('color', 'brown');
      $('h2').css('color', 'brown');
      $('p').css('background-color','brown');
      
      // 똑같은 표현을 add()함수를 이용하면 훨신 간결해진다.
      // h1:first + h2
      $('h1').first().add('h2').add('p').css('color', 'brown');
    });

.first()를 통해 첫번째 요소, .last()를 통해 마지막 요소를 선택할수도 있다.

 

innerText와 innerHTML 선택

jQuery의 강점이 간소화인만큼, 아주 간단하게 선택 가능하다.

innerText => text()

innerHTML => html()

괄호 안에 변경하길 원하는 문자를 쓰면 변경된다.

   $( function(){
      $('h1').text('Text값 변경됨');
      $('h2').html('HTML값 변경됨');
    } );

 

이벤트 대응 함수

jQuery에서 이벤트 대응은 on() 함수로 처리한다. $(객체).on(이벤트, 함수 ); 형식으로 선언 가능하다.

  $( function(){
      $('h1').on('mouseover', function(){
        $('h1').html('over').css('color', 'red'); // 마우스가 h1위에 올라가면 글자 색과
      });                                         // 글씨가 바뀐다.
   });

이벤트의 종류는 다음과 같다.

 

이벤트	설명
click	노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생
dblclick	노드를 더블 클릭 했을 때에 발생
hover	mouseenter와 mouseleave 이벤트를 한번에 bind한다.
mousedown	노드 영역에서 마우스를 눌렀다가 떼었을 때에 발생
mouseenter	노드에 마우스가 진입했을 때에 발생(자식노드에서는 이벤트를 감지 못함)
mouseleave	마우스가 노드에서 벗어났을 때에 발생
mousemove	노드 영역에서 마우스를 움직였을 때에 발생
mouseout	노드에서 마우스 포인터가 떠났을 때에 발생
mouseover	노드 영역에서 마우스를 올려놓았을 때 발생 (내부노드까지 이벤트를 감지)
mouseup	마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생
toggle	click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행