[jquery] attr : 태그속성 SET / GET - each 반복문 / remove /

1. <SET> attr 로 하나하나씩 속성주기

 

$(태그). attr ( A, B )

:  가져온 태그의 A속성에 B 를 넣어라 ( SET ) 

 

 

  $("img:first").attr ("src","blackcoffee.gif");
: 가져온 img 태그의 src 속성에 저 속성값을 넣어라. :  src = "balckcoffee.gif"  사진 가져와짐 

 

  $("img").attr("width", "100");
  $("img").attr("height", "100");
  $("img:first").attr("alt","쥬스 사진입니다");

2. 객체형태로 만들어서 한 방에 set 할 수도 있다.

 

 $("img:last").attr (

{
  src : "blackcoffee.gif",
  alt : "커피사진입니다.",
  width : "200",
  height : "200"
  }

);

 

 

<GET>
$('img:first').attr("src")
: img 태그에서 속성 src 의 속성값을 가져와라 => "blackcoffee.gif" 

 

[ 태그 여러 개 일때 ] 
alert($('img').attr("src"));
: img 태그의 src 속성 가져와 
=> attr는 복수개에서 사용시 첫번째거 하나만 가져온다

=> 반복문으로 뽑아야함

 ( eq 함수 활용! ( index ) )

 

1. eq 인덱스 사용 해서 뽑기 

 

-  $('img').length

: 모든 img 태그 찾아서 몇개인지 가져와줌 

 

for(let i = 0; i < $('img').length; i++){
alert( $( 'img:eq(' + i + ')').attr("src")); }

 

- i 는 변수므로 따옴표 끊어서 처리해야함

 

2. jquery전용 반복문 each  ( foreach구문과 비슷 ) 

:  each ( function( i ){ 반복할문장 i 번만큼 } )

 

- i 가 몇번인지 안줘도됨.  값이 있는 동안을 의미 

$('img').each( function(i) {
  alert( $('img:eq('+ i +')').attr("src"));  })
: img 태그인거 찾아서 있는동안, i 번 인덱스에 해당하는 것의 src를 알려줘. 

< JS (돔방식) this 사용 >
$('img').each(function(i){
  alert( this.src );  })

: img 태그 찾아서 매번 현재 태그의 src 를 가져와줘

 

< jquery 로 this 사용 >

- $(    )  에 넣어주면 
JS 객체를 jquery 객체로 가져오는 것!  

this   ==   $(this)   

$('img').each(function(i){
  alert( $(this).attr("src") );  })
: 현재 태그에서 속성이 src 인거 가져와줘

 

 

[ 속성 제거 ] 
: removeAttr 

- 지울땐, 복수개여도 반복문 필요없음 ( 다 지움 ) 
$("img").removeAttr("src");

: 모든 img 태그에서 src 속성 지워줘. 

 

 

- attr를 이용해 태그의 각종 속성들을 Set /Get / remove 할 수 있다.

하지만, Set 으로 속성을 줄 때, 하나씩 만 줄 수있다. ( 전체적용 X )

 

class 같은 속성은 같은 태그에 한 방에 다 줘놓고, 조종하면 편한데, 

attr 로는 하나하나 줘야 해서 불편하다. 

 

=> class 는 따로 한방에 모든태그에 속성 추가하는걸 만들어둠. 

 

< addClass > 

$("h1").addClass("box");

: h1 모든태그에 class 속성값 box 추가해줘 

 

< removeClass >
$("h1").removeClass("box");
: h1 모든태그에 class 속성값 box 삭제해줘