前端（jQuery样式操作、特殊效果、动画......）

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-27 21:01 被阅读0次

1、jQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //选择元素的规则和css样式相同
            $('#div1').css({color: 'pink'});
            $('.box').css({fontSize: '30px'});
            $('.list li').css({
                background: 'green',
                color: '#fff',
                fontSize: '20px',
                marginBottom: '10px'
            });
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div class="box">这是第二个div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

2、选择器转移

prev()是同级的上一个元素，prevAll()是同级的上面所有的元素
next()是同级的下一个元素，nextAll()是同级的下面所有的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择集转移</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //prev()是同级的上一个元素，prevAll()是同级的上面所有的元素
            //next()是同级的下一个元素，nextAll()是同级的下面所有的元素

            //修改#div1的下一个元素的样式
            $('#div1').next().css({color: 'red'});

            //修改#div1的下面所有p标签设置样式
            $('#div1').nextAll('p').css({color: 'red'});

            //选择上一级的父元素
            /*$('#span01').parent().css({
                width:'100px',
                height:'100px',
                background:'gold'
            })*/

            //获取祖级用$('#span02').parent().parent()不可取，可用closest('div')获取离span02最近的div
            //closest可以选择离自己最近的元素，元素可以是父级，也可以是子集
            $('#span01').closest('div').css({
                width:'200px',
                height:'200px',
                background:'pink'
            })

            /*
            $('.list li')与$('.list').children()的区别：
                原始的选择集不一样
                $('.list li')不能通过end()回到父级
                $('.list').children()可以通过end()回到父级
            */
            $('.list').children().css({
                background:'gold',
                height:'30px',
                marginBottom:'10px'
            }).end().css({
                background:'green'
            })

            //eq(2)是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li
            $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

            //find()是选择div内的class等于link1的元素
            $('#div2').find('.link1').css({color:'red'});
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div>这是第二个div元素</div>
    <p>这是一个p元素</p>

    <div>
        <p>
            <a href="#">腾讯网</a>
            <span id="span01">span元素</span>
        </p>
    </div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div id="div2">
        <p>
            <a href="#" class="link1">腾讯网</a>
        </p>
    </div>
</body>
</html>

3、样式操作

jQuery用同一个函数即可以取值、也可以赋值
            //读取样式
            alert($('#div1').css('fontSize'));//16px
            //设置（写入）样式
            $('#div1').css({background:'gold'});

            //增加行间样式
            $('#div1').addClass('big');
            //减少行间样式，多个样式用空格分开
            $('#div1').removeClass('div2 big');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery样式操作</title>
    <style type="text/css">
        .div2{
            color: red;
        }
        .big{
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*jQuery用同一个函数即可以取值、也可以赋值*/
            //读取样式
            alert($('#div1').css('fontSize'));//16px
            //设置（写入）样式
            $('#div1').css({background:'gold'});

            //增加行间样式
            $('#div1').addClass('big');
            //减少行间样式，多个样式用空格分开
            $('#div1').removeClass('div2 big');
        })
    </script>
</head>
<body>
    <div id="div1" class="div2">这是一个div元素</div>
</body>
</html>

4、click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click事件</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .sty{
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 给按钮绑定click事件
            $('#btn').click(function(){
                //重复切换sty样式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <div class="box"></div>
</body>
</html>

5、jQuery索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery索引值</title>
    <style type="text/css">
        .list li{
            height: 30px;
            margin-bottom: 10px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.list li').click(function(){
                // alert(this.innerHTML);//弹出标签中的内容
                alert($(this).index());//弹出下标
            })
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

6、jQuery做选项卡

//失去焦点，避免出现默认的蓝框
                $(this).blur();
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素

                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做选项卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*选项卡的样式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默认灰色*/
            color: #666;
            border: 0px;
        }
        /*被选中的选项卡的样式*/
        .btns input.cur{
            background-color: gold;
        }
        /*内容区的样式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默认隐藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被选中的内容区的样式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //失去焦点，避免出现默认的蓝框
                $(this).blur();
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素

                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
    </div>
</body>
</html>

7、属性操作

读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            alert($('.box').html());//这是一个div元素
            $('.box').html('<a href="http://www.baidu.com">百度网</a>');
            */

            /*
            读写值为布尔类型的属性用prop方法
            读写值为非布尔类型的属性用attr方法
            */

            /*
            $('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
            alert($('.box').attr('class'));//读属性class的值，弹出box
            */

            /*
            var $src = $('#img1').attr('src');
            alert($src);//img/1.png

            $('#img1').attr({
                src:'img/2.gif',
                alt:'图片二'
            });
            */

            /*
            alert($('#check').prop('checked'));//选中为true，非选中为false
            $('#check').prop({checked:true});//设置默认勾选
            */

            // alert($('.box2').html());//<span>这是div元素内的span</span>
            alert($('.box2').text());//这是div元素内的span
        })
    </script>
</head>
<body>
    <div class="box">这是一个div元素</div>

    <img id="img1" src="img/1.png" alt="一张图片">

    <input type="checkbox" id="check">多选

    <div class="box2">
        <span>这是div元素内的span</span>
    </div>
</body>
</html>

8、特殊效果

$('.box').fadeOut();//淡出
$('.box').fadeIn();//淡入
$('.box').fadeToggle();//切换淡入淡出
$('.box').toggle();//切换显示隐藏
$('.box').slideToggle();//切换上收和下展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                // $('.box').fadeOut();//淡出
                // $('.box').fadeIn();//淡入
                // $('.box').fadeToggle();//切换淡入淡出
                // $('.box').toggle();//切换显示隐藏
                $('.box').slideToggle();//切换上收和下展
            })
        })
    </script>
</head>
<body>
    <input type="button" name="" value="效果" id="btn">
    <div class="box"></div>
</body>
</html>

9、jQuery动画

参数：
1、什么属性做动画，属性设置{param1: value1, param2: value2}
2、动画执行的时间，单位毫秒
3、动画曲线：
swing（默认值）开始和结束慢，中间快
linear匀速
可省略不写
4、回调函数，动画完成之后要做的事情，可无限嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            参数：
            1、什么属性做动画，属性设置{param1: value1, param2: value2}
            2、动画执行的时间，单位毫秒
            3、动画曲线：
                swing（默认值）开始和结束慢，中间快
                linear匀速
                可省略不写
            4、回调函数，动画完成之后要做的事情，可无限嵌套
            */
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,
                function(){
                    // alert('动画完了！');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

10、jQuery循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery循环</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});

            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

小练习

1、层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }
        ul{list-style:none;}
        .menu{
            width:200px;
            margin:20px auto 0;
        }
        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;           
        }
        .menu .level1{
            border-bottom:1px solid #afc6f6;
            
        }
        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
                    
        }
        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }
        .menu li ul{
            display:none;
        }
        .menu li ul.current{
            display:block;
        }
        .menu li ul li a:hover{
            background-color:#f6b544;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //当点击标题的时候
            /*
            $('.level1').click(function(){
                //点击切换展开与收起
                $(this).next().toggleClass('current');
            })
            */

            /*
            $('.level1').click(function(){
                //以下展与上卷方式切换
                $(this).next().slideToggle();
            });
            */
            $('.level1').click(function(){
                //$(this)是当前点击的a元素
                //next()获取a元素的下一个元素，即ul
                //slideDown()当前ul的子类展开
                //parent()获取父类li
                //siblings()获取父类兄弟li
                //children('ul')获取其它li的子类ul
                //slideUp()其它子类收起
                $(this).next().slideDown().parent().siblings().children('ul').slideUp();
            });
        })
    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="current">
                <li><a href="#">苹果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">蛏子</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">海参</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

image.png

2、手风琴

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>手风琴</title>
   <style>
   *{margin:0;padding:0;}
   body{font-size:12px;}
   #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
   #accordion ul{list-style:none;}
   #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
   #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
   #accordion ul li img{display:block; float:right;}
   .bar01{left:0px;}
   .bar02{left:643px;}
   .bar03{left:664px;}
   .bar04{left:685px;}
   .bar05{left:706px;}
   .bar01 span{background:#09E0B5;}
   .bar02 span{background:#3D7FBB;}
   .bar03 span{background:#5CA716;}
   .bar04 span{background:#F28B24;}
   .bar05 span{background:#7C0070;}
</style>
   <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
   <script type="text/javascript">
       $(function(){
           $('#accordion li').click(function() {
               $(this).animate(
                   {left: $(this).index()*21}
               );
               /*
               错误的索引用法
                   这里不能使用function(index)的索引，因为循环会先执行完，当点击事件执行时，会导致索引值不对，所以还应该使用已经保存在this当中的索引值
               
               $(this).prevAll().each(function(index){
                   alert(index);

                   $(this).animate(
                       {left: index*21}
                   );
               })
               */

               /*要使用保存在$(this)里边的索引值*/
               // 当前li之前的所有兄弟li都往左移
               // 由于每个li移动的距离不同，使用each循环分别设置left值
               $(this).prevAll().each(function(){
                   //要移动的每一个元素
                   $(this).animate(
                       {left: $(this).index()*21}
                   );
               })
               // 当前li之后的所有兄弟li都往右移
               $(this).nextAll().each(function(){
                   //要移动的每一个元素
                   $(this).animate(
                       {left: 727-(5-$(this).index())*21}
                   );
               })
           });
       })
   </script>
</head>
<body>
   <div id="accordion">
   <ul>
       <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
       <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
       <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
       <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
       <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
   </ul>
</div>
</body>
</html>

image.png

3、指定菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶菜单</title>
    <style type="text/css">
        body{margin:0px;}
        .logo_bar{
            width:960px;
            height:200px;
            background-color:#f0f0f0;
            margin:0 auto;
            
        }
        .menu,.menu_pos{
            width:960px;
            height:50px;
            margin:0 auto;
            background-color:gold;
            text-align:center;
            line-height:50px;
        }
        .menu_pos{
            display:none;
        }

        .down_con{
            width:960px;
            height:1800px;
            margin:0 auto;
        }

        .down_con p{
            margin-top:100px;
            text-align:center;
        }
        .totop{
            width:50px;
            height:50px;
            background:url(images/up.png) center center no-repeat #000;
            border-radius:50%;
            position:fixed;
            right:50px;
            bottom:50px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function() {
                //获取页面滚动时，超出浏览器窗口上方的高度
                var nowTop = $(document).scrollTop();
                // console.log(nowTop);

                if(nowTop > 200){
                    //将菜单置顶显示
                    $('.menu').css({
                        position: 'fixed',
                        left: '50%',
                        top:0,
                        marginLeft: '-480px'
                    });
                    //显示占位层，避免页面跳动
                    $('.menu_pos').show();
                }else{
                    //取消置顶菜单，菜单归入文档流
                    $('.menu').css({
                        position: 'static',//取消定位
                        marginLeft: 'auto'
                    });
                    //隐藏点位层
                    $('.menu_pos').hide();
                }

                //滚动到顶部按钮的显示和隐藏
                if(nowTop > 400){
                    $('.totop').fadeIn();
                }else{
                    $('.totop').fadeOut();
                }
            });

            //动画的方式滚动到页面顶部
            $('.totop').click(function() {
                $('html,body').animate({scrollTop: 0});
            });
        })
    </script>
</head>
<body>
    <div class="logo_bar">顶部logo</div>
    <div class="menu">置顶菜单</div>
    <!-- 占位层，如果菜单显示，它就隐藏，菜单浮动，它就显示，顶替菜单的位置，避免页面跳动 -->
    <div class="menu_pos"></div>
    <div class="down_con">
        <p style="color: red">网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
    </div>
    <!-- 点击超链接时，不想跳转页面的href写法 -->
    <a href="javascript:;" class="totop"></a>
</body>
</html>

image.png

前端（jQuery样式操作、特殊效果、动画......）

1、jQuery选择器

2、选择器转移

3、样式操作

4、click事件

5、jQuery索引值

6、jQuery做选项卡

7、属性操作

8、特殊效果

9、jQuery动画

10、jQuery循环

小练习

1、层级菜单

2、手风琴

3、指定菜单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员