[6] jQuery - Attribute(속성) , Method(메서드)

[1] jQuery 기본개념

 

$( function () {}); → window.onload 같은 역활

 

$ ( function () {

$ ( ' selector ' ).css( 'attribute' , 'value') ;

$ ( ' * ' ).css( ' color ' , ' red ' );

});

 

selector : tag , id(#) , class(.) , attribute([]) , filter(:) 

[2] jQuery 배열 관리

 

- each 메서드 ( = for반복문 )

 

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

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

 

ex) h1태그가 여러 개 있을 경우

    선택자로 여러 문서 객체를 선택할 때 jQuery 배열객체가 생성된다

 

① <script>

$('h1').each ( function ( index , item ) {

$(this).addClass( " style - index " );

});

</script>

<style>

.style - 1 { color : --- ; }

.style - 2 { color : --- ; }

</style>

→ 각 태그에 스타일을 다르게 적용 할 수 있음

 

② <script>

$( function () {

var array = [ { name : google, link : www.google.com },

{ name : daum , link : www.daum.net } ]

 

$.each ( array , function ( index , item ) {

var output = '';

output += ' <a href=" '

output += + item.link +

output += ' "> '

output += + item.name + 

output += ' < /a > '

document.body.appendChild(output);

});

});

   </script>

 

[3] 문서 객체 탐색 메서드

 

① filter() ★★

 

- filter ( 'selector' ) → selector :even , :odd , :first , 

- filter ( function () {});

 

$( function () {

 $( selector ).filter ( ' :even ').css( 'backgroundColor' , 'red') ;

});

 

$ ( function () {

$(selector).filter ( function ( index ) {

 return index % 3 == 0

}). css ( 'color' , 'red' );

});

 

→ filter의 매개변수에 함수가 들어가면 each() 메서드처럼 작용

selector 중 3번째마다 color속성을 red로 적용

 

 

② end() : 필터링되기 이전의 상태로 변환

 

$( function () {

 $( selector ).filter ( ' :even ').css( 'backgroundColor' , 'red') .end()

.filter( ':odd') .css ( 'backgroundColor', 'blue' ) ;

});

 

 

③ add() : 문서객체를 추가로 선택

 

$( function () {

 $( selectorA ).filter ( ' :even ').add(selectorB).css( 'backgroundColor' , 'red') ;

});

④ eq(number) : 특정위치에 존재하는 문서 객체선택 

⑤ first() : 첫번째에 존재하는 문서 객체선택 

⑥ last() : 마지막에 존재하는 문서 객체선택 

⑦ is(selector) : 해당 문서객체의 특징을 판별 true or false

⑧ find() : 특정 태그를 선택   ★★

- $ ( function () {

 $('body').find('div').css('background','red');

});

body 태그내에서 div 태그를 찾아내 배경을 red 로 적용

[4] 문서 객체 조작

- addClass()  해당 문서 객체에 class속성 추가

- removeClass()  해당 문서 객체에 class속성 제거

- toggleClass() 

- $(function (){

$(selector).addClass('class-1');

});

[5] 문서 객체의 속성 검사 ★★

- attr() 속성과 관련된 모든 기능을 수행

① $(seletor).attr('src') → 해당 객체의 src속성값 출력  

② $(seletor).attr( attribute , value ) → 해당객체의 속성에 속성값 적용

→ $(selector).attr ( 'width' , 300 );

③ $(selector).attr( attribute , function () {});

→ $('section').attr( 'class' , function (index) { 

 return 'class -' + index

});

section 순서에따라 class -0 , class -1 ... 클래스 추가

④ $(selector).attr(object);

→ $('img').attr({

width : function (index) {

return ( index + 1 ) * 100

},

height : function () {

return ( index + 1 ) * 100

}

});

img태그의 순서에따라서 너비와 높이가 다르게 적용

- removeAttr(attribute) : 문서 객체의 속성 제거

[6] 문서 객체 스타일추가 ★★

- $(selector).css( name , value );

→ $( 'h1' ) . css ( 'color' , 'red' );

- $(selector).css( name , function ( index ){} );

→   var color = [ red , yellow , blue ]

$( 'img' ). css ( 'color' , function ( index ){

 return color[index];

});

- $(selector).css( object );

→ $( 'img' ) .css ( { 

border : 1px solid #aaa ,

backgroundColor : 'red'

});

[7] 문서 객체의 내부 관련 메서드

- html()

: html태그 인식 o

  html() : 문서 객체의 내용물 출력

  html(value) : 문서 객체 내용 추가

→ $('body').html( ' <h1> Hello </h1> ');  

  html(function( index , html ){});

→ 매개변수 html 은 메서드 적용전의 객체의 html내용

- text()

: html태그 인식 x

  text() : 문서 객체의 내용물 출력 

  text(value) : 문서 객체 내용 추가

  text(function( index , text ){});

- remove() : 문서 객체 제거

- empty() : 문서 객체 내부를 비움

- 문서 객체 생성

① $ ( ' <h1></h1> ' ).html( ' Hello~ ' ).appendTo( ' body ' )

② $ ( ' <h1> Hello ~ </h1> ' ).appendTo( ' body ' )

③ $ ( '<img/>' , { src : ' picture.jpg' ,

       width : 300 ,

 height : 300

}).appendTo( ' body ' );

④ $ ( '<img/>' ).attr( { src : ' picture.jpg' ,

  width : 300 ,

  height : 300

}).appendTo( 'body' );

[8] 문서 객체 삽입

- $(A).appendTo(B) : A를 B의 뒷부분에

- $(A).prependTo(B) : A를 B의 앞부분에

- $(A).insertAfter(B) : A를 B의 뒤에 ( 외부공간 )

- $(A).insertBefore(B) : A를 B의 앞에 ( 외부공간 )

- $(A).append(B) : B를 A의 뒷부분에

- $(A).prepend(B) : B를 A의 앞부분에

- $(A).after(B) : B를 A의 뒤에 ( 외부 )

- $(A).before(B) : B를 A의 앞에 ( 외부 )

→   var h1 = '<h1> header - 1 </h1>'

var h2 = '<h2> header - 2 </h2>'

$('body').append( h1 , h2 , h1 , h2 );

$('body').append( function ( index ) { });