잊지 않겠습니다.

jQuery에서 DOM 객체의 사용

기타 자료들 2009. 1. 23. 16:03
jQuery에서는 다양한 방법으로 DOM 객체를 선택할 수 있다. Tag Name, Class, Name, Id 와 같이 document. 으로 선택할 수 있는 모든 객체를 선택 가능하다. 

I. Tag Name을 이용한 객체 선택 방법

1. $('TAG NAME') 을 이용한 전체 선택

2. $('TAG NAME:(POSITION)')을 이용한 first, last 객체 선택
$('li:first')
$('li:last')
$('li:even')
$('li:odd')

3. nth-child(index) 를 이용한 array와 비슷한 방법으로 객체 선택
$('li:nth-child(3)')

4. attribute를 이용한 객체 선택
$('li a[title=title]')

$(function() {
    $('a').css('color', 'Black');
    $('li a[title=title]').css('color', 'Red');
    $('li:nth-child(3)').css('color', 'Green');
    $('li:first').css('color', 'Yellow');
});



II. DOM 객체의 추가 및 삭제

appendTo, remove 를 통해서 새로운 object의 추가가 가능하다. 각 객체에 대한 선택이 매우 자유로운 편이다.

$(function() {
    var i = $('#nav li').size() + 1;
    console.log(i);

    $('a#add').click(function() {
        $('<li>' + i + '</li>').appendTo('#nav');
        i++;
        console.log(i);
    });

    $('a#remove').click(function() {
        $("#nav li:last").remove();
        i--;
        console.log(i);
    });
});

저작자표시 비영리 (새창열림)
Posted by Y2K
,

jQuery for absolute Beginner - Video Series 2.

기타 자료들 2009. 1. 23. 01:55

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
,

jQuery for absolute Beginner - Video Series 1.

기타 자료들 2009. 1. 23. 01:43

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

에서 재미있는 비디오 강습을 해서 짬짬히 살펴보고 있는 중이다.
가장 많이 사용되고 있는 javascript framework 중 하나이고, asp.net과 가장 같이 잘 사용될 수 있는 javascript framework이기 때문에 더욱더 관심이 가는 내용.

<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;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('a').click(function() {
                $('#box').fadeOut('fast');
            });
        });  
    </script>       
    </head>
    <body>      
        <div id="box">
        <a href="#">Click Me!</a>
        </div>
        <br/>
               
        <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>

하나의 박스가 사라지는 내용과 table에 하나씩 추가하는 내용이 있는 소스.
저작자표시 비영리 (새창열림)
Posted by Y2K
,

티스토리툴바