[jQuery] 제이쿼리 3일차 요점정리

- 요소의 판별 -

[1] index() 함수

: 특정 요소가 부모 태그 안에서 갖는 인덱스 번호를 리턴하는 함수 (0부터 시작함)

<div>

    <a href = "#">...</a>     --->0

    <div id = "hello"></div>  --->1

    <p class = "memo"></p>    --->2

</div>

<script>

    //부모 <div>를 기준으로 2번째 요소 이므로 인덱스 1이 리턴된다.

    var idx = $("#hello").index();

</script>

[2] $(this)

: 복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체

<button class="btn"> button1 </button>

<button class="btn"> button2 </button>

<button class="btn"> button3 </button>

<script>

    //'btn'이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트

    $('.btn').click(function() {

        //버튼은 한 번에 하나씩만 누를 수 있다.

        //이 안에서 $(this)는 클릭된 주체를 의미한다.

    });

</script>

[3] HTML 요소의 속성 제어

• 특정 요소에 적용되어 있는 속성값 조회하기

var foo - $("#bar").attr("속성이름");

• 특정 요소에 적용하기

• 개별 적용

$("#bar").attr('속성이름', '값);

• 일괄 적용 (JSON 형태 사용)

$("#bar").attr({

        속성이름: '값',

        속성이름: '값',

        속성이름: '값'

        ...

    });

1. 속성 이름에 공백이나 - 기호가 포함된 경우는 반드시 따옴표 적용.
2. 그 외에는 따옴표 처리가 필수는 아님.

[4] data-* 속성

data-000 형태로 개발자가 필요에 따라 직접 정의하는 속성.

Javascript에서 사용할 변수값을 숨겨놓기 위한 목적으로 사용한다.

<div id = "bar" data-hello= "안녕하세요" data-world= "jQuery">

    ...

</div>

• data 속성값 조회하기

var foo = $("#bar").data("hello");

var foo2 = $("#bar").data("world");

• data 속성값 적용/ 변경하기

$("#bar").data("hello", "반갑습니다.");

$("#bar").data("world", "Javascript");

[5]HTML 요소의 CSS 속성 제어 

• 특정 요소에 적용되어 있는 속성값 조회하기

var foo = $("#bar).css('속성이름');

• 특정 요소에 적용하기
• 개별적용

$("#bar").css('속성이름', '값');

• 일괄적용

$("#bar").css({

            속성이름: '값',

            속성이름: '값',

            속성이름: '값'

            ...

    });

• CSS 클래서 적용 여부 검사

var foo = $("bar").hasClass("클래스 이름"); //true, false로 리턴

• CSS 클래스 적용

• 두 개 이상의 클래스를 적용하고자 하는 경우 공백으로 구분.

$("#bar").addClass('클래스이름 클래스이름...');

• CSS 클래스 삭제

• 두 개 이상의 클래스를 삭제하고자 하는 경우 공백으로 구분.

$("#bar").removeClass("클래스이름 클래스이름...");

• CSS 클래스 적용/삭제 자동 반복

• 두 개 이상의 클래스를 처리하고자 하는 경우 공백으로 구분.

$("#bar").toggleClass("클래스이름 클래스이름...");

[6] not() 

: 복수 요소를 지정하고 있는 jQuery 객체 중에서 특정 요소를 제외한 항목들을 지정하는 기능.

this 키워드에 대해서 뿐만 아니라 다른 jQuery 객체에 대해서도 적용할 수 있다!!!!!!!!!!

• this 와 함께 사용하는 경우

$(".btn").click(function() {

        //".btn"중에서 클릭된 요소.

        $(this)

        //".btn"중에서 클릭되지 않은 나머지 요소(들)

        $(".btn").not(this)

});

• 일반적인 접근

//".btn"중에서 id값이 "#hello"인 요소 제외

$(".btn").not( $("#hello"))

//".btn"중에서 3번째 요소만 제외

$(".btn").not( $(".btn:nth-child(3)") )  //1부터 카운트

$(".btn").not( $(".btn:eq(2)") )         //0부터 카운트

[7] 요소의 숨김, 표시 처리

: css의 display: block; 속성을 적용해 주는 효과.

• 기본 동작

함수	설명
show([time, [function() {...}]]);	화면에 표시
hide([time, [function() {...}]])	화면에서 숨김
toggle([time, [function() {...}]])	표시, 숨김 자동 반복

• time을 지정하지 않을 경우 애니메이션 없이 한 번에 동작함
• time은 1/1000초 단위로 지정
• 두 번째 파라미터인 콜백함수는 동작이 종료될 때 자동으로 실행될 동작을 구현 (잘 사용되지 않음.)

[8] 애니메이션을 갖는 파생기능

• fade효과

함수	설명
fadeIn([time, [function() {...}]]);	화면에 표시
fadeOut([time, [function() {...}]]);	화면에서 숨김
fadeToggle([time, [function() {...}]]);	표시, 숨김 자동 반복

• 슬라이드 효과

함수	설명
slideDown([time, [function() {...}]])	화면에 표시
slideUp([time, [function() {...}]])	화면에서 숨김
slideToggle([time, [function() {...}]])	표시, 숨김 자동 반복