12월14일

일반적으로 제이쿼리의 선택자는 여러개의 엘리먼트를 반환한다.

이 여러개의 엘리먼트중에서 우리가 필요한 특정 엘리먼트를 선택할 수 있어야 한다.

*여러개의 element를 집합으로 관리하기

$('img').hide() : img태그 요소집합들에 전부 hide()메서드를 사용한다.

$('#someDiv').html('안녕하세요 저는 id의 속성이 someDiv인 요소입니다!') 

size()메서드: 제이쿼리의 메서드로서 확장집합의 엘리먼크 개수를 반환한다.

사용예> $('a').size() = 전체 a태그의 갯수를 반환한다.

*인덱스로 엘리먼트 가져오기

만약, 인덱스를 적지 않으면 배열로 넘어오기 때문입니다.

var imgElement = $('img[alt]')[0] : alt속성을 가진 img의 요소들중에서 첫번째 요소를 가져옵니다.

var imgElement = $$('img[alt]').get(0) : get메서드로도 같은 결과를 얻을 수 있습니다.

get()메서드: 확장집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다.

전달인자를 생략하면 전체 집합을 배열로 반환합니다.

*확장집합에서 엘리먼트를 획득하는 여러가지 메서드

eq(index) index에 맞는 엘리먼트 가져옴

first() 첫번째 엘리먼트

last() 마지막 엘리먼트

*확장집합의 DOM엘리먼트를 자바스크립트 배열로 가져오기.

toArray()

예> var allLabel = $('label + button').toArray();

*확장집합에서 특정 엘리먼트를 찾기

index(element) 확장집합에서 특정 엘리먼트를 찾고, 그 엘리먼트의 인덱스를 return 한다.

집합에 해당 엘리먼트가 존재하지 않으면 -1를 반환한다.

*확장집합에 다른 엘리먼트 추가하기.

제이쿼리는 체인이 된다.

그래서 셀렉터를 잡고.. A라는 기능을 주고.. 이어서 B라는 기능을 주고.. C라는 기능을 줄 수 있따! 체인처럼.

=중간중간 집합이 바뀔 수 있어. 늘릴수도 있고 줄일 수도 있고.

예> $('img[alt], img[title]') == $('img[alt]').add('img[title]')

add()메서드를 사용하면 많은 셀렉터를 체인으로 연결 가능.

*확장 집합 걸러내기 - not()

not()메서드를 이용하여 논리부정 관계를 구성 할 수 있다.

예>

*확장 집합 걸러내기 - filter()

만족하는것만 포함시키겠다는 의미.

*확장 집합 걸러내기 - has()

원본 확장집합에서 전달된 test 표현식과 일치하는 자손을 가진 엘리먼트를 반환한다.

예> $('div').has('img[alt]') : div중에서, 자식요소로 img 엘리먼트[alt 애트리뷰트를 가지는 ]를 가지는 div를 찾는다.

*확장 집합 걸러내기 - is() - 많이씁니다!

셀렉터와 일치하는 엘리먼트가 하나라도 있으면 true를 반환한다.

없으면 false

var hasImage = $('*').is('img')

*확장 집합 걸러내기 - find() - 많이씁니다!

예> $('div').find('ul')

모든 div엘리먼트를 가져와서 그 div엘리먼트의 하위에 있는 ul엘리먼트를 전부 가져옵니다.

*JQuery 체인 관리하기 - end()

jQuery 메서드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

예> $('img').filter(['title']).hide().end().addClass('anImage');

=img요소 중 title속성을 갖는 요소들을 hide후,

end()를 통해 img로 돌아가서

addClass() 메서드로 'anImage'라는 클래스를 추가해 준다.

*JQuery 체인 관리하기 - andSelf()

메서드 체인에서 이전 확장 집합 두개를 하나로 합친다.

$('div').addClass('a').find('img').addClass('b').andSelf().addClass('c')

모든 <div>엘리먼트를 선택하고 선택된 엘리먼트에 a클래스를 추가한다.

그리고 <div>엘리먼트의 자손인 모든 <img>엘리먼트로 구성된 새로운 확장집합을 생성하고

b클래스를 추가한다.

그리고 <div>엘리먼트와 자신인 <img>엘리먼트를 합친 세번째 확장집합을 생성하여 c클래스를 추가한다.

*JQuery 체인 관리하기 - each() - 정말 중요합니다!

예>$('img').each(function(n) { /*처리내용*/ });

//이때 each안의 콜백함수 내에서 this는 순차적으로 넘겨지는 각각의 img 엘리먼트이다.

이미지 5개가있는데

해야 할 내용이 각각 다르다.

그래서 각각 순회를 해야한다.

만약 img가 5개이면 each 함수가 5번 실행된다.

n에는 index값이 들어간다!

*다른 HTML DOM 엘리먼트의 관계를 통해 새로운 확장집합을 얻는 메서드

//td요소중 Henry를 갖는 요소들중 

모든 형제요소들을 선택해서

highlight라는 Class를 추가한다.

//nextAll() 다음에 andSelf()를 선택하면

td요소중 Henry를 갖는 요소들중 

모든 형제요소들을 뿐만아니라

td요소중 Henry를 갖는 요소들까지 highlight class를 추가해준다.

(자기자신까지 적용한다는것이 특징)

//find와 end parent를 활용한 예제들.

//window객체의 array를 each로 가져와서 각각 처리하는 예제

bodyprint: window load직후 <h1>요소를 생성한다.

//그 후 생성된 h1를 집합으로 선택하여 

각각을 each메서드로 각각 다른 Class를 index에 따라 추가해 준다.

*이벤트

브라우저 이벤트 모델 특징

HTML 웹 페이지 인터페이스는 비동기적이고 이벤트 주도 방식이다.

다음과 같은 순서로 사용자 요구 처리

1. 사용자 인터페이스를 준비

2. 이벤트가 발생하기를 기다림

3. 이벤트에 대한 적절한 처리.

스크립트 이벤트핸들러(리스너)로 처리

브라우저간 차이점을 고려한 코딩 필요

JQuery 이벤트 모델 특징

이벤트 핸들러를 할당 할 수 있는 통합 메서드를 제공

엘리먼트 이벤트 타입마다 여러 핸들러를 할당

핸들러의 매개변수로 사용할 수 있는 Event인스턴스 제공

이벤트 해제와 기본동작을 막는 통합 메서드 제공

*Jquery 이벤트 커맨드 on(): 

on(): 이벤트를 연결하는 함수! 콜백함수가 이벤트핸들러 함수다.

$(selector).on(eventName, function(event){})

*Jquery 이벤트 커맨드 off():

off(): 이벤트를 제거하는 함수.

$(selector).off(eventName) // eventName이 없으면 전체 삭제

*Jquery 이벤트 커맨드 one():

one(): 일치된 집합에 있는 엘리먼트에 지정한 이벤트 타입에 핸들러를 한번 실행 후 자동으로 삭제.

*Jquery 이벤트 커맨드 들..

trigger(eventType): 일치된 엘리먼트에 대한 전달된 이벤트 타입에 해당하는 핸들러를 모두 실행

toggle(listenerOdd, listenerEven): 일치된 엘리먼트에 대해 클릭이벤트 발생시마다 번갈아 핸들러 실행

예>

*제이쿼리에서 이벤트 버블링 방지하기.

event.stopPropagation()//이때 event는 이벤트가 발생한 객체이다.

*엘리먼트 스타일 변경 메서드 css()

css(name): 첫번째 엘리먼트에서 name으로 명시한 Css 프로퍼티 값을 반환한다.

css(name, value): CSS 스타일 name프로퍼티를 value값으로 설정한다.

css(properties): 여러가지 프로퍼티와 value를 설정 할 수 있다. 아래의 예제를 참고.

>예제처럼 한꺼번에 여러가지 프로퍼티와 value를 설정 할 슈 있다!

$('img').css({

cursor: 'point',

border: '1px solid black'

})

*엘리먼트 크기얻기와 설정하기 width(), height()

전달인자가 없는경우 = 값 얻어오기

전달인자가 있는경우 = 값 설정하기.

*엘리먼트 스타일 효과

hide(speed, callback) : 확장 집합의 엘리먼트를 안보이게 한다.

show(speed, callback) : 확장 집합의 엘리먼트를 보이게 한다.

toggle(speed, callback) : 숨겨진 엘리먼트는 보이게, 보이는 엘리먼트는 숨긴다.

*엘리먼트 스타일 효과

fadeIn(speed, callback) : 감춰진 엘리먼트를 점점 나타나게 한다. 좀 예쁘다.

fadeOut(speed, callback): 보이는 엘리먼트를 점점 사라지게 한다.

fadeTo(speed, callback): 불투명도를 조정한다.

*사용자 정의 애니메이션 생성

animate(properties, duration, easing, callback)

천천히 움직 일 수 있다.

properties: 도달해야 하는 값. 

duration: 시간

easing: 효과임.. normal한 속도로 갔다가 갑자기 빨라진다던지.. 하는것. 함수임.

callback: 다 끝난후에… 호출할 함수.

*애니메이트 함수 예제

*기본 이벤트 제거 메서드

eventpreventDefault()

제이쿼리는 return false하면 버블링 + 기본 이벤트를 제거한다.

자바스크립트는 return false 하면 기본이벤트만 사라진다!

*append로 새롭게 추가된 엘리먼트들에게도 새로운 이벤트를 거는 예제.

>>17번째 라인에 주목한다.

*DOM API 조작 함수 - 중요합니다!

*엘리먼트 조작 - 엘리먼트 복사, 이동하기 (부모 자식관계)

-append(contents) - 일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML코드나 엘리먼트를 덧붙입니다.

-appendTo(targets) - append와는 반대로 확장집합의 모든 엘리먼트를 전달한 대상 엘리먼트 콘텐츠의 끝에 추가한다.

-prepend(contents) - 일치하는 모든 엘리먼트의 콘텐츠의 앞에 전달된 HTML 코드나 엘리먼트를 덧붙인다.

-prependTo(target) - 확장 집합의 모든 엘리먼트를 전달한 대상 엘리먼트 콘텐츠의 앞에 추가한다.

예를들어. $(선택자).append(contents)를 하면 선택자'에' contents가 덧붙여진다!

반면 $(선택자).appendTo(contents)를 하면 선택자'가' contents에 덧붙여진다.

*엘리먼트 조작 - 엘리먼트 복사, 이동하기 (형제 관계)

-$(선택자).before(contents) - 전달된 contents를 선택자의 형제엘리먼트로 앞에 추가한다(형!)

-$(선택자).after(contents) - 전달된 contents를 선택자의 형제엘리먼트로 뒤에 추가한다(동생!)

*엘리먼트 조작 - 엘리먼트 감싸기 등..

-$(선택자).wrap(wrapper) - 선택자를 wrapper로 감싼다.

-$(선택자).empty() - 선택자를 삭제