jQueryday04补充(回顾 get eq方法 动画效果的展示 初步自定义)

       /*
            jQuery是js的一个库 封装一些我们常用的功能方便我们去调用
            提高我们的开发效率
            jQuery的基本使用
                1、引包
                2、两种方式
                    $(document).ready(function(){});
                    $(function(){});
           使用
                mouseenter mouseleave
                1、获取事件源
                2、事件
                3、事件处理程序
           jQuery选择器
            #、.、element、*、，
            空格、>、+、~
            :eq(index) :lt(index) :gt(index) :first :last :even :odd
            [attr] [attr=value] [attr!=value] [attr^=value]
            [attr$=value] [attr*=value] [attr][attr1]
            .eq(index) .parent() .children() .siblings()
            .last() .first() .find()
           Dom->jQuery 对象 $(document) $(this) 先获取节点后用$包裹
           jQuerty->Dom 对象  $("div")[0] $("div").get(0)


        */
       $(document).ready(function () {
           //.eq(index) 获取到的是jQuery对象
           //.get(index) 获取到的是dom对象
           //
           $("div").eq(0).css({
              //这里的键值对  键可以带单引号或者双引号 也可以不带
              //一些不合法的变量名 可以使用加引号的方式来声明
               "font-size":"40px",
           });
           //获取的是dom
           // 语法错误 因为.get(index) 获取的是dom对象 而dom对象没有css方法
          // $("div").get(0).css("background-color","red");
          var $div = $("div").eq(0);
          console.log($div);
          var divd = $("div").get(0);
          console.log(divd);
       });

    <script>
        /*
            基本动画效果 显示和隐藏
            $("div").show() 显示
            $("div").hide() 隐藏
            滑动效果
            $("div").slideDown() 下拉显示
            $("div").slideUp() 上拉
            $("div").slideToggle() 切换
            淡入淡出效果
            $("div").fadeIn() 淡入
            $("div").fadeOut() 淡出
            $("div").fadeToggle() 淡入淡出切换
            $("div").fadeTo()   设置不透明度
            自定义动画
            $("div").animate();
            $("div").stop();
         */
        $(document).ready(function () {
            $("div").css({
                "display": "none",
                "height": "200px",
                "width": "300px",
                "background-color": "red",
            })
            $("button").eq(0).click(function () {
                //让div展示出来
                //show()

                //$("div").show("3000");//毫秒为单位
                // $("div").show("fast");
                //$("div").show("slow");
                //$("div").show("normal");
                //第一个参数是动画时长 可以是数字或者是字符串
                //第二个参数是动画执行完成后要执行的函数
                $("div").show("1100",function () {
                  $("div").hide(1000);
                });

            });
            $("button").eq(1).click(function () {
                //让div隐藏
                $("div").hide();
            });
            $("button").eq(2).click(function () {
                //让div下拉
                /*
                    三个参数的时候
                    第一个参数是 动画执行的时长
                    第二个参数是 动画效果
                    第三个参数是 动画执行完成后要执行的函数
                    linear匀速
                 */
                $("div").slideDown(2000,"linear",function () {

                });
            });
            $("button").eq(3).click(function () {
                //让div上拉 swing是先慢后快
                $("div").slideUp(2000,"swing",function () {

                });
            });
            $("button").eq(4).click(function () {
                //让div切换 就是上下拉切换
                $("div").slideToggle();
            });
            $("button").eq(5).click(function () {
                //淡入
                $("div").fadeIn();
            });
            $("button").eq(6).click(function () {
                //淡出
                $("div").fadeOut();
            });
            $("button").eq(7).click(function () {
                //淡入淡出切换
                $("div").fadeToggle();
            });
            $("button").eq(8).click(function () {
                //设置不透明度
                $("div").fadeTo(2000,0.5);
            });
            //自定义动画
            $("button").eq(9).click(function () {
                //设置不透明度
                $("div").animate({
                   "width":"500px",
                   "height":"600px",
                  /* "background":"gold",*/

                },1000,"linear",function () {

                });
            });

            $("#11").click(function () {
                alert(1);
            });


        });

    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>下拉</button>
    <button>上拉</button>
    <button>切换</button>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>
    <button>设置不透明度</button>
    <button>自定义</button>
    <input type="button" value="xia" id="11"/><!--input不是button不参与but的序号-->
    <div>

    </div>
</body>