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

编程语言 2018-09-30 07:49:56 阅读次数: 0

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>

猜你喜欢

转载自blog.csdn.net/tichimi3375/article/details/82836858
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022