1. 문서 객체 클래스 속성 추가
- 문서 객체에 클래스 속성을 추가 할 때 addClass() 메서드를 사용
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
$('h1').addClass('item');
*/
$('h1').addClass(function(index) {
return 'class' + index;
});
});
</script>
</head>
<body>
<h1>Header0</h1>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
2. 문서 객체 클래스 속성 제거
- 문서 객체의 클래스 속성을 제거할 때는 removeClass() 메서드를 사용
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').removeClass('select');
});
</script>
</head>
<body>
<h1 class="header">Header0</h1>
<h1 class="header">Header1</h1>
<h1 class="header">Header2</h1>
</body>
3. 문서 객체의 속성 검사
- 문서 객체의 속성과 관련된 모든 기능은 attr() 메서드를 사용하여 처리
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var src = $('img').attr('src');
alert(src);
});
</script>
</head>
<body>
<img src="a.jpg" />
<img src="b.jpg" />
<img src="c.jpg" />
</body>
4. 문서 객체 속성 추가
- 문서 객체의 속성을 추가할 때도 attr() 메서드를 사용
- $(selector).attr(name, value);
- $(selector).attr(name, function(index, attr) {});
- $(selector).attr(object);
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').attr('width', 200);
});
</script>
</head>
<body>
<img src="chrysanthemum.jpg" />
<img src="desert.jpg" />
<img src="hydrangea.jpg" />
<img src="lighthouse.jpg" />
<img src="jellyfish.jpg" />
<img src="tulip.jpg" />
</body>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').attr('width', function(index) {
return (index + 1) * 100;
});
});
</script>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').attr({
width: function(index) {
return (index + 1) * 100;
}, height: 100
});
});
</script>
5. 문서 객체 속성 제거
- 문서 객체의 속성을 제거할 때는 removeAttr(name) 메서드를 사용
- removeAttr() 메서드를 사용하면 모든 클래스 속성이 한번에 제거 됨
- removeClass() 메서드를 사용하면 여러 개의 클래스 속성 중 선택적으로 제거
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').removeAttr('data-index');
});
</script>
</head>
<body>
<h1 data-index="0">Header0</h1>
<h1 data-index="1">Header1</h1>
<h1 data-index="1">Header2</h1>
</body>
6. 문서 객체 스타일 검사
- 문서 객체의 스타일 속성과 관련된 작업은 css() 메서드를 사용하여 처리
<style type="text/css">
.first { color: red; }
.second { color: pink; }
.third { color: blue; }
</style>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var color = $('h1').css('color');
alert(color);
});
</script>
</head>
<body>
<h1 class="first">Header0</h1>
<h1 class="second">Header1</h1>
<h1 class="third">Header2</h1>
</body>
7. 문서 객체 스타일 추가
- 문서 객체에 스타일을 추가할 때 css() 메서드를 사용
- $(selector).css(name, value);
- $(selector).css(name, function(index, style) {});
- $(selector).css(object);
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').css('color', 'red');
});
</script>
</head>
<body>
<h1>Header0</h1>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
<h1>Header4</h1>
<h1>Header5</h1>
</body>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var color = ['red', 'gray', 'blue', 'purple', 'yellow'];
$('h1').css('color', function(index) {
return color[index];
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var color = ['red', 'gray', 'blue', 'purple', 'yellow', 'white'];
$('h1').css({
color: function(index) {
return color[index];
},
backgroundColor: 'black'
});
});
</script>
'Web > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 문서 객체 조작 - #2 (0) | 2013.11.28 |
|---|---|
| 제이쿼리(jQuery) 선택자 - #2 (0) | 2013.11.26 |
| 제이쿼리(jQuery) 선택자 - #1 (2) | 2013.11.26 |
| 제이쿼리(jQuery) 기본 (0) | 2013.11.25 |