not set

jQuery 객체 클래스 속성추가(addClass), 제거(removeClass), 속성검사(attr), 제거(removeAttr(name)) 본문

javascript/jQuery

jQuery 객체 클래스 속성추가(addClass), 제거(removeClass), 속성검사(attr), 제거(removeAttr(name))

다크곰 2012. 2. 2. 21:27

■ 클래스 속성 추가

<!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>


결과

본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문
저작자표시

'javascript > jQuery' 카테고리의 다른 글

jQuery html(), text()  (0) 2012.02.03
jQuery 문서 객체의 스타일  (0) 2012.02.03
jQuery find()  (0) 2012.01.31
jQuery 객체 확장 $.extend  (0) 2012.01.31
jQuery 필터 선택자  (0) 2012.01.17
'javascript/jQuery' Related Articles more