잊지 않겠습니다.


jQuery를 이용한 css 변경

선택된 DOM object에서 .css(attribute, value) 로 변경이 가능하다.
신기하고 재미있는 기능들이 많은 것 같다. 여러모로.

<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 400px;
        }
        p a
        {
            color:Red;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('a').click(function() {
                $('#box').slideDown();
                $('p a').css('color', 'blue');
            });
        });  
    </script>       
    </head>
    <body>      
        <div id="box" style="display:none"></div>
        <a href="#">Click Me!</a>
       
        <br/>
       
        <p>
         * Sizzle CSS Selector <a href="#">Engine</a> - v0.9.3Copyright 2009, The Dojo Foundation*  Released under the MIT, BSD, and GPL Licenses.*
           More information: http://sizzlejs.com/
        </p>
       
        <input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>       
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tbody id="tableContext">
            </tbody>
        </table>
    </body>
</html>

Day 3까지 보니. 코드를 어떻게 적어야지 될지 약간의 감이 오는 것 같다. ^^
<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 300px;
            position : relative;
        }
        p a
        {
            color:Red;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('#box').click(function() {
                $(this).animate({
                    "left" : "300px"
                    }, 4000);      
            $(this).animate( { "width" : "50px" } );
            });
        });
    </script>       
    </head>
    <body>      
        <div id="box"></div>
        <a href="#">Click Me!</a>
    </body>
</html>

일단, jQuery에 대한 기본적인 function 사용법을 제대로 익히는 것이 가장 필요한 일인듯.

Posted by Y2K
,