jquery引入与动画

<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="jquery.js"></script>
<script>
    // 入口函数 jquery简写($) 确保所有文件先加载完成,再来加载js文件
    $(function () {
        alert('hahaha')
    })
</script>
========================

<script src="jquery.js"></script>
    <script>
        $(function () {
            //css选择器,jq中同样适用
            // console.log($('div'));
            // console.log($('.box'));
        })

        // 筛选选择器
        // ul下第一个li,修改字体颜色为pink
        $('ul li:first').css('color','pink'); //第一个

        $('ul li:last').css('color','gold');  //最后一个
        // ul下的索引为2的li,修改字体颜色为red
        $('ul li:eq(2)').css('color','red'); //索引为2
        // ol下索引为奇数的li,修改字体颜色为purple
        $('ol li:odd').css('color','purple'); //奇数
        // ol下索引为偶数的li,修改字体颜色为gray
        $('ol li:even').css('color','gray'); //偶数


    </script>
=================================

<script src="jquery.js"></script>
<script>
    $(function () {
        // parent 找父级元素
        // console.log($('.son').parent());
        // children 找子类元素
        // console.log($('.box').children('p'));
        // console.log($('.box').children('.son'));
        // 找到改颜色(样式)
        // $('.box').children('.son').css('color','red');

        // find 找所有的后代
        $('.box').find('p')
    })
</script>
==========================

<script src="jquery.js"></script>
<script>
    $(function () {
        // siblings 除了自身以外的全部兄弟
        // $('.demo').siblings().css('color','blue')
        // nextAll 当前元素之后的全部兄弟
        // $('.demo').nextAll().css('color','red')
        // prevAll  当前元素之前的全部兄弟
        //  $('.demo').prevAll().css('color','red')
        // eq() 根据索引的后代
        $('ul li').eq(2).css('color','red')

    })
</script>
=============================

<script>
    //each 方法,遍历,只适用于下标,内容,不会去执行事件
    // $('ul li').each(function (i) {
    //     $(this).html('我是第'+i+'个li')
    // })

    // each可以用于遍历指定的对象和数组
    // $.each(obj,callback)

    // 遍历对象
    // $(function () {
    //     //对象
    //     var obj = {
    //         'name':'kehao',
    //         'age':18
    //     };
    //     $.each(obj,function (key,value) {
    //         alert(key+':'+value)
    //     })
    // })
    // 遍历数组
    $(function () {
        $.each(['a','b','c','d'],function (i,j) {
            alert('下标'+i+'元素'+j)
        })

    })
</script>
============================

<script src="jquery.js"></script>
<script>
    $(function () {
        //attr 有则查,无则增
        // var $box = $('#box');
        // console.log($box);
        // console.log($box.attr('id')); // 查询属性值
        // console.log($box.attr('class')); // undefined
        // $box.attr('class','chuan') //添加属性

        // removeAttr  移除属性
        // $box.removeAttr('class')

        // addClass 添加class
        // $('p').eq(0).addClass('hei')

        // removeClass 移除class
        // $('p').eq(0).removeClass('hei')

        //  toggleClass   交替添加 存在删除 不存在添加
        $('button').click(function () {
                $('button').toggleClass('demo')
        })
    })
</script>
=======================

<script>
    // innerWidth内边距+width outerWidth内边距+width+border
    console.log($('#box').width())
    console.log($('#box').innerWidth())
    console.log($('#box').outerWidth())

    // 修改标签样式,以对象形式进行修改
    // $('#box').css({
    //     'width':'300px',
    //     'height':'300px',
    //     'background':'pink'
    // })

    //position 到父级内边距的距离

    // offset 网页边距的距离

    // $('#wrap').css({
    //     'width':'200px',
    //     'height':'200px',
    //     'background':'gold'
    // })
    // $('#wrap').html('人生苦短,我用python')

    // 操作元素的value值 val
    // $('input').val('hello') //修改内容
    // console.log($('input').val())//查询value值

    // text 获取或者设置元素的文本内容
    // $('div').text()

    //js 对象.事件名称 = function(){}
    //jq  $(对象).事件名称
    // on  给同一个对象添加多个事件
    //off 给同一个对象取消多个事件
</script>
======================

<script src="jquery.js"></script>
<script>
    var $box = $('#box');

    // $box.on({
    //     //单击事件
    //     'click':function () {
    //         console.log('单击')
    //     },
    //     // 鼠标划入
    //     'mouseenter':function (){
    //       console.log('鼠标划入')
    //     },
    //     // 鼠标划出
    //     'mouseleave':function () {
    //         console.log('鼠标划出')
    //     },
    //     // 双击事件
    //     'dblclick':function () {
    //         console.log('双击事件')
    //     }
    // })

    // 鼠标划入划出
    $box.hover(function () {
        console.log('划入')
    },function () {
        console.log('划出')
        }
    )



</script>
==========================

<button>按钮1</button>
<button>按钮2</button>
<script src="jquery.js"></script>
<script>
    $(function () {
        //     // hide 隐藏(可以跟毫秒数) show 显示(可以跟毫秒数)
        //     // $('.box').click()
        //     $(window).click(function () {
        //         $('.box').hide(2000);
        //     })
        //     $(window).click(function () {
        //         $('.box').show(2000);
        //     })


        // toggle 即可以显示也可以隐藏
        //     $(window).click(function () {
        //         $('.box').toggle(2000);
        //     })

        // 淡入淡出  fadeIn fadeOut
        //     $(window).click(function () {
        //         $('.box').fadeIn(2000)
        //     })
        //     $(window).click(function () {
        //         $('.box').fadeOut(2000)
        //     })

        //或设置按钮
        //     $('button').eq(0).click(function () {
        //         $('.box').fadeIn(2000)
        //     })
        //     $('button').eq(1).click(function () {
        //         $('.box').fadeOut(2000)
        //     })

        // 到达指定透明度  fadeTo 要跟上透明度,透明度单位是0-1
        //     $('button').eq(0).click(function () {
        //         $('.box').fadeTo(2000,0.3)
        //    })

        //fadeToggle 淡入+淡出
        //     $('button').eq(0).click(function () {
        //         $('.box').fadeToggle(2000)
        //     })

        // 上拉下拉动画 slideUp  slideDown
        // $('button').eq(0).click(function () {
        //         $('.box').slideUp(2000)
        //     })
        // $('button').eq(0).click(function () {
        //         $('.box').slideDown(2000)
        //     })

        // slideToggle 上拉+下拉
        $('button').eq(1).click(function () {
            $('.box').slideToggle(2000)
        })

        // animate 执行css属性集的自定义动画
    })
</script>
===========================
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
           width: 200px;
           height: 200px;
           background-color: green;

       }
    </style>
</head>
<body>
<button>动画</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
    // animate 执行css属性集的自定义动画 可以去执行一个队列
    // 该方法通过css样式将元素从一个状态改变为另一个状态
    // 只有数值才可以创建动画(margin:30px) 字符串值无法创建动画(background:red)
    $(function () {
        var $btn = $('button');
        var $box = $('.box');
        $btn.click(function () {
           $box.animate({
               'width':'1000'
           },2000,function () {
                $box.animate({
               'margin-top':'450'
                },2000,function () {
                    $box.animate({
                        'width':'200',
                        'margin-top':0
                    },2000)
                })
           })
        })
    })
</script>
</body>
</html>