[jQuery] 기본 명령어

Anna Lee·2023년 6월 2일
0

jQuery

목록 보기
1/1
post-thumbnail

제이쿼리 (jQuery) ?

  • 자바스크립트 라이브러리 中 1
  • 자바스크립트의 명령을 보다 간단하게 사용할 수 있도록 해줌
  • 셀렉터 형태 - $('셀렉터')
  • 명령 적용 대상 - 클릭해야 할 버튼, 팝업창, 메뉴 목록 ...
  • 버전 1, 2, 3 有
  • 최근에는 잘 쓰이진 않지만, 시장 점유율이 높기 때문에 유지보수를 위해 알아두어야 함

[주의사항]

  • 제이쿼리 기본 문서를 HTML 문서에 연결해서 사용해야 함
    -> 내가 작성할 내용보다 앞에 작성되어야 함

    ** 라이브러리 : 근간은 두고 있으나, 언어로 보긴 힘듦
    재사용이 가능한 기능을 미리 구현해놓고, 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합
    ( 리액트, 제이쿼리 ... )

    ** 프레임워크 : 근간은 두고 있으나, 형식이 다르고 뼈대가 있음
    ( 뷰, 노드 ... )

text 명령, html 명령

  • HTML 태그 내용을 변경 및 저장하는 명령
  • text 명령 - 텍스트 형태의 자료만 컨트롤 가능
    ** text( ) => textContent( ), innerText( )와 유사
  • html 명령 - 태그도 컨트롤 가능
    ** html( ) => innerHTML( )와 유사

CSS 명령

  • 셀렉터 스타일 변경
$('셀렉터').css({
	스타일 속성이름 : '값',
    스타일 속성이름 : '값'
})

-> 스타일 속성이름은 카멜케이스로 처리 ( marginLeft, borderTop... )

  • 셀렉터 스타일 저장
let 변수 = $('셀렉터').css('스타일 속성이름')

class 명령

  • addClass( ) : 클래스 추가하기
  • removeClass( ) : 클래스 삭제하기
  • toggleClass( ) : 클래스 추가 / 삭제하기 (번갈아서 실행)
    ** 매개변수로 클래스명 사용함 / 호출할 때 점( . )을 찍지 않음

순서 명령

  • $('셀렉터').index( ) : 셀렉터의 순서값 저장
    ** index 순서값 - 0번째부터 시작
  • $('셀렉터').eq(인덱스 순서값)
$('.btn p).click(function(){
	let i = $(this).index() // i에 현재 클릭한 대상의 순서값 저장
    $('.btn p').removeClass('on') // 전체 비활성화
    $(this).addClass('on') // 선택한 대상에만 활성화
    $('.box .inner').removeClass('view')
    $('.box .inner').eq(i).addClass('view') // i번째 값에만 view 활성화
})

결론

자바스크립트보다 간결하고 수월하게 사용이 가능하지만,
웬만하면 자바스크립트를 활용해서 해결하자 !

profile
프론트엔드 개발자가 되는 그날까지 🙌💨〰

0개의 댓글