attr()_문서객체 속성추가
이 메소드는 아래 3가지의 형태로 쓰인다.
(1) $(selector).attr(name,value);
(2) $(selector).attr(name, function (index, attr) {});
(3) $(selector).attr(object);
* 단, 클래스 속성은 addClass()로 추가한다. 아래 두 가지의 형태가 있다.
(1) $('h1').addClass('item')
(2) $('h1').addClass(function (i) { return 'class_' + i; }
* attr를 쓴 html코드예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("img").attr('width', 500);
$("h1").attr("id", function (index) {
return 'id_' + (index + 1);
});
console.log(document.body);
});
</script>
<title> Roomy's experimentation</title>
<meta name="author" content="roomy"/>
</head>
<body>
<img src="pic.png"/>
<h1> I am tag1 </h1>
<h1> I am tag2 </h1>
<h1> I am tag3 </h1>
<h1> I am tag4 </h1>
</body>
</html>
| cs |
1. 참고로 DOCTYPE 태그는 HTML의 버전 등을 명시한다. 웹표준을 위해 쓰는게 좋다.
2. HTML5가 기준이면 <!DOCTYPE HTML>만 써주면 된다.
3. img태그를 가진 객체에 width라는 속성을 추가했다.
4. h1 태그에 id라는 속성을 추가하고 함수로 각각에 id의 값부여. id_1, id_2...
5. console.log(document.body)를 쓰면 바뀐 body의 내용이 콘솔창에 보여진다.
6. 콘솔창에는 아래와 같이 뜬다.
1
2
3
4
5
6
7
8
9
|
<body>
<img width="500" src="pic.png"></img>
<h1 id="id_1"> I am tag1 </h1>
<h1 id="id_2"> I am tag2 </h1>
<h1 id="id_3"> I am tag3 </h1>
<h1 id="id_4"> I am tag4 </h1>
</body>
</body>
| cs |
* 이외에도 문서객체 추가와 관련된 메소드 몇가지
- css() : 스타일과 관련된 모든 기능수행.
- html() : 문서객체 내부의 글자와 관련된 모든 기능수행, HTML태그도 인식
- text() : 문서객체 내부의 글자와 관련된 모든 기능만 수행
사용법과 형태는 attr()메소드와 거의 유사하다.
* 문서객체를 제거하는 메소드들
- remove() : 문서객체를 제거한다.
- empty() : 문서객체 내부를 비운다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("img").attr('width', 500);
$("h1").attr("id", function (index) {
return 'id_' + (index + 1);
});
$('div').empty();
$('h1').last().remove();
console.log(document.body);
});
</script>
<title> Roomy's experimentation</title>
<meta name="author" content="roomy"/>
</head>
<body>
<img src="pic.png"/>
<h1> I am tag1 </h1>
<h1> I am tag2 </h1>
<div>
<h1> I am tag3 </h1>
<h1> I am tag4 </h1>
</div>
</body>
</html>
| cs |
1. 위 코드에서 remove와 empty만 추가했다.
2. div로 지정된 I am tag3와 4는 div내부를 비우므로 사라진다.
3. h1태그의 마지막 태그인 I am tag2는 remove하므로 사라진다.(3, 4는 div로 비워짐)
4. last()는 filter 중 하나이다. 같은 태그의 마지막을 가리킨다. first()는 첫번째.
5. 콘솔창에는 아래와 같이 뜬다.
1
2
3
4
5
6
|
<body>
<img width="500" src="pic.png"></img>
<h1 id="id_1"> I am tag1 </h1>
<div></div>
</body>
</body>
| cs |
댓글 없음:
댓글 쓰기