jQuery 객체 클래스 속성추가(addClass), 제거(removeClass), 속성검사(attr), 제거(removeAttr(name))
■ 클래스 속성 추가
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('h1').addClass('item');
});
</script>
<div>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
<h1>Header-3</h1>
<h1>Header-4</h1>
</div>
</body>
</html>
위의 소스에 function 을 추가해보자!
<script>
$(document).ready(function () {
$('h1').addClass(function (index){
return 'class' + index;
})
});
</script>
addClass안에 function을 쓰면 class명을 indexing 할 수 있다.
■ 클래스 속성 제거
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('h1').removeClass('select');
});
</script>
<div>
<h1 class="item">Header-0</h1>
<h1 class="item select">Header-1</h1>
<h1 class="item">Header-2</h1>
</div>
</body>
</html>
요소를 확인하면 위와같이 select class 속성이 삭제 된다.
removeClass(); 이와 같이 매개변수를 아무것도 넣지 않으면 모든 class가 삭제 된다.
■ 문서 객체의 속성검사
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
// 변수 선언
var src = $('img').attr('src');
// 출력
alert(src);
});
</script>
<img src="jqueryveryeasy.jpg" />
<img src="goodlibrary.jpg" />
<img src="verysimple.jpg" />
</body>
</html>
특정 속성과 관련된 모든 기능을 수행한다.
위의 예제는 src 속성의 이름을 알아내는 간단한 attr() 예제이다.
본문의 img 테그는 3개가 존재하는데 jquery 는 첫번째 src 속성의 값을 보여준다.
또한 문서 객체에 속성을 추가할 때도 attr() 메서드를 사용한다.
1. $(selector).attr(name, value);
2. $(selector).attr(name, function(index, attr){});
3. $(selector).attr(object);
위의 예제에서 script 부분만 바꿔서 차례로 1,2,3 번 형태를 테스트 해보도록 하자.
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('img').attr('width', 200);
});
</script>
<img src="jqueryveryeasy.jpg" />
<img src="goodlibrary.jpg" />
<img src="verysimple.jpg" />
</body>
</html>
width 속성에 200 이라는 value 를 주었더니 다음과 같은 결과가 나온다.
모든 img 테그의 width 속성을 주고 값을 200으로 속성을 변경한다.
아래와 같이 응용 할 수도 있다.
<1>
<script>
$(document).ready(function () {
$('img').attr('width', function (index) {
return (index + 1) * 100;
});
});
</script>
<2>
<script>
$(document).ready(function () {
$('img').attr({
width: function (index) {
return (index + 1) * 100;
},
height: 100
});
});
</script>
■ 문서 객체의 속성 제거
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('h1').removeAttr('data-index');
});
</script>
<h1 data-index="0">Header-0</h1>
<h1 data-index="1">Header-1</h1>
<h1 data-index="2">Header-2</h1>
</body>
</html>
