2018年5月

显示和隐藏动画

show方法

作用:让匹配的元素展示出来

用法一:
参数为数值类型,表示:执行动画时长
单位为:毫秒(ms),参数2000即2秒钟显示完毕
示例:$(selector).show(2000);

用法二:
参数为字符串类型,是jQuery预设的值,共有三个,分别是:slow、normal、fast
跟用法一的对应关系为:slow:600ms、normal:400ms、fast:200ms
示例:$(selector).show(“slow”);

用法三:
参数一可以是数值类型或者字符串类型。参数二表示:动画执行完后立即执行的回调函数。
示例:$(selector).show(2000, function() {});

用法四:
不带参数,作用等同于 css(“display”, ”block”),注意:此时没有动画效果。
示例:$(selector).show();

hide方法

作用:让匹配元素隐藏掉
用法参考show方法。

滑入滑出动画

作用:让元素以下拉动画效果展示出来
示例:$(selector).slideDown(speed,callback);
用法参考show方法。
注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)

滑出动画效果

示例:$(selector).slideUp(speed,callback);

滑入滑出切换动画效果

示例:$(selector).slideToggle(speed,callback);

淡入淡出动画

淡入动画效果

作用:让元素以淡淡的进入视线的方式展示出来
示例:$(selector).fadeIn(speed, callback);

淡出动画效果

作用:让元素以渐渐消失的方式隐藏起来
示例:$(selector).fadeOut(1000);

淡入淡出切换动画效果

作用:通过改变透明度,切换匹配元素的显示或隐藏状态
示例:$(selector).fadeToggle('fast',function(){});

改变透明度到某个值

与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
作用:调节匹配元素的不透明度
用法有别于其他动画效果
第一个参数表示:时长
第二个参数表示:不透明度值,取值范围:0-1
示例:$(selector).fadeTo(1000, .5); // 0全透,1全不透
第一个参数为0,此时作用相当于:.css(“opacity”, .5);
示例:$(selector).fadeTo(0, .5);

总结:

  • jQuery提供的这几个动画效果控制的CSS属性包括:高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
  • 这三个CSS属性的共性是:属性值只有一个,并且这个值是数值(去掉单位后)。

自定义动画

注意:所有能够执行动画的属性必须只有一个数字类型的值。比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font.

作用:执行一组CSS属性的自定义动画
第一个参数表示:要执行动画的CSS属性(必选)
第二个参数表示:执行动画时长(可选)
第三个参数表示:动画执行完后立即执行的回调函数(可选)
示例:$(selector).animate({params},speed,callback);

停止动画

方法:stop()
参数1:表示后续动画是否要执行,true:后续动画不执行 ;false:后续动画会执行。
参数2:数表示当前动画是否执行完,true:立即执行完成当前动画 ;false:立即停止当前动画。
示例:$(selector).stop(clearQueue,jumpToEnd);
都不给,默认false;

注意:

  • 当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。
  • 如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。
  • 如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

样式属性操作 .css()

作用:设置或获取元素的样式属性值。

  • 设置样式属性操作:

    • a设置单个样式:
      $(selector).css(“color”, “red”);
      // 第一个参数表示:样式属性名称
      // 第二个参数表示:样式属性值
    • b设置多个样式:(也可以设置单个)
      // 参数为 {}(对象)
      $(selector).css({“color”: “red”, “font-size”: “30px”});
  • 获取样式属性操作:

     // 参数表示要获取的 样式属性名称
     $(selector).css(“font-size”);

    此时,会返回”font-size”样式属性对应的值。

    类操作

  • 添加类样式:

    • addClass 为指定元素添加类className,注意:此处类名不带点,所有类操作的方法类名都不带点。$(selector).addClass(“liItem”);
  • 移除类样式:removeClass(className) 为指定元素移除类 className`$(selector).removeClass(“liItem”);$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类。
  • 判断有没有类样式:hasClass(calssName) 判断指定元素是否包含类 ,jquery对象中有一个带有类名的也是true,所有都不带才是false;className$(selector).hasClass(“liItem”);此时,会返回true或false。
  • 切换类样式:
    toggleClass(className) 为指定元素切换类 className,该元素有类则移除,没有指定类则添加。$(selector).toggleClass(“liItem”);

注意:

  • 操作类样式的时候,所有的类名,都不带点(.)。
  • 操作的样式非常少,那么可以通过.css()这个 方法来操作。
  • 操作的样式很多,那么要通过使用类的方式来操作。
  • 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把css从html中分离出来)。

描述:当用户的鼠标经过标题的时候,内容显示,鼠标经过那个标题,显示那个内容吗,其余的全部隐藏。当鼠标离开这片区域的时候,全部隐藏。jQuery的版本为1.8.
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>手风琴案例</title>
   <style>
       * {padding: 0;margin: 0;}
       ul { list-style-type: none;}

       .parentWrap {
           width: 200px;
           text-align:center;

       }

       .menuGroup {
           border:1px solid #999;
           background-color:#e0ecff;
       }

       .groupTitle {
           display:block;
           height:20px;
           line-height:20px;
           font-size: 16px;
           border-bottom:1px solid #ccc;
           cursor:pointer;
       }

       .menuGroup > div {
           height: 200px;
           background-color:#fff;
           display:none;
       }
   </style>
   <script src="jquery.min.js"></script>
   <script>
       $(function () {
           $(".parentWrap span").mouseenter(function () {
               $(this).next().show().parent("li").siblings("li").find("div").hide();
           });
           $(".parentWrap").mouseleave(function () {
               $(".parentWrap li").find("div").hide();
           })
       })
   </script>
</head>
<body>
   <ul class="parentWrap">
       <li class="menuGroup">
           <span class="groupTitle">标题1</span>
           <div>我是弹出来的div1</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题2</span>
           <div>我是弹出来的div2</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题3</span>
           <div>我是弹出来的div3</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题4</span>
           <div>我是弹出来的div4</div>
       </li>
   </ul>
</body>
</html>

描述:用户鼠标经过某一张图片的时候,该图片高亮显示,与之相同的图片颜色变暗。鼠标离开后,恢复为原来的样子。jQuery的版本为1.8。本代码不提供图片,如果需要图片的可以给小编留言。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高亮显示图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(function () {
            $(".wrap").find("li").mouseenter(function () {
                $(this).css("opacity",1).siblings("li").css("opacity",0.4);
            });
            $(".wrap").mouseleave(function () {
                $(this).children().children("li").css("opacity",1);
            });

        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>

描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样,鼠标经过的时候,颜色变成白色,鼠标离开,颜色恢复原来的颜色。jQuery的版本为1.8
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级隔行变色</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .form{
            width: 500px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #404060;
            width: 500px;
            text-align: center;
        }
        th,td{
            border: 1px solid #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            var trodd = $(".form tr:odd");
            var treven = $(".form tr:even");
            trodd.css("background","#a3a3a3");
            treven.css("background","#ccc");

            //计数器,记录鼠标经过之前的颜色
            var color = "";
            $(".form tr").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","#fff");
            });
            $(".form tr").mouseleave(function () {
                $(this).css("background",color);
            });
        });
    </script>
</head>
<body>
<div class="form">
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody class="target">
        <tr>
            <td>001</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>003</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>004</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>005</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>006</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>007</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

描述:鼠标放在一级导航的时候。二级导航显示。鼠标离开之后,二级导航隐藏。在制作导航的时候,用的是图片作为的背景图,为了节约服务器空间就不上传了,如果有需要的小伙伴,可以留言,我发给你们。使用的jQuery的版本是1.8的。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单的制作</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

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

    .wrap li{
        background-image: url(imgs/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.min.js"></script>
<script>
$(function () {
    //获取相关元素
    var wrapli = $(".wrap>ul>li");
    //鼠标经过的时候显示
    wrapli.mouseenter(function () {
        $(this).children("ul").show();
    });
    //鼠标经过的时候隐藏
    wrapli.mouseleave(function () {
        $(this).children("ul").hide();
    })
})
</script>
<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>

基本选择器

符号(名称)说明用法(示例)
#Id选择器$(“#btnShow”).css(“color”, “red”);选择id为btnShow的一个元素(返回值为jQuery对象,下同)
.类选择器$(“.liItem”).css(“color”, “red”);选择含有类liItem的所有元素
element标签选择器$(“li”).css(“color”, “red”);选择标签名为li的所有元素

层级选择器

符号(名称)说明用法(示例)
空格后代选择器$(“#j_wrap li”).css(“color”, “red”);选择id为j_wrap的元素的所有后代元素li
>子代选择器$(“#j_wrap > ul > li”).css(“color”, “red”);选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

符号(名称)说明用法(示例)
:eq(index)选择匹配到的元素中索引号为index的一个元素,index从0开始$(“li:eq(2)”).css(“color”, ”red”);选择li元素中索引号为2的一个元素
:odd选择匹配到的元素中索引号为奇数的所有元素,index从0开始$(“li:odd”).css(“color”, “red”);选择li元素中索引号为奇数的所有元素
:even选择匹配到的元素中索引号为偶数的所有元素,index从0开始$(“li:odd”).css(“color”, “red”);选择li元素中索引号为偶数的所有元素

筛选选择器(方法)

符号(名称)说明用法(示例)
find(selector)查找指定元素的所有后代元素$(“#j_wrap”).find(“li”).css(“color”, “red”);选择id为j_wrap的所有后代元素li
children()查找指定元素的直接子元素$(“#j_wrap”).children(“ul”).css(“color”, “red”);选择id为j_wrap的所有子代元素ul
siblings()查找所有兄弟元素$(“#j_liItem”).siblings().css(“color”, “red”);选择id为j_liItem的所有兄弟元素
parent()查找父元素(亲的)$(“#j_liItem”).parent(“ul”).css(“color”, “red”);选择id为j_liItem的父元素
eq(index)查找指定元素的第index个元素,index是索引号,从0开始$(“li”).eq(2).css(“color”, “red”);选择所有li元素中的第二个

  • 原生js,入口函数。页面上所有内容加载完毕,才会执行。不仅文本加载完毕,而且图片也要加载完毕,在执行函数。
window.onload = function () {

 }
  • jquery的入口函数。文档加载完毕,图片不加载的时候就可以执行这个函数。

     $(document).ready(function () {
    
    })
    • jquery的入口函数。文档加载完毕,图片不加载的时候就可以执行这个函数。
    $(function () {
    
    });
  • jquery的入口函数。文档加载完毕,图片也加载完毕的时候在执行这个函数。

     $(window).ready(function () {
    
    })
  • jQuery入口函数与js入口函数的区别

    • 书写个数不同

      • Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
      • jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
    • 执行时机不同

      • Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
      • jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
    • 文档加载的顺序:从上往下,边解析边执行。

注意:jQuery函数跟$函数的关系:jQuery ===$;