<TIL> jQuery_속성조작 메서드, 이벤트 컨트롤

28369 단어 TILjqueryTIL

2021.08.19

1. 속성 조작 메서드

1-1.기본 사용법

속성 가져올 때
$ (선택자).attr();
선택자의 모든 속성
$ (선택자).attr('속성이름');
선택자에 있는 '속성이름'의 속성

속성 입력할 떄
$ (선택자).attr('속성이름', '속성대입값');
단일 속성 조작
$ (선택자).attr({
속성이름1: '속성대입값'
속성이름2: '속성대입값'
});
다중 속성 조작

1-2 예제

  <body>
    <!-- 바위 변경 alt 바위 -> 클릭하면 네이버로 이동, 새창 / 보더 2px solid red -->
    <a href="#"><img src="images/math_img_1.jpeg" alt="가위" /></a>

    <script>
      $('[href]').click(function () {
        // $('a>img').attr('src', 'images/math_img_2.jpeg');
        // $('a>img').attr('alt', '바위');

        $('a>img')
          .attr({
            src: 'images/math_img_2.jpeg',
            alt: '바위',
          })
          .css('border', '2px solid red');

        $(this).attr({
          href: 'https://www.naver.com/',
          target: '_blank',
        });

        console.log($('a>img').attr('alt'));
      });
    </script>
  </body>

2.이벤트 조작 메서드

이벤트 메서드 사용법
기본적으로 선택자를 입력하고 .뒤에 작성한다.
$(선택자).메서드();

2-1. 이벤트별 메서드 분류

2-1-1. 로딩이벤트 메서드

  1. load()
    선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생

  2. ready()
    지정한 HTMl 문서 객체의 로딩이 완료된 후 이벤트가 발생

  3. error()
    이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생

2-1-2. 마우스이벤트 메서드

  1. click()
    선택한 요소를 클릭했을때 이벤트가 발생

  2. dbclick
    선택한 요소를 연속해서 두번 클릭했을때 이벤트가 발생

  3. mouseout()
    선택한 요소의 영역에서 마우스 포인터가 벗어났을때 이벤트가 발생
    (이때 하위 요소의 영향을 받음)

  4. mouseover()
    선택한 요소의 영역에 마우스 포인터를 올렸을때 이벤트가 발생

  5. hover()
    선택한 요소에 마우스를 올렸을 때와 벗어났을 때 각각 이벤트가 발생

  6. mousedown()
    선택한 요소에서 마우스 버튼을 눌렀을때 이벤트가 발생

  7. mouseup()
    선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생

  8. mouseenter()
    선택한 요소 범위에 마우스 포인터를 올렸을때 이벤트가 발생

  9. mouseleave()
    선택한 요소 범위에서 마우스 포인터가 벗어났을때 이벤트가 발생

  10. mousemove()
    선택한 요소 범위에서 마우스 포인터를 움직였을때 이벤트가 발생

  11. 이벤트객체 pageX
    스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환

  12. 이벤트객체 pageY
    스크롤 y축의 이동한 거리를 계산하여 마우스 포인터의 Y좌표값을 반환

2-1-3. 스크롤이벤트 메서드

scroll()
가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생

2-1-4. 윈도우 창너비 변경이벤트 메서드

윈도우 창크기 구하기

  1. var windowWidth = $( window ).width();
    윈도우 창 너비
  2. var windowHeight = $( window ).height();
    윈도우 창 높이

창크기 바뀌는 것 감지 (확대 축소에도 적용됨.)

  1. $( window ).resize(function() {창 크기 바뀌면 실행할 것});

$(window).width()와 $(document).width() 차이

  1. $(window).width
    브라우저의 창너비

  2. $(document).width
    문서의 너비

2-1-5. 포커스이벤트 메서드 (form 관련 메서드)

  1. focus()
    선택한 요소에 포커스가 생성되었을때 이벤트를 발생하거나
    선택한 요소에 강제로 포커스를 생성

  2. blur()
    포커스가 선택한 요소에서 다른 요소로 이동했을때 이벤트가 발생 하거나
    선택한 요소의 포커스가 강제로 사라지게 한다.

  3. focusin()
    선택한 요소 자식요소에 포커스가 생성되었을때 이벤트가 발생

  4. focusout()
    포커스가 선택한 요소 자식요소에서 다른요소로 이동되었을때 이벤트가 발생

  5. change()
    이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생 그리고 강제로 change() 이벤트를 발생 시킬 때도 사용

  6. submit()
    폼태그에서 인풋에 입력한 값이 서버로 전송되는 서밋이 발생했을때 이벤트가 발생

2-1-6. 키보드이벤트 메서드

  1. keypress()
    선택한 요소에서 키보드를 눌렀을때 이벤트가 발생 그리고 문자 키를 제외한 키의 코드값을 반환

  2. keydown()
    선택한 요소에서 키보드를 눌렀을때 이벤트가 발생 그리고 키보드의 모든 키의 코드값을 반환

  3. keyup()
    선택한 요소에서 키보드에서 손을 떼었을때 이벤트가 발생 합니다.

2-2 다중이벤트 적용 메서드

이벤트를 여러개 적용하거나 추가할 때 사용하는 메서드로 자바스크립트의 addEventlistener와 사용법이 비슷하다.

on 메서드 사용법
on('이벤트', function(){})
on({
이벤트1: function(){}
이벤트2: function(){}
})

2-3 기타 메서드

2-3-1 trigger()

함수를 한번 미리 작동시켜놓는 메서드

코드 예시

    <script>
      $(document).ready(function () {
        $('button:eq(0)')
          .on('click', function () {
            $('#con1').toggleClass('on');
          })
          .trigger('click');
        // $('button:eq(0)').click();
        $('button:eq(1)')
          .on('click', function () {
            $('#con2').toggleClass('on');
          })
          .trigger('click');

        $('button:eq(2)').on('click', function () {
          $('button:eq(0)').trigger('click');
          $('button:eq(1)').trigger('click');
        });
        // trigger 이벤트 강제 발생
      });
    </script>
  </head>
  <body>
    <div id="con1"></div>
    <div id="con2"></div>
    <button>클릭1</button>
    <button>클릭2</button>
    <button>all</button>
  </body>

triggrt가 없더라면 채워지지 않을 막대가 페이지가 로드 시 함수가 한번 발동하여 미리 채워져있는 것을 볼 수 있다.

예제

예제코드

    <script>
      $(function () {
        $('a:first').attr({
          href: 'https://www.naver.com/',
          target: '_blank',
        });

        $('a:last').text('구글 바로가기');
        $('a:last').attr('href', 'https://www.google.co.kr');

        $('button').on('click', function () {
          $('p').css('display', 'block');
        });

        $('p').on({
          click: function () {
            $(this).css('display', 'none');
          },
          mouseover: function () {
            $(this)
              .css('background-color', 'red')
              .siblings('p')
              .css('background-color', '#fff');
          },
          mouseout: function () {
            $(this)
              .css('background-color', 'blue')
              .siblings('p')
              .css('background-color', '#fff');
          },
        });
      });
    </script>
  </head>
  <body>
    <a href="">네이버 바로가기</a>
    <a href="">바로가기2</a>
    <hr />
    <p>클릭하면 사라짐1</p>
    <p>클릭하면 사라짐2</p>
    <p>클릭하면 사라짐3</p>
    <p>클릭하면 사라짐4</p>
    <p>클릭하면 사라짐5</p>
    <hr />
    <button>나타내기</button>
  </body>

  1. 속성 조작으로 href 주소와 target을 입력하여 각각 해당 주소로 이동 및 새창에서 열어준다.

  2. p 태그를 클릭할때 실행되는 함수를 작성하고 함수마다 this를 사용해 클릭된 p태그만을 선택해 해당 부분만 사라지게 한다.

  3. 마우스오버, 마우스아웃은 선택자 전체를 지정하기 때문에 sibling으로 자신을 제외한 태그들은 하얀색으로 돌리고 자신만 배경색상을 바꾼다.

  4. 버튼을 클릭하면 p 태그의 디스플레이 속성을 블록으로 바꿔준다.

[마코의 공부일지] 웹개발 종합반 2주차 후기(3)
TIL 09 | HTML Basics

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage