티스토리 뷰

[개발]프로그래밍/jquery

[jquery] attr() - 객체 속성 추가, 삭제

좋은 블로그 2016. 10. 11. 08:34

1. attr() - 역할

속성과 연관된 모든 것을 알아내거나 작업을 수행


2. attr() - 속성 확인 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    alert($('font').attr('size'));
     
});
</script>

<body>
<font size="1">테스트1</font>
<br>
<font size="5">테스트2</font>
<br>
<font size="10">테스트3</font> </body>






◈ 결과화면




◈ 설명


<font> 태그 안에 size라는 속성 값을 alert으로 확인합니다


여러개의 <font> 태그가 존재할 경우에는 제일 처음으로 확인된 값을 alert으로 나타냅니다


만약 다른 것을 보고 싶을 경우에는 eq() , first() ... 등 객체 선택 함수를 사용합니다


3. attr() - 속성 추가 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('font').attr('color','blue'));
     
});
</script>

<body>
<font size="1">테스트1</font>
<br>
<font size="5">테스트2</font>
<br>
<font size="10">테스트3</font> </body>





◈ 결과화면




◈ 설명


attr 속성으로 color를 지정한 후에 blue를 넣으면 위와 같은 결과가 나타냅니다




4. attr() - 속성 추가 예제2

◈ 코드


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
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('font').attr('color',function(index){
        if(index==0){
            return 'green';
        }else if(index==1){
            return 'red';
        }else{
            return 'blue';
        }
    });
    
});
</script>

<body>
<font size="1">테스트1</font>
<br>
<font size="5">테스트2</font>
<br>
<font size="10">테스트3</font>
</body>




◈ 결과화면




◈ 설명


jquery 작성한 부분을 보면 알겠지만 function을 활용하여 속성을 위와 같이 지정할 수 있습니다


5. attr() - 속성 추가 예제3

◈ 코드


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
32
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('font').attr(
        {
            color:function(index)
            {
                if(index==0)
                {
                    return 'green';
                }else if(index==1)
                {
                    return 'red';
                }else{
                    return 'blue';
                }
           },
            size:10
        }
    );
});
</script>

<body>
<font size="1">테스트1</font>
<br>
<font size="5">테스트2</font>
<br>
<font size="10">테스트3</font>
</body>




◈ 결과




◈ 설명


font 속성에 color 와 size를 동시에 위와 같이 지정하여 사용할 수 있습니다




6. attr() - 속성 삭제 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('font').removeAttr('color');
});
</script>

<body>
<font size="10" color="green">테스트1</font>
<br>
<font size="10" color="red">테스트2</font>
<br>
<font size="10" color="blue">테스트3</font>
</body>




◈ 결과화면




◈ 설명


removeAttr()를 사용함으로써 color 속성을 삭제해 버려서 위와 같은 결과가 나옵니다


'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] html() , text() - 글자와 관련된 기능  (0) 2016.10.13
[jquery] css() - 객체 스타일 검사, 추가  (0) 2016.10.11
[jquery] add() - 객체 추가 선택  (0) 2016.10.11
[jquery] eq(),first(),last() - 자주 쓰이는 객체 선택  (0) 2016.10.01
[jquery] filter() - 객체 필터링 선택  (0) 2016.10.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday