attr : 속성 값 가져오기, 속성 추가 / removeAttr : 속성 제거

속성(attribute) 값을 가져오거나, 추가하거나, 삭제할 수 있다.

 

.attr( 속성이름 ) : 속성의 값을 가져온다.

.attr( 속성이름, 추가할 속성 값 ) : 속성의 값을 추가한다.

.removeAttr( 속성이름 ) : 속성을 삭제한다.

 

 

    <script>
        $(function(){
            console.log($('a').attr('href'));
            $('a').attr('href','https://www.google.co.kr');
        })
    </script>
    
    
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>

$('a').attr('href') : a 태그의 href 속성

a 태그의 href 속성값을 console.log로 출력해서 확인했다. 속성값으로 지정된 #이 출력된다.

$('a').attr('href','https://www.google.co.kr') : a태그의 href를 google url으로 변경한다.

 

 

            $('a').attr('target','_blank');
            console.log($('a').attr('target')); //_blank

a 태그의 target 속성을 _blank 으로 추가하였다.

존재하지 않았던 target 속성이 생긴 것이고, 출력으로 target 속성 값을 확인했다.

 

 

 

            $('input').attr('value','test');
            console.log($('input').attr('value')); //test

input 태그의 value값을 test로 변경하고 console에서 value 값을 출력했다.

 

 

 

            $('a').removeAttr('target');
            console.log($('a').attr('target'));

removeAttr으로 속성을 삭제할 수 있다. target 속성값을 출력했을 때 속성이 제거되어 없기 때문에 undefined가 확인된다.