前端学习笔记-jQuery-jQuery样式操作/jQuery效果

最新推荐文章于 2022-04-27 00:57:28 发布

Nanami Touko

最新推荐文章于 2022-04-27 00:57:28 发布

阅读量154

点赞数

分类专栏：前端学习-jQuery

本文链接：https://blog.csdn.net/qq_36434637/article/details/101163484

版权

前端学习-jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery样式操作

操作css方法

1.参数只写属性名，则会返回属性值

$(this).css("color");

2.参数是属性名，属性，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red");

3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({

width: 400,

backgroundColor: "red" // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

})

设置类样式方法

1.添加类

$(this).addClass("类名") // 注意：类名前没有.

2.移除类

$(this).removeClass("类名")

3.切换类

$(this).toggleClass("类名") //可实现添加类名-移除类名-添加类名.. 的反复循环

案例：Tab栏切换案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }


        .item {
            display: none;
        }
    </style>
    <script src="jQuery.min.js"></script>
</head>

<body>
<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（50000）</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">
            商品介绍模块内容
        </div>
        <div class="item">
            规格与包装模块内容
        </div>
        <div class="item">
            售后保障模块内容
        </div>
        <div class="item">
            商品评价（50000）模块内容
        </div>
        <div class="item">
            手机社区模块内容
        </div>

    </div>
</div>
</body>
<script>
    $(function () {
        // 当鼠标点击 tab_list 里面的 li 时候 背景样式改变 新增 current 类 并且移除其他li的  current 类
        $(".tab_list li").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
            // 底下tab_con对应的 div 显示 所以想要获取到 tab_list 里面 li的index
            var index = $(this).index();
            // 可以通过修改css让div显示 也可以调用show()方法;隐藏同理 hide()方法
            $(".tab_con .item").eq(index).css("display", "block").siblings(".item").css("display", "none");
        })
    })
</script>
</html>

jQuery类操作和className区别

原生JS中className会覆盖元素原先里面的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

显示隐藏

show([speed,[easing],[fn]]) // 一般情况下，我们都不加参数直接显示隐藏就可以了

显示隐藏的匹配元素。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:回调函数在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]])

隐藏显示的元素。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

滑动

slideUp([speed,[easing],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

相当于，滑动上去的效果。

slideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

相当于，滑动下来的效果。

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

相当于，上/下滑动来回切换的效果

事件切换

hover（[over,]out）

over：鼠标移动到元素上要触发的函数（相当于mouseenter）
out：鼠标移出要触发的函数（相当于mouseleave）

案例：简化新浪下拉菜单栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav > li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav > li > a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jQuery.min.js"></script>
</head>

<body>
<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
</ul>
<script>
    // hover（[over,]out）
    // over：鼠标移动到元素上要触发的函数（相当于mouseenter）
    // out：鼠标移出要触发的函数（相当于mouseleave）
    $(function () {
        // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
        // $(".nav>li").hover(function () {
        //     $(this).children("ul").slideDown(200);
        // },function () {
        //     $(this).children("ul").slideUp(200);
        // });
        // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $(".nav>li").hover(function () {
            // 在动画钱添加 stop方法 鼠标移动 动画多次执行
            $(this).children("ul").stop().slideToggle(200);
        });
    })
</script>
</body>
</html>

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止排队

stop()

stop()方法用于停止排队
注意stop()方法写到动画或者效果的前面，相当于停止结束上一次动画，只执行这一次动画

淡入淡出

fadeIn([speed],[easing],[fn]) // 淡入

fadeOut([speed],[easing],[fn]) // 淡出

fadeToggle([speed,[easing],[fn]]) // 淡入淡出切换

fadeTo([[speed],opacity,[easing],[fn]]) // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

speed和opacity要保留

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

案列：跟随鼠标移动，某个盒子亮度突出显示（其余盒子变暗）

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            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() {
            // 鼠标进入 某个 li 它的兄弟 li 盒子变暗
            $(".wrap li").hover(function () {
                $(this).siblings().stop().fadeTo(200,0.5);
            },function () {
                // 鼠标离开 兄弟盒子变回原来的亮度
                $(this).siblings().stop().fadeTo(200,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>

自定义动画animate

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合（以对象的形式传入）

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

<script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>

Nanami Touko

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-jQuery-jQuery样式操作/jQuery效果

jQuery样式操作操作css方法1.参数只写属性名，则会返回属性值$(this).css("color");2.参数是属性名，属性，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css("color","red");3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号$(th...
复制链接

扫一扫

专栏目录