2013년 10월 14일 월요일

[12주차 2일] JQuery - 기본 함수

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
        // jQuery의 대부분의 함수가 리턴하는것은 앨리먼트가 아닌,
        // 앨리먼트를 담은 배열이를 명심할것!!!!
        // $("*"), $(".class"), $("h1").....
        console.log($("*").length);
        // jQuery에서 값을 설정하는 방법
        // 1. 값을 직접준다.
            //$('*').css('color', 'red');
            //$('*').css('border', '1px blue solid');
           
            // 2. 값을 리턴하는 함수를 준다.
            /*
            $("*").css("color", function(index) {
            if ((index % 2) == 0)
            return "red";
            else
            return "blue";
            });
            $("h1").css("border", "1px solid black");
            */
           
            // 3. 속성명과 값을 객체에 포장하여 준다.
            $("h1").css({
            color: function(index) {
                if ((index % 2) == 0)
                return "red";
                else
                return "blue";
                },
                border: "1px solid black"
            });
        });
    </script>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h1>Lorem ipsum</h1>
    <h1>Lorem ipsum</h1>
    <h1>Lorem ipsum</h1>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum</p>
    <div>Lorem ipsum</div>
    <div>
    <div>
    <p>Lorem ipsum</p>
    </div>
    </div>
</body>
</html>

댓글 없음:

댓글 쓰기