1. 준비단계
- jQuery js 파일 연결하는 방법.
- 연결 후 hello 출력해보기.
2.셀렉터들
2-1. 기본 셀렉터
*
E
E F
E>F
E+F
E~F
E:has(F)
E.C
E#I
E[A]
E[A=V]
E[A^=V]
E[A$=V]
E[A*=V]
2-2. 위치기반 셀렉터
:first
:last
:first-child
:last-child
:only-child
:nth-child(n)
:nth-child(even|odd)
:nth-child(Xn+Y)
:even / :odd
:eq(n)
:gt(n)
:lt(n)
2-3.정의 필터 셀렉터
:animated
:button
:checkbox
:checked
:contains(foo)
:disabled
:enabled
:file
:header
:hidden
:image
:input
:not(filter)
:parent
:password
:radio
:reset
:selected
:submit
:text
:visible
3. 확장집합 컨트롤
- 갯수알아내기
- size()
- length;
- 앨리먼트 접근하기.
- [index] : 배열의 index로 접근하기.
- get(index) :
- 앨리먼트의 index값 알아내기
- index(Element)
- 추가하기
- $("div", "img") : div, img 테그 확장집합 생성.
- add(expression) : 기존 확장집합에 매개변수로 명시한 엘리먼트를 추가.
- 제거하기(필터링방법중 하나로 보면 될듯)
- not(String:Element:Array) :
- 확장집합에서 매개변수에 해당하는 요소를 제거
매개변수에는 필터 표현식만 가능.
- :not(filter)는 틀림 not()는 이미 생성된 확장집합에서 제거함.
- filter()와는 정 반대. not() 조건에 맞는 요소제거, filter()조건에 맞지 않는 요소 제거.
- 필터링
- filter(String|Function)
- 매개변수에 해당하지 않는 요소를 제거.이는 not()과의 반대.
- 찾기
- find(String)
- filter와 비슷하지만 find는 검색대상이 자식노드임.
- 부분집합 얻기
- slide(begin(Number), end(Number)
- 관계를 통한 확장집합 얻기.
- children()
- html tag node 만을 자식으로 인정, text 노드 제외
- 단, 하위의 하위 노드는 제외
- contents()
- html tag node + text node 모두 자식으로 인정.
- 단, 하위의 하위 노드는 제외
- next():확장집합
- 확장집합내의 확장 엘리먼트 바로 다음에 나오는 형제노드(일반적으로 보통 확장요소 엘리먼트 하나)
예)$(".item-a").next()
- nextAll()
- 확장집합내의 확장 엘리먼트 바로 다음에 나오는 모든 형제노드
- parent()
- 확장 집합의 확장 엘리먼트들의 바로 위 부모
- parents()
- 확장 집합의 확장 엘리먼트들의 모든 부모, 단 root는 포함되지 않음.
- prev()
- next()와 반대
- prevAll()
- nextAll()과 반대.
- siblings()
- 해당 노드의 모든 형재 노드 확장집합 반환,(단, 자신은 제외)
- 예) 형1, 형2, 누나1, 누나2(조카들은 제외됨)
- 기타
- is(Selector:String) : Boolean
- 확장집합에 매개변수로 넘어오는 Selector가 있는 경우 true, 그렇지 않은 경우 false
- end()
이전확장 집합반환
- andSelf()
이전확장요소와 합친 확장 집합요소로 만들기.
------------------------------------------------------------------------
4. HTML 엘리먼트, 엘리먼트 attribute, 엘리먼트 프로퍼티
- <img id="myImage" src="image.gif" alt="이미지" class="somClass" title="이미지다." />
- HTML 엘리먼트란?
- img같은 엘리먼트 마크업의 태그명
-엘리먼트 attribute
- id, src, alt, class, title
-엘리먼트 프로퍼티
- id, src, alt, className, alt
5. NodeList 엘리먼트, 어트리뷰트 프로퍼티(attribute properties)
- NodeList 앨리먼트란?
- html 엘리먼트 => 브라우저를 통해 => dom엘리먼트로 변환
- 어트리뷰트 프로퍼티
- NodeList에서 사용하는 프로퍼티
- id,src,alt, class,alt
- HTML의 프로퍼티와 비슷하면서 틀림.
6. 엘리먼트 프로퍼티 조작하기.
- 엘리먼트 접근
- each(iterator:Function)
-iterator내부 this = 엘리먼트
- $("img")[0] = 엘리먼트
- 어트리뷰트 값 가져오기
- attr(name:String)
- 표준화된 프로퍼티 이름(HTML,XHTML및 브라우저마다 프로퍼티 이름이 틀림, 이를위해서 표준화된 프로퍼티 제공.)
- class
- classname(브라우저에서는)
- cssFloat
- IE : styleFloat, 그외 : cssFloat
- float
- for
- maxlength
- 어트리뷰트 값 설정하기.
- attr(name:String, value:String|Object|Function)
- 단일정보.
- attr(attributes:Object)
- 모든 엘리먼트 전체를 하나의 객체로 생성 적용.
- 어트리뷰트 값 제거
- removeAttr(name:String)
7. 엘리먼트 스타일 조작하기.
- 클래스 추가
- addClass(names:String)
- 클래스 제거
- removeClass(names:String)
- toggleClass(name)
- 추가제거 번갈아가며.
- 스타일 프로퍼티 설정하기.
- css(name:String, value:String|Number|Function)
- 하나의 스타일 프로퍼티
- css(properties:Object)
- 전체 스타일을 한꺼번에~
- 스타일 프로퍼티 얻기
- css(name:String)
- 넓이,높이값 Number값으로 설정하기
- width(value:Number)
- height(value:Number)
- .css("width","500px") = .width(500)과 동일.
- 넓이,높이값 Number값으로 구하기.
- width():Number
- height():Number
- 클래스 존재여부 확인.
- hasClass(name:String):Boolean
8. 엘리먼트 컨텐츠 조작하기.
- html 컨텐츠 설정하기.(innerHTML에 값을 설정하는거와 같음)
- html(text:String)
- 확장집합의 모든 html컨텐츠값을 text로 설정.
- html 컨텐츠 얻기
- html()
- 일치하는 집합에서 첫번째 엘리먼트의 html 컨텐츠
- 매개변수 없이 사용하면 됨.(innerHTML값과 동일)
- 텍스트 컨텐츠 설정하기.
- text(content:String)
-텍스트 컨텐츠 얻기
- text():String
- thml()과는 달리 확장집합의모든 텍스트 컨텐츠를 결합한 값을 구함.
- 엘리먼트에 엘리먼트 추가하기.
- before(content:String|Element|Object)
- after(content:String|Element|Object)
- prepend(content:String|Element|Object)
- append(content:String|Element|Object)
- 확장요소에 content추가
- 엘러먼트 이동.
- insertBefore(target:String|Element)
- insertAfter(target:String|Element)
- prependTo(target:String|Element)
- appendTo(target:String|Element)
- 확장요소를 target으로 이동(삽입)
- 엘러먼트 감싸기
- wrap(wrapper:String|Element)
- wrapper으로 확장집합 요소감싸기.
- wrapAll(wrapper:String|Element)
- wrapInner(wrapper:String|Element)
- 엘러먼트 제거하기.
- remove()
- 컨텐츠 지우기
- empty()
- 엘리먼트 복수하기
- clone(copHanders:Boolean)
9. 폼 엘리먼트 값 다루기
- 값 설정하기.
- val(value:String)
- val(values:Array)
- 값 얻기
- val():String
- jQuery js 파일 연결하는 방법.
- 연결 후 hello 출력해보기.
2.셀렉터들
2-1. 기본 셀렉터
*
E
E F
E>F
E+F
E~F
E:has(F)
E.C
E#I
E[A]
E[A=V]
E[A^=V]
E[A$=V]
E[A*=V]
2-2. 위치기반 셀렉터
:first
:last
:first-child
:last-child
:only-child
:nth-child(n)
:nth-child(even|odd)
:nth-child(Xn+Y)
:even / :odd
:eq(n)
:gt(n)
:lt(n)
2-3.정의 필터 셀렉터
:animated
:button
:checkbox
:checked
:contains(foo)
:disabled
:enabled
:file
:header
:hidden
:image
:input
:not(filter)
:parent
:password
:radio
:reset
:selected
:submit
:text
:visible
3. 확장집합 컨트롤
- 갯수알아내기
- size()
- length;
- 앨리먼트 접근하기.
- [index] : 배열의 index로 접근하기.
- get(index) :
- 앨리먼트의 index값 알아내기
- index(Element)
- 추가하기
- $("div", "img") : div, img 테그 확장집합 생성.
- add(expression) : 기존 확장집합에 매개변수로 명시한 엘리먼트를 추가.
- 제거하기(필터링방법중 하나로 보면 될듯)
- not(String:Element:Array) :
- 확장집합에서 매개변수에 해당하는 요소를 제거
매개변수에는 필터 표현식만 가능.
- :not(filter)는 틀림 not()는 이미 생성된 확장집합에서 제거함.
- filter()와는 정 반대. not() 조건에 맞는 요소제거, filter()조건에 맞지 않는 요소 제거.
- 필터링
- filter(String|Function)
- 매개변수에 해당하지 않는 요소를 제거.이는 not()과의 반대.
- 찾기
- find(String)
- filter와 비슷하지만 find는 검색대상이 자식노드임.
- 부분집합 얻기
- slide(begin(Number), end(Number)
- 관계를 통한 확장집합 얻기.
- children()
- html tag node 만을 자식으로 인정, text 노드 제외
- 단, 하위의 하위 노드는 제외
- contents()
- html tag node + text node 모두 자식으로 인정.
- 단, 하위의 하위 노드는 제외
- next():확장집합
- 확장집합내의 확장 엘리먼트 바로 다음에 나오는 형제노드(일반적으로 보통 확장요소 엘리먼트 하나)
예)$(".item-a").next()
- nextAll()
- 확장집합내의 확장 엘리먼트 바로 다음에 나오는 모든 형제노드
- parent()
- 확장 집합의 확장 엘리먼트들의 바로 위 부모
- parents()
- 확장 집합의 확장 엘리먼트들의 모든 부모, 단 root는 포함되지 않음.
- prev()
- next()와 반대
- prevAll()
- nextAll()과 반대.
- siblings()
- 해당 노드의 모든 형재 노드 확장집합 반환,(단, 자신은 제외)
- 예) 형1, 형2, 누나1, 누나2(조카들은 제외됨)
- 기타
- is(Selector:String) : Boolean
- 확장집합에 매개변수로 넘어오는 Selector가 있는 경우 true, 그렇지 않은 경우 false
- end()
이전확장 집합반환
- andSelf()
이전확장요소와 합친 확장 집합요소로 만들기.
------------------------------------------------------------------------
4. HTML 엘리먼트, 엘리먼트 attribute, 엘리먼트 프로퍼티
- <img id="myImage" src="image.gif" alt="이미지" class="somClass" title="이미지다." />
- HTML 엘리먼트란?
- img같은 엘리먼트 마크업의 태그명
-엘리먼트 attribute
- id, src, alt, class, title
-엘리먼트 프로퍼티
- id, src, alt, className, alt
5. NodeList 엘리먼트, 어트리뷰트 프로퍼티(attribute properties)
- NodeList 앨리먼트란?
- html 엘리먼트 => 브라우저를 통해 => dom엘리먼트로 변환
- 어트리뷰트 프로퍼티
- NodeList에서 사용하는 프로퍼티
- id,src,alt, class,alt
- HTML의 프로퍼티와 비슷하면서 틀림.
6. 엘리먼트 프로퍼티 조작하기.
- 엘리먼트 접근
- each(iterator:Function)
-iterator내부 this = 엘리먼트
- $("img")[0] = 엘리먼트
- 어트리뷰트 값 가져오기
- attr(name:String)
- 표준화된 프로퍼티 이름(HTML,XHTML및 브라우저마다 프로퍼티 이름이 틀림, 이를위해서 표준화된 프로퍼티 제공.)
- class
- classname(브라우저에서는)
- cssFloat
- IE : styleFloat, 그외 : cssFloat
- float
- for
- maxlength
- 어트리뷰트 값 설정하기.
- attr(name:String, value:String|Object|Function)
- 단일정보.
- attr(attributes:Object)
- 모든 엘리먼트 전체를 하나의 객체로 생성 적용.
- 어트리뷰트 값 제거
- removeAttr(name:String)
7. 엘리먼트 스타일 조작하기.
- 클래스 추가
- addClass(names:String)
- 클래스 제거
- removeClass(names:String)
- toggleClass(name)
- 추가제거 번갈아가며.
- 스타일 프로퍼티 설정하기.
- css(name:String, value:String|Number|Function)
- 하나의 스타일 프로퍼티
- css(properties:Object)
- 전체 스타일을 한꺼번에~
- 스타일 프로퍼티 얻기
- css(name:String)
- 넓이,높이값 Number값으로 설정하기
- width(value:Number)
- height(value:Number)
- .css("width","500px") = .width(500)과 동일.
- 넓이,높이값 Number값으로 구하기.
- width():Number
- height():Number
- 클래스 존재여부 확인.
- hasClass(name:String):Boolean
8. 엘리먼트 컨텐츠 조작하기.
- html 컨텐츠 설정하기.(innerHTML에 값을 설정하는거와 같음)
- html(text:String)
- 확장집합의 모든 html컨텐츠값을 text로 설정.
- html 컨텐츠 얻기
- html()
- 일치하는 집합에서 첫번째 엘리먼트의 html 컨텐츠
- 매개변수 없이 사용하면 됨.(innerHTML값과 동일)
- 텍스트 컨텐츠 설정하기.
- text(content:String)
-텍스트 컨텐츠 얻기
- text():String
- thml()과는 달리 확장집합의모든 텍스트 컨텐츠를 결합한 값을 구함.
- 엘리먼트에 엘리먼트 추가하기.
- before(content:String|Element|Object)
- after(content:String|Element|Object)
- prepend(content:String|Element|Object)
- append(content:String|Element|Object)
- 확장요소에 content추가
- 엘러먼트 이동.
- insertBefore(target:String|Element)
- insertAfter(target:String|Element)
- prependTo(target:String|Element)
- appendTo(target:String|Element)
- 확장요소를 target으로 이동(삽입)
- 엘러먼트 감싸기
- wrap(wrapper:String|Element)
- wrapper으로 확장집합 요소감싸기.
- wrapAll(wrapper:String|Element)
- wrapInner(wrapper:String|Element)
- 엘러먼트 제거하기.
- remove()
- 컨텐츠 지우기
- empty()
- 엘리먼트 복수하기
- clone(copHanders:Boolean)
9. 폼 엘리먼트 값 다루기
- 값 설정하기.
- val(value:String)
- val(values:Array)
- 값 얻기
- val():String
[출처] jQuery 공부 이렇게?(이제 막~ jQuery시작하시는분들 참고 ^^) (웹앱을 만드는 사람들의 모임 (HTML5, CSS3,webapp,jQuery,웹앱)) |작성자 딴동네