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

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]

<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]

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>titletitle>
  <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();同理

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>titletitle>
  <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:动画执行完后立即执行的回调函数(可选)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>titletitle>
  <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]

<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]

<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);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
    ul>
div>
body>
html>

你可能感兴趣的:(Web前端,WEB前端开发)