attr('속성', '속성값');
attr()은 우리가 태그안에 부가적으로 쓰는 src="", alt="", title="" 등의 값을 변경해주는 기능을 제공한다.
예를 들어
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney"/>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney"/>
위의 src의 속성값인 /material/images/jQuery/disney.jpg를 다르게 변경해주거나 alt의 속성값인 disney를 변경할 수 있게 한다.
위 코드의 img값을 바꿀려면
var myimage = $('.mtimage');
myimage.click(function(){
myimage.attr('src', '변경할 이미지경로');
});
이렇게 하면 id값이 myimage인 것을 클릭하면 src의값이 변경된다.
선택한 요소의 값을 가져올 수 도 있다.
예시 .attr(attributeName)
$('div').attr('class');
는 div 요소의 class속성의 값을 가져온다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var a = $( 'h1' ).attr( 'class' );
$( 'span' ).text( a );
} );
</script>
</head>
<body>
<h1 class="hello">h1의 class 값은?</h1>
<p>h1의 class 값은 : <span></span></p>
</body>
</html>
www.tcpschool.com/examples/tryit/tryhtml.php?filename=jq_basic_syntax_01
©TCP-tryWWW
jQuery Syntax function func() { addAttribute(); // 아이디가 "para"인 HTML 요소에 속성을 추가함. createElement(); // 아이디가 "para"인 HTML 요소를 생성함. } function createElement() { var criteriaNode = document.getElementById("text
www.tcpschool.com
input 요소에 placeholder 속성 추가하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
input { font-size: 30px; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'input' ).attr( 'placeholder', 'Input your address' );
} );
</script>
</head>
<body>
<input type="text">
</body>
</html>
- 속성(attribute)을 제거하고 싶다면 .removeAttr()을 사용합니다.
- 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 때는 .css()를 사용합니다.
- .prop()는 자바스크립트 입장에서의 속성값을 가져오거나 추가합니다.