Surfin' Milkyway

웹앱 과정 - 제이쿼리 (2)

20 Apr 2020 | jQuery

제이쿼리 메소드

제이쿼리 스타일 관련 메소드

CSS3 메소드

  • 제이쿼리는 CSS3 스타일 속성을 제어할 수 있다. 즉, HTML5 문서의 스타일을 동적으로 변경할 수 있다.
  • $().css(CSS속성명) : 선택된 엘리먼트에 적용된 CSS 스타일 속성값을 반환
  • $().css(CSS속성명, CSS속성값) : 선택된 엘리먼트에 CSS 스타일을 적용
  • $().css(CSS속성집합) : 속성값을 한꺼번에 설정(맵 형식)
  • $().addClass(CSS클래스명) : 선택된 엘리먼트에 class 속성값을 설정(CSS 클래스명으로 선언된 스타일을 적용)
  • $().removeClass(CSS클래스명) : 선택된 엘리먼트의 class 속성값을 제거 (적용된 CSS 클래스 스타일을 제거)
  • $().toggleClass(CSS클래스명) : 선택된 엘리먼트에 class 속성값이 존재하면 제거, 없으면 추가(CSS 클래스 스타일을 적용/해제 전환)
  • $().hasClass(CSS클래스명) : 선택된 엘리먼트에 class 속성값 존재 유무를 반환(CSS 클래스 스타일 적용 유무를 반환)
  • $().width() : 선택된 엘리먼트의 너비 값을 반환
  • $().width(너비값) : 선택된 엘리먼트의 너비 값을 설정
  • $().height() : 선택된 엘리먼트의 높이 값을 반환
  • $().height(높이값) : 선택된 엘리먼트의 높이 값을 설정
// DOM CSS 메소드 적용
$('span').css('padding', 20px);
$('p:odd').css({'background-color':'purple', 'color':'white'});
$('#span2').css('background-color', $('p:eq(1)').css('background-color'));
$('p').css('border-color', 'green')
    .not(':eq(1)')
    .css('border-width', 'thick');

맵 방식, 메소드 체인 방식

  • 맵 방식 : 속성과 값의 쌍을 :로 구분하여 여러 개를 나열
  • 메소드 체인 방식 : 메소드 호출 뒤에 마침표를 찍고 또 다른 메소드 호출 -> 한 line 안에서 체인처럼 연속적으로 메소드 호출 이때, 메소드들은 실행 후 다음 메소드를 수행할 수 있도록 입력받은 엘리먼트 그룹을 다시 반환 
    // 맵 방식과 메소드 체인 방식
$('div:eq(2)').css('border-width', 'thick');
$('div:eq(2)').find('.class2').css('border-width', 'thick');
$('div:eq(2)').find('.class2').text('노드 변경').css('border-width', 'thick');
$('div:eq(2)').find('.class2').text('노드 변경').append('<h5>노드추가</h5>').css('border-width', 'thick');

스타일 클래스 메소드

.class2 { border-width: thick; }
.u_bgpurple { background-color: purple; color: white; }
.u_dotted { border-style: dotted; }

// 스타일 클래스 메소드
$('span:first').addClass('u_bgpurple');
$('p:eq(1)').removeClass('class2').addClass('u_bgpurple');
$('span').toggleClass('u_bgpurple');
  • addClass() 메소드의 입력인자에 addClass('class1 class2') 처럼 클래스명을 띄어쓰기하여 여러 개 명세할 수 있다.
  • removeClass() 도 동일.

DOM 트리 관련 메소드

DOM 탐색 메소드

  • 여러 DOM 탐색 메소드를 통해 엘리먼트에 접근 가능
  • 탐색(traversing) 메소드 : DOM 트리의 선택된 위치를 기준으로 원하는 노드(주로 엘리먼트)를 찾도록 함
  • 이전 또는 다음 엘리먼트를 접근하는 경우처럼 선택자 대신 현재의 참조 엘리먼트를 기준으로 탐색 메소드를 사용하는 것이 효과적인 경우도 있다.
  • $().find() : 선택된 엘리먼트 중 [조건을 충족하는] 모든 자손 엘리먼트를 반환
  • $().children() : 선택된 엘리먼트 중 [조건을 충족하는] 모든 자식 엘리먼트들을 반환
  • $().parent() : 선택된 엘리먼트의 부모 엘리먼트 반환
  • $().parents() : 선택된 엘리먼트의 [조건을 충족하는] 모든 조상 엘리먼트들을 반환
  • $().siblings() : 선택된 엘리먼트 중 자신을 제외한 [조건을 충족하는] 모든 형제 엘리먼트들을 반환
  • $().prev() : 선택된 엘리먼트 중 바로 앞에 위치한 [조건을 충족하는] 형제 엘리먼트를 반환
  • $().prevAll() : 선택된 엘리먼트 중 앞에 위치한 모든 [조건을 충족하는] 모든 형제 엘리먼트들을 반환
  • $().next() : 선택된 엘리먼트 중 바로 다음에 위치한 [조건을 충족하는] 형제 엘리먼트를 반환
  • $().nextAll() : 선택된 엘리먼트 중 다음에 위치한 [조건을 충족하는] 모든 형제 엘리먼트들을 반환
// DOM 탐색 메소드
$('span:eq(2)').prev().css('border-style', 'hidden');
$('span').parents().css('border', 'dashed thick red');
$('#p2').nextAll().css('border', 'solid thick green');
$('#div2').find('p').css({'background-color':'purple', 'color':'white'});

DOM 필터링 메소드

  • $().filter() : 선택된 엘리먼트들 중 필터링 조건을 충족하는 엘리먼트를 반환
  • $().slice(start[, end]) : 선택된 엘리먼트들 중 start부터 end 이전까지의 엘리먼트를 반환
  • $().first() : 선택된 엘리먼트들 중 첫 번째 엘리먼트를 반환
  • $().last() : 선택된 엘리먼트들 중 마지막 엘리먼트를 반환
  • $().eq(n) : 선택된 엘리먼트들 중 n번째 엘리먼트를 반환
  • $().has() : 선택된 엘리먼트들 중 특정 자손 엘리먼트를 갖는 엘리먼트를 반환
  • $().is() : 선택된 엘리먼트들 중 특정 조건을 만족하는 엘리먼트가 있으면 true 반환
  • $().not() : 선택된 엘리먼트들 중 특정 조건을 만족하지 않는 엘리먼트를 반환
// DOM 트리 필터링 메소드
$('div').first().css('border-style', 'hidden');
$('span').not('#span2').css('border', 'dashed thick red');
$('p').css('border', 'dotted thick silver').filter('#div0 p:last').css('border', 'solid thick green');
$('p').slice(1,3).css({'backgrouund-color':'purple', 'color':'white'});

DOM 트리 엘리먼트 조작 메소드

  • 정적인 HTML5 문서에 동적인 특성 제공
  • DOM 트리에 새로운 노드를 추가하거나 변경 또는 제거를 자유롭게 가능
  • $().append() : 선택된 엘리먼트의 마지막 자식 엘리먼트로 추가
  • $().prepend() : 선택된 엘리먼트의 첫 번째 자식 엘리먼트로 추가
  • $(code).appendTo() : code를 선택된 엘리먼트의 마지막 자식 엘리먼트로 추가
  • $(code).prependTo() : code를 선택된 엘리먼트의 첫 번째 자식 엘리먼트로 추가
  • $().alter() : 선택된 엘리먼트의 뒤에 형제 엘리먼트로 추가
  • $().before() : 선택된 엘리먼트의 앞에 형제 엘리먼트로 추가
  • $().empty() : 선택된 엘리먼트의 내용을 비움(자식 엘리먼트만 제거
  • $().remove() : 선택된 엘리먼트를 제거(엘리먼트 자신도 포함하여 제거)
  • $().replaceWith() : 선택된 엘리먼트를 특정 엘리먼트로 바꿈
  • $().clone() : 선택된 엘리먼트를 복사
  • $().wrap() : 선택된 엘리먼트를 특정 엘리먼트로 둘러쌈(부모 엘리먼트로 삽임
  • $().unwrap() : 선택된 엘리먼트의 부모 엘리먼트를 제거
// DOM 엘리먼트 메소드 적용
$('#div2').append($('<p id="p5">p5항복</p>'));
$('#span3').before($('<span>블록5</span>')).empty();
$('#p1').remove();
$('#p2').replaceWith($('#p4'));

기타 메소드

프로그래밍 관련 메소드

  • 사용자와의 상호 작용을 위한 DOM 트리와의 정보 교환에 관련된 제이쿼리 메소드들
  • $().html() : 선택된 엘리먼트의 내용을 HTML5 형식의 문자열로 반환( 마크업 포함 )
  • $().html(HTML5문자열) : 선택된 엘리먼트 밑에 HTML5 문자열을 엘리먼트로 변환하여 추가
  • $().text() : 선택된 엘리먼트의 텍스트 내용을 텍스트 형식의 문자열로 변환
  • $().text(문자열) : 선택된 엘리먼트 밑에 텍스트 내용으로 문자열을 추가
  • $().size() : 선택된 엘리먼트의 개수를 반환 $().length와 기능 동일
  • $().get(n) : 선택된 엘리먼트 중 n번째 엘리먼트 개체를 반환
  • $().index() : 선택된 엘리먼트 중 첫 번째 형제 엘리먼트와의 상대적인 첨자를 반환
  • $().each(콜백함수) : 선택된 엘리먼트들을 차례로 순환하면서 콜백 함수를 반복 호출
// 프로그래밍 메소드 적용
$('p:eq(5)').text('33333');
$('span:eq(3)').text($('p:last').text());
$('p:first').html($('div:eq(1)').html());

DOM 트리 속성 조작 메소드

  • 엘리먼트의 시작 태그 안에 포함된 속성 이름과 속성값은 DOM 트리에서 엘리먼트 노드의 하위 노드가 된다.
  • 속성에 대해서도 메소드를 통해 DOM 트리에 추가하거나 제거 가능
  • $().attr(속성명) : 선택된 엘리먼트들 중 첫 번째 엘리먼트의 특정 속성값을 반환
  • $().attr(속성명, 속성값) : 선택된 모든 엘리먼트에 속성값을 설정
  • $().attr({속성집합}) : 여러 속성값을 한꺼번에 설정(맵형식)
  • $().attr(속셩명, 함수()) : 함수 반환 값을 속성값으로 설정
  • $().removeAttr(속성명) : 선택된 모든 엘리먼트의 특정 속성을 제거
  • $().val() : 선택된 첫 번째 엘리먼트(폼 관련이어야 함)의 value 속성값을 반환, 웹 폼 엘리먼트에서 가장 많이 사용되는 메소드
  • $().val(속성값) : 선택된 모든 엘리먼트(폼 관련이어야 함)의 value 속성값을 설정
// DOM 속성 메소드 적용
alert('학번 disabled 속성값 : ' + $('#s_id').attr('disabled'));
$('#s_name').attr('disabled', 'flase');
$('input[name="s_tel"]').removeAttr('placeholder');
$('input:radio').attr('checked', false);
var age = $('input[type="number"]').val();
age = eval(age) + 15;
$('input[type="number"]').val(age);

제이쿼리 이벤트

  • 웹 페이지와 사용자 사이의 동적인 상호작용 지원

제이쿼리 이벤드

  • 이벤트 : 이벤트 핸들러에 해당하는 제이쿼리 함수를 호출
  • 이벤트 핸들러(event handler)
    • 리스너(listener)
    • 기다리던 이벤트가 발생하면 이를 감지해 적절한 처리를 하도록 함
    • 주로 이벤트와 제이쿼리 이벤트를 연결시킴

이벤트 핸들러 연결 및 해제

  • 이벤트 메소드 직접 연결
    • 표준 이벤트 유형을 단축형 메소드로 지겆ㅂ 사용
    • 재이쿼리 선택자에 의해 지정된 객체에 이벤트 유형으로 명세한 사건이 발생하면 함수가 호출되어 실행됨
      $('선택자').이벤트유형('함수명');
  • on() 메소드 간접 연결
    • 이전의 bind() 메소드를 대체
    • 이벤트 유형별로 이벤트 핸들러 함수를 연결
    • 하나 또는 여러 개의 이벤트가 발생할 때 함수가 호출되어 실행되도록 함
      $('선택자').on('이벤트유형'|'이벤트유형리스트', 함수명);
  • off() 메소드 연결 해제
    • 이전의 unbind() 메소드를 대체
    • 이벤트 연결 해제
      $('선택자').off('이벤트유형'); // 선택자 객체에 연결된 특정 이벤트를 해제
  $('선택자').off(); // 선택자 객체에 연결된 모든 이벤트를 해제

이벤트 메소드

이벤트 연결/해제 메소드

  • $().on() : 특정 엘리먼트(제이쿼리 객체)에 이벤트 핸들러를 연결
  • $().off() : on()으로 연결된 이벤트 핸들러를 해제
  • $().one() : 특정 엘리먼트(제이쿼리 객체)에 이벤트 핸들러를 단 한번 연결 후 해제 (일회용)
  • $().trigger() : 특정 엘리먼트(제이쿼리 객체)에 직접 이벤트를 발생시켜 이벤트 핸들러 함수를 실행

이벤트 단축형 메소드

  • 표준 이벤트 유형은 on() 메소드 없이도 단축형 메소드로 사용 가능
  • 이벤트 유형 이름을 메소드 이름으로 사용
  • 마우스 이벤트
    • $().click() : 엘리먼트 표시 영역을 마우스로 클릭할 때 동작
    • $().hover() : 엘리먼트 표시 영역 안으로 마우스 포인터가 들어올 때 (또는 나갈 때) 동작
  • 폼
    • $().focus() : 폼 엘리먼트 표시 영역이 포커스를 얻을 때 동작
    • $().blur() : 폼 엘리먼트 표시 영역이 포커스를 얻을 때 동작
    • $().change() : 폼 엘리먼트 표시 영역의 값이 변경될 때 동작
    • $().select() : 폼 엘리먼트 표시 영역의 텍스트 일부를 선택할 때 동작
  • 키보드
    • $().keydown() : 키보드를 눌렀을 때 동작
  • 문서
    • $().ready() : 브라우저에 문서가 읽혀질 때 동작
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        body * { margin: 5px; padding: 5px; border: solid thin gray; }
        div { width: 20px; height: 20px; border: solid thick green; }
        input { background-color: silver; }
    </style>
</head>
<body>
  focus/blur 이벤트 <br/>
  <input type="text" name="text1" value="입력하세요"/><br/>
  click 이벤트<div></div>
  toggle 이벤트 <br/><img src="static/bgimg1.jpg">
  <!--제이쿼리 라이브러리 선언 -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <!-- 제이쿼리 선택자(메소드) 실습 변경 부분 -->
  <script>
      $(document).ready( function() {
          // focus/blur 이벤트
          $('input').focus(function () {
              $(this).css('background-color', 'orange');
          });
          $('input').blur(function() {
              $(this).css('background-color', 'white');
          });
          // click 이벤트
          $('div').bind('click', function() {
              $(this).width($(this).width() * 1.5);
              $(this).height($(this).height() * 1.5);
          });
          // toggle 이벤트
          $('div').click(function() {
              $('img').toggle(4000);
          });
      })
  </script>
</body>
</html>
  • 이벤트 핸들러 함수(콜백 함수) 에서의 this
    해당 이벤트가 발생한 DOM 엘리먼트

제이쿼리 효과

제이쿼리 효과

  • 간단한 애니메이션 효과를 메소드로 제공
  • show([ms][,function()]) : 선택된 엘리먼트를 화면에서 보이게 함
  • hide([ms][,function()]) : 선택된 엘리먼트를 화면에서 사라지게 함
  • toggle([ms][,function()]) : 선택된 엘리먼트가 화면에 보였다가 사라지는 상태를 반복. show()와 hide()를 번갈아 수행.
  • slideUp([ms][,function()]) : 선택된 엘리먼트의 높이를 점차 위로 감소시켜 화면에서 사라지게 함. 위로 접는 효과
  • slideDown([ms][,function()]) : 선택된 엘리먼트의 높이를 점차 아래로 증가시켜 화면에서 보이게 함. 아래로 보이는 효과
  • slideToggle([ms][,function()]) : 선택된 엘리먼트의 높이를 변경하여 화면에서 사라지거나 보이게 함
  • fadeIn([ms][,function()]) : 선택된 엘리먼트의 불투명도를 점차 높여서 보이게 함
  • fadeOut([ms][,function()]) : 선택된 엘리먼트의 불투명도를 점차 낮춰서 사라지게 함
  • fadeToggle([ms][,function()]) : 선택된 엘리먼트의 불투명도를 변경하여 사라지거나 보이게 함

ms : 효과를 수행하는 지속 시간 (밀리초, 1/1000초 단위) slow(600ms), normal(400ms), fast(200ms) 문자열 중 하나를 지정해도 된다. 두 번째 function() 인자는 콜백 함수로 애니메이션 효과가 종료된 후 자동으로 실행될 사용자 정의 함수

// 빈 입력인자
show();
// 수치 입력
show(600);
// 문자열 입력
show('slow');
// 콜백함수 입력인자
show(200, function() { ... });

사용자 정의 효과 생성

  • animate([properties][,ms][,function()])
    • 기본적인 효과 외 맞춤형 효과를 사용자가 직접 정의하여 사용할 수 있음
    • 수치값을 사용하는 CSS3 스타일 속성값은 모두 가능
    • properties : 다양한 움직임 효과를 줄 수 있는 CSS 속성과 속성값을 맵 방식으로 명세
      $('p').animate({font-size: "3em"}, 2000); // 문단 글자 크기를 3배로 확대
  $('div').animate({height: "25%"}, "slow"); // div 영역의 높이를 1/4로 축소
  $('div:has(img)').animate({width: "0px"}, 1000); // 이미지가 포함된 div 영역을 왼쪽으로 접는 효과

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        div { margin: 5px; padding: 5px; border: solid thin gray; }
    </style>
</head>
<body>
  show/hide/toggle 효과
  <button id="hide">hide</button>
  <button id="show">show</button>
  <button id="toggle">toggle</button>
  <div><input type="text" name="text1" value="안녕하세요!!!"/></div>
  <!--제이쿼리 라이브러리 선언 -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <!-- 제이쿼리 선택자(메소드) 실습 변경 부분 -->
  <script>
      $(document).ready(function() {
          // show/hide/toggle 효과
          $('#hide').click(function () {
              $('input[name="text1"]').hide(600);
          })
          $('#show').click(function () {
              $('input[name="text1"]').show(1000);
          })
          $('#toggle').click(function () {
              $('input[name="text1"]').toggle(2000);
          })
      })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        div { margin: 5px; padding: 5px; border: solid thin gray; }
        #img2 { display: none; }
    </style>
</head>
<body>
  fadeOut/fadeIn/fadeToggle 효과
  <button id="fadeOut">fadeOut</button>
  <button id="fadeIn">fadeIn</button>
  <button id="fadeToggle">fadeToggle</button>
  <div>
      <img id="img1" src="static/bgimg1.jpg">
      <img id="img2" src="static/bgimg2.jpg">
  </div>
  <!--제이쿼리 라이브러리 선언 -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <!-- 제이쿼리 선택자(메소드) 실습 변경 부분 -->
  <script>
      $(document).ready(function () {
          // fadeOut/fadeIn/fadeToggle 효과
          $('#fadeOut').click(function () {
              $('#img1').fadeOut(2000, function () {
                  $('#img2').fadeIn(100);
              });
          });
          $('#fadeIn').click(function () {
              $('#img2').fadeOut(2000, function () {
                  $('#img1').fadeIn(100);
              });
          });
          $('#fadeToggle').click(function () {
              $('#img1').fadeToggle(1000);
          });
      })
  </script>
</body>
</html>

참고

Related Posts

Comments