三、jQuery常用的API：jQuery 样式操作、jQuery 效果

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量290 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645902/article/details/105961812
版权

  目录


 
 
学习来源： https://www.bilibili.com/video/BV1HJ41147DG
 

jQuery 样式操作

jQuery中常用的样式操作有两种：css() 和 设置类样式方法

1、操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

​常用以下三种形式：

  • 参数只写属性名，则是返回属性值
    $(this).css('属性名')
  var strColor = $(this).css('color');
  • 参数是属性名，属性值，逗号分隔，是设置一组样式。属性必须加引号，值如果是数字可以不用跟单位和引号
    $(this).css('属性名','属性值')
  $(this).css(''color'', ''red'');
  
  $("div").css("width", 300);
  • 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
  $(this).css({ "color":"white","font-size":"20px"});
  
  $("div").css({
      width: 400,
      height: 400,
      // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
      backgroundColor: "red"
   })

css() 多用于样式少时操作，多了则不太方便。

案例：图片突出显示

相关链接：https://blog.csdn.net/qq_45645902/article/details/106002262

2、设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

  • 添加类
  $("div").addClass("current");
  • 删除类
  $("div").removeClass("current");
  • 切换类
  $("div").toggleClass("current");

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box1"></div>
    <div class="current box2"></div>
    <script>
        $(function () {
            // 添加类 addClass()
            $(".box1").click(function () {
                $(this).addClass("current");
            });
            // 删除类 removeClass()
            $(".box2").click(function () {
                $(this).removeClass("current");
            });
            // 切换类 toggleClass()
            // $("div").click(function () {
            //     $(this).toggleClass("current");
            // });
        })
    </script>
</body>

</html>

注释

  1. 设置类样式方法比较适合样式多时操作，可以弥补 css() 的不足。
  2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .3s;
        }

        .two {
            transform: rotate(720deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="one two"></div>
    <script>
        var one = document.querySelector(".one");
        one.className = "two";  // 覆盖元素原先里面的类名 class="two"
        $(".one").addClass("two"); // addClass相当于追加类名,不影响以前的类名 class="one two"
        $(".one").removeClass("two"); // class="one"
    </script>
</body>

</html>
案例：tab 栏切换

相关案例：https://blog.csdn.net/qq_45645902/article/details/105979714

jQuery 效果

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

  • 显示隐藏：show() / hide() / toggle()
  • 滑入滑出：slideDown() / slideUp() / slideToggle()
  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo()
  • 自定义动画：animate()

注释

  • 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
  • jQuery为我们提供另一个方法，可以停止动画排队：stop()
1、显示隐藏：show() / hide() / toggle()

显示隐藏动画，常见有三个方法：show() / hide() / toggle()

语法

  show([speed, [easing], [fn]])  // 显示
  hide([speed, [easing], [fn]])  // 隐藏
  toggle([speed, [easing], [fn]])  // 切换

注释

  • 参数都可以省略，无动画直接显示
  • speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(例如：1000)。
  • easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
  • fn：回调函数，在动画完成时执行的函数，每个函数执行一次。
  • 平时一般不带参数，直接显示隐藏即可

示例

<!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>
        div {
            width: 150px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").show(1000, function () {
                    alert(1);
                });
            })
            $("button").eq(1).click(function () {
                $("div").hide(1000, function () {
                    alert(1);
                });
            })
            $("button").eq(2).click(function () {
                $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

</html>

在这里插入图片描述

2、滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle()

语法

  slideDown([speed, [easing], [fn]])  // 下滑
  slideUp([speed, [easing], [fn]])  // 上滑
  slideToggle([speed, [easing], [fn]])  // 切换滑动

注释

  • 参数都可以省略，无动画直接显示
  • speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(例如：1000)。
  • easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
  • fn：回调函数，在动画完成时执行的函数，每个函数执行一次。

示例

    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function () {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function () {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>

在这里插入图片描述

案例：仿新浪下拉菜单

其他代码参考：https://blog.csdn.net/qq_45645902/article/details/105984458

    // 此代码有问题，下面会介绍解决方法
    <script>
        $(function () {
            // 鼠标经过
            $(".nav>li").mouseover(function () {
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").slideUp(200);
            })
        })
    </script>
3、事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover

  hover([over,] out)

注释

  • over：鼠标移到元素上要触发函数(相当于 mouseenter)
  • out：鼠标移出元素要触发函数(相当于 mouseleave)
  • 只写一个函数，鼠标经过和离开都会触发
案例：仿新浪下拉菜单

其他代码参考：https://blog.csdn.net/qq_45645902/article/details/105984458

    // 此代码有问题，下面会介绍解决方法
    <script>
        $(function () {
            // 事件切换 hover 鼠标经过和离开的复合写法
            $('.nav>li').hover(function () {
                $(this).children("ul").slideDown(200);
            }, function () {
                $(this).children("ul").slideUp(200);
            })
            // 事件切换 hover 只写一个函数，鼠标经过和离开都会触发
            $('.nav>li').hover(function () {
                $(this).children("ul").slideToggle(200);
            })
            // 以上两种方法等价，使用一个要注释另一个
        })
    </script>

在这里插入图片描述

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

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

停止动画排队

  stop()

注释

  • stop() 方法用于停止动画或效果。
  • stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
  • 每次使用动画之前，先调用 stop()，再调用动画。
案例：仿新浪下拉菜单

其他代码参考：https://blog.csdn.net/qq_45645902/article/details/105984458

    // 问题已解决
    <script>
        $(function () {
            // 鼠标经过
            $(".nav>li").mouseover(function () {
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").stop().slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").stop().slideUp(200);
            })

            // 事件切换 hover 鼠标经过和离开的复合写法
            $('.nav>li').hover(function () {
                $(this).children("ul").stop().slideDown(200);
            }, function () {
                $(this).children("ul").stop().slideUp(200);
            })
            // 事件切换 hover 只写一个函数，鼠标经过和离开都会触发
            $('.nav>li').hover(function () {
                $(this).children("ul").stop().slideToggle(200);
            })
        })
    </script>
5、淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo()

语法

  fadeIn([speed, [easing], [fn]])  // 淡入
  fadeOut([speed, [easing], [fn]])  // 淡出
  fadeToggle([speed, [easing], [fn]])  // 淡入淡出切换
  fadeTo([[speed], opacity, [easing], [fn]])  // 渐进方式调整到指定的不透明度

注释

  • 除了fadeTo()的参数opacity不可以省略，其余的参数都可以省略，无动画直接显示
  • speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(例如：1000)。
  • easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
  • fn：回调函数，在动画完成时执行的函数，每个函数执行一次。
  • opacity：透明度，必须，取值0~1

示例

<!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>
        div {
            width: 150px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function () {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function () {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function () {
                // 修改透明度 fadeTo() 速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

</html>
案例：图片突出显示

相关链接：https://blog.csdn.net/qq_45645902/article/details/105998539

6、自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

语法

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

注释

  • params：想要更改的样式属性，以对象形式传递，必须。属性名可以不用带括号，如果是复合属性则需要采取驼峰命名法。
  • speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(例如：1000)。
  • easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
  • fn：回调函数，在动画完成时执行的函数，每个函数执行一次。

示例

<!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>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

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

</html>

在这里插入图片描述
在这里插入图片描述

案例：仿王者荣耀手风琴效果

相关链接：https://blog.csdn.net/qq_45645902/article/details/105984752

没人回复我哼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
02【jQuery】 常用API（上） jQuery 选择器, 样式操作,效果, 属性操作, 文本属性值,  元素操作, 尺寸、位置操作
嘿嘿_哈哈的博客
09-11 357
02【jQuery】 常用API 学习内容: jQuery 选择器, jQuery 样式操作, jQuery 效果, jQuery 属性操作, jQuery 文本属性值, jQuery 元素操作, jQuery 尺寸、位置操作 1. jQuery 选择器 1.1 jQuery 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 ...
JQuery基本使用和JQuery常用API
weixin_46076151的博客
04-26 533
文章目录一，JQuery的概述二，JQuery的基本使用三，JQuery常用API四，JQuery选择器五，JQuery样式操作六，JQuery效果七，JQuery属性操作八，JQuery文本属性值九，JQuery元素操作十，JQuery位置尺寸操作 一，JQuery的概述 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 二，JQuery的基本使用 三，JQuery常用API 四，JQuer
jQuery常用API--样式操作
JJ_Smilewang的博客
06-29 249
jQuery 可以使用css 方法来修改简单元素样式，也可以操作类，修改多个样式。（1）参数只写属性名，则是返回属性值。（2）参数是属性名，属性值，用逗号分隔，是设置样式，属性必须加引号，如果属性值是数字，可以不用跟单位和引号（3） 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，但是加上更好；属性值如果不是数字，则需要加引号它的作用等同于原生JS中的className , 可以操作类样式，注意操作类里面的参数不要加点。（1）添加类（2）移除类（3）切换类原生JS 中的c
jQuery常用API——包括：jQuery选择器、样式操作、效果、属性操作、内容文本值、元素操作、尺寸及位置操作等
蟹黄堡
05-31 572
文章目录jQuery选择器1.jQuery基础选择器2.jQuery层级选择器3.jQuery隐式迭代4.jQuery筛选选择器5.jQuery筛选方法6.jQuery里面的排他思想7.链式编程jQuery样式操作1.操作CSS方法2.设置类样式方法3.类操作与className区别jQuery效果1.显示隐藏效果2.滑动效果3.事件切换4.动画队列及其停止排队方法5.淡入淡出效果6.自定义动画animatejQuery属性操作1.设置或获取元素固有属性值prop()2.设置或获取元素自定义属性值attr(
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
weixin_39922642的博客
08-04 298
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)飞机动画块(他从一边到另一边飞行 - 永远)。可以使用jquery折叠和扩展块容器：onclick = "$('.wrap').slideToggle('normal'); return false;"因此，如果您折叠并展开块，动画将停止，我该如何解决？The airpl...
jQuery 常用API
m0_67392010的博客
03-16 1413
jQuery 常用API 1、jQuery 选择器 1.1 、jQuery 基础选择器 1.2 、jQuery 层级选择器 1.3 、隐式迭代（重要） 1.4 、jQuery 筛选选择器 1.5、 jQuery 筛选方法（重点） 1.6 、jQuery 里面的排他思想 1.7、 链式编程 2、jQuery 样式操作 2.1 、操作 css 方法 2.2 、设置类样式方法 2.3、 类操作与className区别 3、jQuery 效果 3.1 、显示隐藏效果 3.1.1、显示效果
jQuery 学习归纳1 --- jQuery 常用API
SPIRITE_SYF的博客
05-05 1511
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。<script>
jQuery常用API（吐血！！！超全整理）
GaoshangD1209的博客
06-26 1111
语法参数params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
二、jQuery常用API
qq_55891636的博客
11-29 790
jQuery给我们封装的常用API让我们很方便的编写代码
jQuery入门与常用API
battledao的博客
03-11 1624
前言 ❤️ 你所见即是我，好与坏我都不反驳 ❤️
jquery-stylesheet:用于样式表操作的jQuery插件
05-22
将更改应用于CSS规则比遍历匹配元素并对每个元素应用相同的更改更为有效，尤其是在元素很多或更改触发多次昂贵的绘制操作的情况下。 如果您已应用样式类，然后使用不希望覆盖的内联样式自定义元素，则它也很有用。...
jqueryAPI.zip_jQuery API.z_jquery
09-24
1. **API分类**：包括选择器、遍历、属性、样式、内容、事件、尺寸、动画、Ajax、效果、遍历方法等各个方面的详细说明。 2. **方法详解**：每个jQuery方法的参数、返回值、示例和注意事项都进行了详细解释。 3. **...
jqueryui-API.zip_jqueryui_jqueryui API
09-24
《jQuery UI API详解》 jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了丰富的交互效果、可自定义的主题以及多种组件。这个压缩包中的“jqueryui-API(最完整).pdf”文档全面介绍了jQuery ...
jQuery1.2API 本地 帮助文档
12-28
《jQuery1.2 API 本地帮助文档》是一个用于学习和参考jQuery 1.2版本API的重要资源，以CHM（Compiled Help Manual）格式提供。CHM文件是一种微软编译后的帮助文件，通常包含丰富的索引、搜索功能以及组织有序的内容...
jQuery 3.3.1 api docs 中文手册 [chm]
04-01
**jQuery 3.3.1 API Docs 中文手册** jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。这个“jQuery 3.3.1 API Docs 中文手册”是开发人员的重要参考资料，为理解...
nodejs安装
a1241436267的博客
08-19 411
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 329
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 336
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 996
用于在Vue应用程序或API路由中进行HTTP请求，详见。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值