jQuery study 1

jQuery 홈페이지 : http://jquery.com

소스코드
minified버전(용량최소화한것):http://code.jquery.com/jquery1-7.min.js
uncompressed버전:http://code.jquery.com/jquery1-7.js 

  예제 13-1 $(document).ready()는 문서가 준비가 완료되면 매개변수로 전달된 함수를 실행~

                  window.onload=function(){ } 과 비슷한 기능수행. 하지만 

                  $(document).ready() 메서드는 이미지로드나 다른 외부 데이터 수집시엔 제어가 안될 수 있다.

                  확인은 document.readyState- ( 문서로드 상태 ) 로 alert나 console.log 호출해보면 알 수 있다. 

                  $(document).ready() 에서 document.readyState를 호출하면 interactive 라고 찍힘 

                   - 로드는 완벽히 되진 않았지만 접근은 가능을 뜻한다. 

                   window.onload=function(){ } 에서  document.readyState를 호출하면 complete                  

$('h1').css('color', 'red');
1. $--> jQuery
2. ('h1') --> 선택자
3. css('color', 'red'); --> 메서드

선택자

1. 전체선택자

예제 13-5

2. 태그선택자

예제 13-8

3. 아이디선택자

예제 13-10

4. 클래스선택자

예제 13-3, 예제 13-4

5. jQuery자식 선택자 - 부모>자식 형태 

예제 13-16

6. jQuery후손 선택자 - 부모의 하위 자식 모두 선택

예제 13-17

7.jQuery속성 선택자 -입력양식과 관련된 태그 선택시 많이 사용

표13-1

요소[속성] - 특정 속성을 가지고 있는 문서 객체를 선택
요소[속성=값] - 속성 안의 값이 특정 값과 같은 문서객체를 선택
요소[속성~=값] - 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택
요소[속성^=값] - 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택
요소[속성$=값] - 속성안의 값이 특정 값으로 끝나는 문서 객체를 선택
요소[속성*=값] - 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택 

예제 13-19

8. jQuery입력 양식 필터 선택자

표13-2
요소:button - input 태그 중 type속성이 button인 문서 객체와 button태그를 선택
요소:checkbox - input 태그 중 type속성 check인 문서 객체 선택 
요소:file - input 태그 중 type속성  file 인 문서 객체 선택 
요소:image- input 태그 중 type속성  image 인 문서 객체 선택  
요소:password- input 태그 중 type속성  password 인 문서 객체 선택  
요소:radio - input 태그 중 type속성  radio 인 문서 객체 선택    
요소:reset- input 태그 중 type속성   reset  인 문서 객체 선택  
요소:submit- input 태그 중 type속성   submit 인 문서 객체 선택  
요소:text- input 태그 중 type속성   text 인 문서 객체 선택 

표13-3
요소:checked- 체크된 입력 양식을 선택
요소:disabled- 비활성화된 입력 양식 선택
요소:enabled- 활성화된 입력 양식 선택
요소:focus- 초점이 맞춰져 있는 입력 양식을 선택
요소:input- 모든 입력 양식을 선택( input, textarea, select, button 태그)
요소:selected -option 객체 중 선택된 태그를 선택   
   
예제 13-21

9. jQuery 필터 선택자- 위치와 관련된 필터 선택자

표 13-4
요소:odd - 홀수 번째 위치한 문서 객체 선택
요소:even - 짝수 번째 위치한 문서 객체 선택
요소:first - 첫번째 위치한 문서 객체 선택
요소:last - 마지막에 위치한 문서 객체 선택 

예제 13-23

10. jQuery 함수 필터 선택자
요소:contains(문자열) - 특정 문자열을 포함하는 문서 객체를 선택
요소:eq(n)  - n번째 위치하는 문서 객체를 선택
요소:gt(n) - n번째 초과에 위치를 하는 문서 객체를 선택
요소:has(h1) - h1태그를 가지고 있는 문서 객체 선택
요소:It(n)  - n번째 미만에 위치하는 문서 객체를 선택
요소:not(선택자) - 선택자와 일치하지 않는 문서 객체 선택
요소:nth-child(3n+1)  - 3n+1번째에 위치하는 문서 객체 선택

 

예제 13-24

11. jQuery를 사용해 배열 관리 - each 메서드사용

두가지 형태

1.$.each(object, function(index, item){} )

2.$(selector).each( function( index, item ){} )

예제 13-26 - 배열 array 4개의 객체를 가지고 name속성과 link속성을 가지고 있다.

12. 클래스속성 추가 삭제
addClass, removeClass - class속성 추가, 삭제 기능

예제 13-29

13. jQuery를 사용한 배열관리(2)
$(선택자).each()메서드를 사용한 서로 다른 클래스 적용

예제 13-32

14. jQuery를 사용한 객체 확장

예제 13-36

많은 수의 속성 추가시 사용 // 1번째 인자값 원본 object // 2번째부터 이후 인자값은 1번째 인자로 넣은 object값에 합침 $.extend( object, addObject, addObject, .... )

예제 13-37

15. jQuery 프레임워크 충돌 방지

여러 프레임워크를 함께 사용할 때 프레임웍 간에 충돌할 수 있다.

Prototype프레임웍도 식별자 $를 쓴다.

따라서 jQuery와 같이 쓸 경우 충돌한다.

충돌 방지 메서드 $.noConflict()

- 하지만 이것을 사용하면 더 이상 jQuery의 $를 사용할 수 없다.

예제 13-39