[Javascript] jQuery 1 / 2

jQuery

• 제이쿼리는 자바스크립트를 편리하고 강력하게 사용하기 위한 목적으로 만들어짐
• API문서가 잘 작성돼있어 배우기 쉬움
• HTML, CSS를 다루거나 이벤트 구성 시 다양한 효과나 기능을 구성하는데 효율 적

jQuery환경 구성하기

• jQuery홈페이지를 방문 후 다운로드하기
• jQuery의 종류는 기본적으로 3가지
  • jQuery 기본형, 최소형
    • 노란색 : 기본형, 파란색 : 최소형
    • 최소형은 Ajax, Effects기능이 제외된 구성임
    • jQuery이외의 라이브러리로 Ajax, Effects기능을 사용하고자 할때 사용하면 됨
  • CDN을 통한 jQuery연결

jQuery API

• jQuery API 사용시 염두해 두어야 할 점은
  • 선택자가 중요하다
  • 괄호를 많이 사용하기 때문에 괄호를 구성하고, 괄호 안에 코드를 추가하는 방식으로 코딩해야 오류를 줄일 수 있다는 점

1. 이벤트 (마우스, 키보드)

• JS는 이벤트 드리븐 방식으로 구현

  • 이벤트의 구성이 중요함

  • 이벤트 드리븐 방식이란 이벤트에 반응하여 동작을 변경하거나 수행하는 방식을 말함

    마우스 이벤트	설명
    .click()	요소 클릭 시 이벤트 발생
    .contextmenu()	요소에 마우스 오른쪽 버튼 클릭 시 이벤트 발생
    .dbclick()	요소에 더블 클릭 시 이벤트 발생
    .hover()	요소에 마우스 진입할때, 벗어날때 이벤트 발생
    .mousedown()	요소에서 마우스 누를 때 이벤트 발생
    .mouseleave()	요소에서 마우스가 나올 때 이벤트 발생
    .mousemove()	요소에서 마우스가 움직일때 발생
    .mouseout()	요소에서 마우스가 나올때 이벤트 발생
    .mouseover()	요소에 마우스 진입 시 이벤트 발생
    .mouseup()	요소를 눌렀다 뗄 때 이벤트 발생

    💡 mouseover(), mouserenter(), mouseout(), mouseleave()는 기능면에서 동일하나 mousenter(), mouseleave()가 성능상으로 더 낫다

  • 기본 사용 방식

    $('#btn').click(()=>{
    	alert('click!')
    })
    
    $('img').hover(()=>{alert('mouse in')}, ()=>{alert('mouse out')})
    $('img').mouseemter(()=>{alert('mouse in')}, ()=>{alert('mouse out')})
    

    키보드 이벤트	설명
    .keydown()	키보드의 아무 키를 누르면 이벤트 발생
    .keypress()	키보드의 아무 키를 누르면 이벤트 발생
    .keyup()	키를 눌렀다 뗄 때 이벤트 발생

    $('input[name="name"]').keydown((e)=>{if(event.keyCode == 13){
    	alert($(this).val())
    }})

1. 효과

• 베이직 효과

  • hide(), show(), toggle() 등 화면에서 보이는 요소의 display 여부를 조작할 때 사용

  • 이 밖에 fadeIn(), fadeOut(). fadeTo() 등이 있음

  • 사용 예시

    $('#img1').click(()=>{
    	$('#img1').hide()
    })
    
    $('#img2').click(()=>{
    	$(this).hide(1000) // 콜백 함수로 transition 효과를 줄 수 있음 
    })
    
    $('#img3').click(()=>{
    	$(this).hide(1000, ()=>{
    		alert('image hide') 
    	})
    })
    
    $('#img1').click(()=>{
    	$(this).hide(1000, $(this).show(1000))
    })
    
    $('#img2').click(()=>{
    	$('#img2').hide(1000, $(this).show(1000))
    })
    
    $('#img3').click(()=>{
    	const target = $(event.currentTarget)
    	target.hide(1000, ()=>{target.show(1000)}) 
    })

    target : target 속성은 이벤트가 실제로 발생한 요소.
    즉, 사용자가 클릭한 버튼, 입력한 텍스트 필드 등 이벤트가 최초로 발생한 요소를 나타냄.
    currentTarget : currentTarget 속성은 이벤트 리스너가 붙어있는 요소를 가리킴.
    이벤트가 전파될 때 (버블링 또는 캡처링 과정) 이벤트 리스너가 현재 실행되고 있는 요소를 나타냅니다.

  1. css
  • 요소에 적용된 스타일을 조회하거나 설정 및 클래스를 다루는 메서드

    • css(), addClass(), removeClass(), hasClass() 등을 주로 사용

      css 이벤트	설명
      css()	선택 요소에 적용된 스타일을 조회하거나 설정 할 수 있음
      addClass()	요소에 클래스를 추가
      removeClass()	요소에서 클래스를 제거
      hasClass()	매개변수로 전달된 클래스 이름이 선택된 요소가 가졌는지를 true false로 반환
      toggleClass()	addClass와 removeClass를 함께 사용 가능

      $(선택자).css(속성, 속성값);
      $(선택자).css(속성: 속성값, 속성: 속성 값)
      
      $('선택자').click(()=>{
      	console.log($(this).css('background-color')
      })
      
      $('선택자').click(()=>{
      	console.log($(this).css('background-color', 'lightcoral')
      })
      
      $('#선택자').click(()=>{
      	$(this).css({
      		backgroundColor : 'yellow',
      		fontWeight: 'bold',
      		color : 'blue'
      	})
      })
      
      $(선택자).click(()=>{
      	if($(this).hasClass('active')){
      		$(this).removeClass('active')
      	} else {
      		$(this).addClass('active')
      	}
      })
      
      $(선택자).click(()=>{
      	$(this).toggleClass('active')
      })
      
      // 특정 요소에만 active적용, 나머지 형제들은 제거하고 싶다면 siblings() 활용 가능
      $(선택자).addClass('active').siblings().removeClass('active')