231205 (jQuery)

Jquery의 선택자

• 아이디 : $(’#아이디)
• 클래스 : $(’.클래스)
• 요소 : $(요소)
• 그룹 : $(선택자1, 선택자2 ….)
• 종속 : $(p선택자 값)

jquery 선택자의 장점

• 선택자 기준으로 상대적 위치에 따른 접근이 가능하다.
  • $(선택자).parents() : 부모요소 가져오기
  • $(선택자).children() : 모든 자식 요소 가져온다.
  • $(선택자).siblings() : 형제요소 가져오기

jquery에서 클래스 변경

• $('#name').toggleClass('available')
• addClass와 removeClass도 가능하다.
• contains는 hasClass로 가능하다.

예제

• 입력창을 2개 만들고 버튼 클릭 시 입력창의 내용물을 체크하여 4글자 이상인 경우 파란 배경, 4글자 미만이면 빨간 배경이 되도록 해보기
• 순서 1. 접근, 2. 접근 후 값 가져오기, 3. 제어문을 이용한 제어

function lengthCheckFn(){
            var name = $('#name');
            var id = $('#id')
            if(name.val().length<4){
                name.addClass('unavailable');
                name.removeClass('available');
            } else {
                name.addClass('available');
                name.removeClass('unavailable');
            }
            if(id.val().length<4){
                id.addClass('unavailable');
                id.removeClass('available');
            } else {
                id.addClass('available');
                id.removeClass('unavailable');
            }
        }