html의 기본 선택자와 유사한데, jquery의 문법과 함께 사용해서 script를 적용할 대상을 지정한다.
기본형
$(html선택자).jquery선택자orMethod( script )
ex) $(#wrap).CSS.( 스타일 정의 )
jquery선택자
$( ).parent( script ) %()로 선택된 요소의 부모요소 선택
$( ).parents( script ) %()로 선택된 요소의 모든 상위 요소 선택
$( ).children( script ) %()로 선택된 요소의 모든 자식요소
$( ).prev( script ) %()로 선택된 요소의 이전요소
$( ).prevAll( script ) %()로 선택된 요소의 모든 이전요소
$( ).next( script ) %()로 선택된 요소의 다음요소
$( ).nextAll( script ) %()로 선택된 요소의 모든 다음요소
$( ).siblings( script ) %()로 선택된 요소의 모든 형제요소
$( ).first( script ) %()로 선택되는 요소중 첫번째 요소 선택
$( ).last( script ) %()로 선택되는 요소중 마지막 요소 선택
$( ).eq(index n).( script ) %()로 선택되는 요소중 index가 n번인 요소 선택
$( : gt(index)).( script ) %()로 선택되는 요소중 index가 n번보다 큰 요소 선택
$( : lt(index)).( script ) %()로 선택되는 요소중 index가 n번보다 작은 요소 선택
$( ).slice(begin_index n1, end_index n2).( script )
%()로 선택되는 요소중 index가 n1초과, n2포함되는 요소 선택
jquery Method
배열 Method
javascript Array에 있는 메서드들과 유사한 기능을 제공한다.
$( 선택자 ).each( callback ) arr의 각 요소로 callback 함수를 수행한다. (array의 .forEach() 와 같다 )
= $.each( arr선택자 , callbakc)
$.map( arr선택자, callback ) arr의 모든 요소로 callback 함수를 수행하고, callback 함수의 리턴값들을 모아 하나의 배열로 리턴한다.
$.grep( arr선택자, callback ) arr의 모든 요소로 callback 함수를 수행하고, 함수의 리턴이 true인 요소만 모아 배열로 만들어 리턴한다. ( array.filter()와 같다. )
$.inArray( data, arr, begin_index n ) 배열에서 n1자리부터 data를 찾아 첫번째 data의 자리를 number로 리턴 (array.indexOf() 와 같다.)
$.isArray( object ) object가 배열이면 true, 아니면 false( Array.isArray(obj)와 같다)
$.merge( arr1, arr2) 두개의 배열을 이어붙여 하나의 배열로 리턴
$(선택자).index( 요소선택 ) 배열에서
객체 조작
객체를 생성, 복제, 삭제, 변환 하는 문법
속성조작 Method
객체의 속성을 조작하는데, 이때 속성은 html의 구조나, html안에 내용, css 등 이 포함된다.
$( ).html( ) 대상 안에 html 타입의 내용을 넣는다. (입력내용이 태그로 인식)
$( ).text( ) 대상안에 text 내용을 넣는다.
$( ).attr( ) HTML 대상에 속성을 넣거나 가져온다. ( ) 안에 "attr", "val" 을 넣으면 속성 저장 "val"을 생략하면 리턴
$( ).prop( ) Script 객체에 속성을 넣거나 속성의 값을 가져온다.
$( ).val( ) 대상에 밸류값을 가져온다.(<tag value="val"> val을 가져옴)
$( ).css( )
$( ).addClass( )
$( ).removeClass( )
$( ).hasClass( )
attr() 은 html에 태그를 지정해 속성값을 가져오거나 설정하는데 사용해야 하고,
prop()는 script 상에서 DOM 객체의 속성값을 가져오거나 설정하는데 사용하도록 해야한다.
* prop()로 html상에 선언되어 있는(문서로 적혀있는 값)을 삭제하려고 하거나 변경하려고 하면 오류가 발생한다.
attr()로 조작해야 한다.
수치조작 Method
객체 편집 Method
*체이닝 기법
jquery에서는 하나의 객체를 선택하고 해당 객체에 method를 연속해소 적용할 수 있다.
ex) $( 선택자 ).parent().css( style A).css( style B). ...
'Jquery' 카테고리의 다른 글
2.Manipulate (0) | 2019.12.12 |
---|---|
3.Effect, Event (0) | 2019.12.12 |
5.플러그인 (0) | 2019.12.10 |
0. Jquery란 (0) | 2019.12.08 |
4. 비동기 연동(Ajax) 미완 (0) | 2019.12.08 |