확장된 엘리먼트 집합 관리하기

1. size()

    - 설명 : 확장 집합의 엘리먼트 개수를 반환한다.

    - 매개변수 : 없음

    - 반환값 : 엘리먼트의 갯수

2. get(index)

    - 확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다. 매개변수가 명시되지 않았다면 확장집합에서 모든 엘리먼트를

      자바스크립트 배열로 반환한다.

    - 매개변수

        index(number) : 얻으려는 엘리먼트의 인덱스, 0부터 시작함. 생략하면 전체 집합을 배열로 반환한다.

    - 반환값

       하나의 dom 엘리먼트 또는 dom 엘리먼트 집합

    - 예)

      i. $('img[alt]').get(0);

        img 태그중 alt 속성을 가지고 있는 첫번째 img 엘리먼트를 가져온다.

       ii. var allLabeledBtns = $('label+button').get();

        label 태그의 바로 다음 형제 엘리먼트 button 전체를 가져온다.

3. index(element)

    - 확장집합에서 전달된 엘리먼트를 찾는다. 찾은 엘리먼트의 인덱스를 반환한다. 존재하지 않는다면 -1 반환.

    - 매개변수

       element(Element) : 순서 번호를 알고자 하는 엘리먼트의 참조

    - 반환값

       전달된 엘리먼트의 순서 번호, 없다면 -1 반환한다.

    - 예)

       i. var n = $('img').index($('img#findMe')[0]);

          img 엘리먼트중에 img 엘리먼트의 아이디가 findMe인 엘리먼트의 첫번째의 위치값

4. add(expression)

    - 매개변수로 명시한 엘리먼트를 확장 집한에 추가한다. 표현식(expression)에는 셀렉터, html 코드, dom 엘리먼트, dom 엘리먼트

       배열이 올수 있다. end() 함수와 연계하여 사용가능하다.

    - 매개변수

        expression(StringElementArray) : 추가될 표현식.

    - 반환값

       확장집합

    - 예)

       i. $('img[alt]').add('img[title]')

          img 엘리먼트중 alt 속성이 있는 것을 선택하고 거기에다가 img 엘리먼트중에 title 속성이 있는 집합을 추가한다.

      ii. $('img[alt]').addClass('thickerBroder').add('img[title]').addClass('seeThrough');

          alt 속성을 가진 img 엘리먼트에 thickerBorder 클래스를 적용하고 title 속성을 가진 img 엘리먼트를 더하여

          seeThrough 클래스를 적용한다. 결과는 alt속성을 가진 img 엘리먼트에는 thickerBorder, seeThrough 두개의 클래스가 적용되고,

          title 속성을 가진 img 엘리먼트에는 seeThrough 클래스만 적용이 된다.

      iii. $('p').add('<div>안녕</div>');

5. not(expression)

    - 매개변수의 값에 일치하지 않는 집합을 반환한다.

    - 매개변수

       expression(StringElementArray) : 확장집합에서 제거할 대상. JQuery 필터 표현식, 엘리먼트 참조, 엘리먼트 참조 배열 값이 들어간다.

    - 반환값

       확장집합

    - 예)

        i. $('img[title]').not('[title*=puppy]');

            title 속성을 가진 img 엘리먼트 중에서 title의 속성값이 puppy의 값을 포함하는 img 엘리먼트를 제거한다.

6. filter(expression)

    - 해당 매개변수를 만족하는 집합을 반환한다. not(expression)과 반대 개념이다.

    - 매개변수

       expression(String | Function) : Jquery 셀렉터 또는 함수. 함수를 사용할 시에는 각 엘리먼트마다 호출된다. 함수 사용시 해당 시점에서

                                                    함수 콘텍스트인 this 에 접근 가능하다.

    - 반환값

       확장 집합

    - 예)

        i. $('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder');

           모든 img 엘리먼트에 seeThrough 클래스를 적용하고나서, img 엘리먼트중에 title의 속성값에 dog의 값이 들어가는 것만 골라내서

           thickBorder 클래스를 적용한다.

7. slice(begin, end)

    - begin 부터 시작하여 end 까지의 집합을 잘라낸다. 잘라낸 집합을 반환한다.

      begin 이상 end 미만으로 생각하면 쉽다.

    - 매개변수

       begin(number) : 첫 엘리먼트의 위치, 0부터 시작

       end(number) : 마지막 엘리먼트의 위치, 생략한다면 마지막까지 포함한다.

    - 반환값

      확장집합

    - 예)

       i. $('*').slice(2, 3);

          모든 엘리먼트중에서 2이하 3미만, 즉 세번째 엘리먼트를 반환한다. 0부터 시작하기때문에 2 인것은 세번째를 가르킨다.

      ii. $('*').slice(4)

          5번째 엘리먼트부터 끝까지 선택한다.