学习JQuery

  <script type="text/javascript">

        $(function () {
            //改变class为one的css样式
            $("div.one").css("color", "red");
            $("div.one").css("font-size", "8pt");
            //指定div淡入淡出
            $("#two").fadeOut("9000");
            $("#two").fadeIn("9000");
            //改变文字
            $("#btn").click(function () {
                $("#three").html("文字已经改变");

            });
            //动画效果
            $("#btn1").click(function () {
                $("#donghua")
                .animate({ width: 50 }, 3000)
                .animate({ height: 50 }, 3000)
                .animate({ right: 300 }, 3000)
                .animate({ bottom: 200 })
                .animate({ left: 300 })
                .animate({ top: 300 })
                .fadeOut()
                .slideDown()
                .slideUp()
                .fadeIn("slow"),
                function () {
                    $("#donghua").html("动画结束");
                }
            });
            //使用标记改变效果
            //   $("div").css("color", "yellow");
            //一次获取多个元素
            //    $('#btn,#btn1,.one').css("color", "#DEFDDE");
            //多层次获取元素
            $("body form div input").css("color", "#CCCCCC");
            //根据元素属性获取元素
            $("div[id]").css("font-size", "20pt");
            //使用过滤器获取元素
//:first:获取第一个元素     :last获取最后一个元素  :not(filter)除指定元素外   :even偶数序号   :odd奇数序号   :eq(index)指定序号
//:gt(index)指定序号后的    :lt指定序号前的   :header标题   :animated动画元素   :contains指定字符串　　　:empty空
//:has(selector)拥有子孙元素的元素
//:parent非空元素
//            $("#five ul li").css("font-size", "12pt");
            $("#five ul li:first").css("color", "red");
            $("#five ul li:odd").css("color", "yellowgreen");
            //获取表单元素
            $("#six").html(

                "input元素有" + $(":input").length + "个<br/>" +
                "button 元素有" + $(":button").length + "个<br/>"

                );
            //过滤表单元素
            //$("input:text:enabled").val("能输入");
            //$("input:text:disabled").val("不能输入");

            //获取指定元素号的标记
            $("#five ul li").eq(2).css("font-size", "30pt");
            //向指定标记追加内容
            $("#txt1:text").val("追加的内容");
            $("#seven").append("这是追加的内容");
            
        });
     
    </script>

 <div class="one" style="width: 100%">
            <input id="btn" type="button" value="改变文字" />
            <input id="btn1" type="button" value="动画效果" />
        </div>

        动画效果 
        <div class="one">控制class为one的css样式</div>
        <div id="two" class="one">淡如淡出</div>
        <div id="three" class="one">
            改变文字
        </div>
        <div id="donghua" class="one">
            动画效果
        </div>

        <div id="five" class="one" style="height: 120px;">
            <ul>
                <li>第一行</li>
                <li>第二行</li>
                <li>第三行</li>
                <li>第四行</li>
                <li>第五行</li>
            </ul>
        </div>
        
        <input type="text" id="txt1" />
        <input type="text" id="txt2" style="width:200px;" onchange="abc()" />
        

        
        <div id="seven" class="one">
            </div>