jQuery 选择器 动画

2018-08-27  本文已影响0人  现实里的童话xklss

jQuery选择器

$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

$("p.intro") 所有 class="intro" 的 <p> 元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

("[href='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery选择器转移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择集转移</title>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $('#dvi1').netx().css({color:'red'});
            // 选择写一个 用next
            // $('#dvi1').netxAll('p').css({color:'red'});
            // 选择下一个所有的p标签
            // $('#dvi1').prev().css({color:'red'})
            // 选择前一个
            // $('#dvi1').prevAll('span').css({color:'red'})
            // 前一个所有
            // parent 父亲  closest离自己最近的祖先元素
            // children 所有孩子   //end 回到
            //siblings 所有的兄弟
            //find
        })
    </script>
</head>
<body>
    <span>你是span</span>
    <div id="div1">你是div元素</div>
    <p>你是p</p>
</body>
</html>

jQuery动画

运动曲线两种 :swing 运动曲线 中间快两头慢 linear 匀速

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#div1').animate({
                width:200,
                height:200},
                1000,function(){
                    // alert('结束了 了 了。。。')
                    $(this).animate({
                        marginLeft:500},1000,function(){
                            $(this).animate({
                                marginLeft:200},1000),function(){
                                    $(this).animage({
                                        marginBottom:400},1000)
                        };
                });   
        })

         //swing 运动曲线 中间快两头慢  linear 匀速
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

特殊效果
$('.box').fadeOut(); //淡入

$('.box').fadeIn(); //淡出

$('.box').fadeIn(); //切换淡入淡出

$('.box').show(); //显示

$('.box').hide(); //影藏

$('.box').toggle(); //切换显示影藏

$('.box').slideDown(); //向下展开

$('.box').slideUp(); //向上收起

$('.box').slideToggle(); //切换上收下展

上一篇 下一篇

猜你喜欢

热点阅读