欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端学习笔记—— jQuery之样式、动画

程序员文章站 2022-05-10 15:36:37
...

jQuery操作样式

CSS操作

  • 功能：设置或者修改样式，操作的是style属性。

  • 操作单个样式

// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色
  • 设置多个样式
// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
    'background':'gray',
    'width':'400px',
    'height':'200px'
});
  • 获取样式
// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

  1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

class操作

  • 添加样式类
// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');
  • 移除样式类
// name:需要移除的样式类名
$obj.removeClass('name');
// 例子，移除div中one的样式类名
$('div').removeClass('one');
  • 判断是否有某个样式类
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');
  • 切换样式类
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');

案例

  • tab栏切换案例 [07-tab栏切换.html]
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.selected {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }

  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>

    //有些事现在不做,以后就没有机会了
    //有些事现在不做,是为了以后做的更好

  </script>
  <script>


    //页面加载的事件
    $(function () {
      //获取所有的li标签,添加鼠标进入的事件
      $(".tab>li").mouseenter(function () {
        //设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素的类样式
        $(this).addClass("active").siblings("li").removeClass("active");
        //设置鼠标进入的li对应的div的类样式
        //获取当前鼠标进入的li的索引值
        var index=$(this).index();
        //获取下面的所有的div
        $(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
      });
    });
  </script>

</head>
<body>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>

</body>
</html>

jQuery动画

  • jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。
  • 演示动画效果 [08-演示jQuery动画（animate）.html]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: mediumvioletred;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    /*
    *
    * show和hide方法有参数
    * 参数1:时间----1000毫秒---1秒
    * 参数2:回调函数---动画执行完毕后才执行
    *
    * */


    $(function () {

      //点击第一个按钮显示div
      $("#btn1").click(function () {
        $("#dv").show(5000,function () {
          alert("完了");
        });
      });
      //点击第二个按钮隐藏div
      $("#btn2").click(function () {
        $("#dv").hide(5000,function () {
          alert("好了");
        });
      });
    });
  </script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<div id="dv"></div>

</body>
</html>

三组基本动画

  • 显示(show)与隐藏(hide)是一组动画：
  • 滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
  • 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
	 // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
	 // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     // 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: mediumvioletred;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    /*
    *
    * show和hide方法有参数
    * 参数1:时间----1000毫秒---1秒
    * 参数2:回调函数---动画执行完毕后才执行
    *
    * 参数和上面的是一样
    * slideDown()滑出
    * slideUp()滑入
    * slideToggle()切换滑入和滑出
    *
    * fadeIn()淡入
    *
    * fadeOut()淡出
    *
    * fadeToggle()切换淡入和淡出
    *
    * fadeTo(时间,透明值结束);
    *
    *
    * slow 比较慢的
    * fast 比较快的
    * normal
    *
    *
    *
    *
    * */

//
//    $(function () {
//
//      //点击第一个按钮显示div
//      $("#btn1").click(function () {
//         $("#dv").slideDown(500,function () {
//           alert("显示了");
//         });//滑出
//      });
//      //点击第二个按钮隐藏div
//      $("#btn2").click(function () {
//        $("#dv").slideUp(500,function () {
//          alert("隐藏了");
//        });//滑入
//      });
//      //第三个按钮
//      $("#btn3").click(function () {
//        $("#dv").slideToggle(5000);
//      });
//    });





    $(function () {

      //点击第一个按钮显示div
      $("#btn1").click(function () {
        $("#dv").fadeIn(5000);//淡入
      });
      //点击第二个按钮隐藏div
      $("#btn2").click(function () {
       $("#dv").fadeOut(5000);//淡出
      });
      //第三个按钮
      $("#btn3").click(function () {
        //$("#dv").fadeToggle(5000);//切换
        $("#dv").fadeTo("fast",0.2);
      });
    });
  </script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<div id="dv"></div>

</body>
</html>

自定义动画

  • animate: 自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img{
      position: absolute;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //参数1:键值对----css属性和值
    //参数2:时间---1000毫秒---1秒
    //参数3:回调函数
    $(function () {
      $("#im").animate({"width":"300px","height":"300px","left":"100px","top":"100px"},3000).animate({"width":"30px","height":"30px","left":"10px","top":"600px"},300).animate({"width":"50px","height":"50px","left":"800px","top":"20px","opacity":0.5},2000);
    });
  </script>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />

</body>
</html>

动画队列与停止动画

  • 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
// stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终效果

案例

  • 开机动画案例 [09-开关机动画.html]
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }
    </style>

    <script src="vendor/jquery.js"></script>
    <script>
        $(function () {
            $("#closeButton").click(function () {
                //让下面的div高度变为0
                $(this).siblings(".bd").slideUp(500, function () {
                    //让整个box的宽度编程0
                    $(this).parent().animate({"width":0},500);
                });

            });
        });
    </script>
</head>
<body>
<div class="box" id="box">
    <span id="closeButton"></span>
    <div class="hd" id="headPart">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="bottomPart">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>



</body>
</html>
  • 下拉菜单-动画 [10-下拉菜单-动画.html]
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            //需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
            //需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；


            //需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
            $(".wrap>ul>li").mouseover(function () {
                $(this).children("ul").stop().slideDown();
            });
            //需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
            $(".wrap>ul>li").mouseout(function () {
                $(this).children("ul").stop().slideUp();
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

上一篇： 归并排序

下一篇： web前端：Javascript学习笔记和jQuery库操作

推荐阅读