01.28.

css 적용

    <script>
        $(document).ready(function(){
            var $test1=$("#test_1");
            alert($test1.css("color"));
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#test_1").css("position","absolute");
            $("#test_1").css("left","200px");
            $("#test_1").css("border","solid 4px red");
        });
    </script>
여러 css를 한번에 적용하려면 대괄호{}로 묶어줘야 함
    <script>
        $(document).ready(function(){
            $("#test_1").css({position:"absolute",left:"200px",border:"solid 4px blue"});
        });
    </script>

속성 얻어내기

    <script>
        $(document).ready(function(){
            var $test1=$("#test_1");
            alert($test1.attr("class"));
           
        });
               
    </script>

속성 제어

    <script>
       
        $(document).ready(function(){
            var $test1=$("#test_1");
            $test1.attr("class","myClass");
   
        });
    </script>

제이쿼리로 자바스크립트 명령을 사용하려면 인덱스 주소를 정확하게 지정해줘야 함
    <script> 
        $(document).ready(function(){
            var $test1=$("#test_1");
            $test1[0].className="myClass"
   
        });
    </script>

속성 제거

    <script>
        $(document).ready(function(){
            var $test1=$("#test_1");
            $test1.removeAttr("style");
   
        });
    </script>

이벤트

bind, unbind (addEventListener, removeEventListener)

    <script>
        var $info;
        var $btn_1;
        $(document).ready(function(e) {
            $btn_1=$("#btn_1");
            $info=$("#info");
           
            $btn_1.click(function(){
                $info.html($info.html()+"마우스가클릭되었습니다.<br>");
            })
        });
       
    </script>
함수를 외부로 뺄수도 있음
    <script>
        var $info;
        var $btn_1;
        $(document).ready(function(e) {
            $btn_1=$("#btn_1");
            $info=$("#info");
           
            $btn_1.click(onClick);
        });
       
        function onClick(){
            $info.html($info.html()+"마우스가클릭되었습니다.<br>");
        }
    </script>

    <script>
        var $info;
        var $btn_1;
        $(document).ready(function(e) {
            $btn_1=$("#btn_1");
            $info=$("#info");
            $btn_1.bind("click",onClick);
        });
       
        function onClick(){
            $info.html($info.html()+"마우스가클릭되었습니다.<br>");
        }
    </script>

    <style>
        body
        {
            font-size: 9pt;
        }
        #info{
            border:1px solid #000000;
                       
        }
        #btn_target{
            width:300px;
            height:100px;
        }
       
    </style>
    <script type="text/javascript"  src="../libs/jquery-1.7.1.min.js"> </script>
    <script>
        var $info;
        var $btn_1;
        var $btn_2;
        $(document).ready(function(e) {
            $btn_1=$("#btn_1");
            $btn_2=$("#btn_2");
            $info=$("#info");
           
            $btn_1.bind("click",onAdd);
            $btn_2.bind("click",onRemove);
        });
       
        function onAdd(){
            addInfo("이벤트등록시작");
            $("#btn_target").bind("mouseover",onOver);   
        }
       
        function addInfo(str){
            $info.html($info.html()+str+"<br>");
        }
       
        function onOver(){
            addInfo("마우스오버되었습니다.");
        }
       
        function onRemove(){
            addInfo("이벤트등록되지않습니다.");
            $("#btn_target").unbind("mouseover",onOver);
        }
    </script>

애니메이션

제이쿼리에서 애니메이션을 적용하려면 플러그인을 먼저 설치해야 한다

easing

<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>

show, hide

    <script>   
        $(document).ready(function(){
            var $img1=$("#test_1");
            $("#btn_show").bind("click", function(){
                $img1.show(3000,"easeOutCubic",function(){
                    alert("show완료");
                });
            });
            $("#btn_hide").bind("click",function(){
                $img1.hide(3000,"easeInCubic",function(){
                    alert("hide완료");
                });
            });
        });       
    </script>

toggle

    <script>   
        $(document).ready(function(){
            //  움직일 대상 찾기.
            var $img1 = $("#test_1");
            $("#btn_show").bind("click", function(){
                $img1.toggle(3000, "easeOutCubic", function(){
                    alert("토글기능완성");
                });
            });
        });       
    </script>

slideUp, slideDown

    <script>
        $(document).ready(function(){
            var $test1=$("#test_1");
            $("#btn_show").bind("click", function(){
                $test1.slideDown(1000,"easeOutCubic");
            });
            $("#btn_hide").bind("click", function(){
                $test1.slideUp(1000,"easeOutCubic");
            });
        });               
    </script>
slideToggle
    <script>
        $(document).ready(function(){
            var $test1=$("#test_1");
            $("#btn_show").bind("click", function(){
                $test1.slideToggle(1000,"easeOutCubic");
            });
        });               
    </script>