jQuery 메소드

공수래 2013.08.02 11:35 조회 수 : 2351



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


출처:http://cafe.naver.com/webappdev/1103

  • 인기글
  • 최근글
  • 최근댓글