jQuery-02

最新推荐文章于 2023-07-15 15:28:30 发布
最新推荐文章于 2023-07-15 15:28:30 发布
阅读量1.3k 收藏 1
点赞数
文章标签： jquery 动画 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55944058/article/details/122029505
版权

目录

一、jQuery中的hover事件

二、jQuery中的动画

1、内置动画

1）show()和hide()   |  由左上角缩放出现消失

2）slideDown()和slideUp()  |  上下滑动出现消失

3）fadeIn()/fadeTo()和fadeOut()   |   淡显淡隐

2、自定义动画

3、动画队列现象

三、jQuery中获取标签属性

第一:jQuery.prop()

第二: jQuery.attr()

四、获取标签内容

1、获取非表单元素内容

2、获取表单内容

一、jQuery中的hover事件

:hover 是css中的一个选择器。jQuery中的hover是一个事件。
1.hover事件是jQuery中的一个特殊事件
2.hover事件是完全可以取代鼠标进入事件和鼠标离开事件。

hover事件的用法:

jQuery对象.hover(function(){},function(){})

总结:
 a)第一个回调函数表示鼠标进入事件
 b)第二个回调函数表示鼠标离开事件

例：需求:进入box变成蓝色,离开变成粉色

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中hover事件</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 有hover,能够简洁和方便
        $('div').hover(function() {
            $(this).css('background', 'blue')
        }, function() {
            $(this).css('background', 'pink')
        })
    </script>
</body>

</html>

 

二、jQuery中的动画

1、内置动画

1）show()和hide()   |  由左上角缩放出现消失

show()与hide语法一样

语法 : jQuery对象.show()
作用 : 用来显示元素
用法:

jQuqry.show(speed,easing,fn)

参数含义:
a ) speed表示速度,可以替换为"slow","normal","fast" 或者 设置毫秒数 1000  1250 之类
b ) easing表示切换效果,可以替换为默认"swing","linear"
c ) fn表示回调函数,当动画完成后执行该函数

例:点击按钮显示盒子,点击按钮使盒子消失

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery案例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <button class="show">show按钮</button>
    <button class="hide"> hide 按钮 </button>
    <div class="box1"></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 代码演示:
        // 点击按钮, 显示div
        $('.show').click(function() {
            $('.box1').show(3000, 'linear', function() {
                console.log('show执行完了')
            })
        });
        // 点击按钮,隐藏div
        $('.hide').click(function() {
            $('.box1').hide(3000, 'linear', function() {
                console.log('hide执行完了')
            })
        });


    </script>
</body>

</html>

 

 

 

2）slideDown()和slideUp()  |  上下滑动出现消失

参数及用法与1)相同

slideDown()表示显示元素
slideUp()表示隐藏元素

例:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery案例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <button class="slideDown">slideDown按钮</button>
    <button class="slideUp"> slideUp 按钮 </button>
    <div class="box2"></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 代码演示:
        $('.slideDown').click(function() {
            $('.box2').slideDown(3000, 'linear', function() {
                console.log('slideDown执行完了')
            })
        });
        // hide()
        $('.slideUp').click(function() {
            $('.box2').slideUp(3000, 'linear', function() {
                console.log('slideUp执行完了')
            })
        });
    </script>
</body>

</html>

3）fadeIn()/fadeTo()和fadeOut()   |   淡显淡隐

fadeIn()和fadeOut():

作用:用来显示元素/隐藏元素
用法:
jQuqry对象.fadeIn(speed,easing,fn)
参数含义:
a)speed表示速度,可以替换为"slow","normal","fast" 或者 设置毫秒数 1000  1250 之类
b)easing表示切换效果,可以替换为默认"swing","linear"
c)fn表示回调函数,当动画完成后执行该函数

###特殊:

fadeTo(speed,opacity,easing,fn)

作用:用来显示元素,显示到某一透明度停止显示
用法:
jQuqry对象.fadeTo(speed,opacity,easing,fn)
参数含义:
a)speed表示速度,可以替换为"slow","normal","fast" 或者 设置毫秒数 1000  1250 之类
b)opacity表示透明度(0,1)取值范围
c)easing表示切换效果,可以替换为默认"swing","linear"
d)fn表示回调函数,当动画完成后执行该函数

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery案例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <button class="fadeIn">fadeIn 按钮</button>
    <button class="fadeOut"> fadeOut 按钮 </button>
    <div class="box3"></div>
    <hr>
    <button class="fadeTo">fadeTo 按钮</button>
    <!-- <button class="fadeOut"> fadeOut 按钮 </button> -->
    <div class="box4"></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>

        // 淡显淡没        // 淡显淡没        // 淡显淡没        // 淡显淡没
        // 淡显淡没        // 淡显淡没        // 淡显淡没        // 淡显淡没

        $('.fadeIn').click(function() {
            $('.box3').fadeIn(3000, 'linear', function() {
                console.log('fadeIn 执行完了')
            })
        });
        // hide()
        $('.fadeOut').click(function() {
            $('.box3').fadeOut(3000, 'linear', function() {
                console.log('fadeOut 执行完了')
            })
        });


        //可以设置元素半透明的动画效果 //可以设置元素半透明的动画效果
        //可以设置元素半透明的动画效果 //可以设置元素半透明的动画效果

        $('.fadeTo').click(function() {
            $('.box4').fadeTo(3000, 0.2, 'linear', function() {
                console.log('fadeTo 执行完了')
            })
        });
    </script>
</body>

</html>

2、自定义动画

jQuery中自定义动画:
1.内置动画:局限性,都是与元素隐藏和显示相关的
2.网页中的动画(位置移动的动画,颜色改变的动画),内置动画无法满足

语法:

jQuery对象.animate({},speed,linear,fn)

 后边的三个参数可以不写空着

a)第一个参数就是对象(键值对)
b)后面三个参数用法与show()内置动画一样

自定义动画的特点:
1.jQuery中自定义动画不支持与颜色相关的属性(背景颜色,文字颜色,边框颜色)
2.Query中自定义动画不支持transform相关的属性(位移,旋转,缩放)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery自定义动画</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script src="./jQuery.color.js"></script>
    <script>
        //代码演示自定义动画
        $('div').hover(function() {
            $(this).stop().animate({
                'width': '500px'
            }); //后边的三个参数可以不写空着 
        }, function() {
            $(this).stop().animate({
                'width': '300px'
            }); //后边的三个参数可以不写空着 
        })
    </script>
</body>

</html>

3、动画队列现象

动画队列:当元素执行多个动画的时候,动画会排队等待执行,动画队列是jQuery中动画的一个特点
记住:以后在使用jQuery动画的时候都要停止动画队列

操作方法:
停止动画就是再动画的前边加.stop()      // $('div').stop().show()
利用了排他思想:先停止其他所有动画,再单独加个动画

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery案例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        //代码演示
        //当鼠标进入元素的时候,让元素隐藏,鼠标离开的时候让元素显示
        $('div').hover(function() {
            $(this).stop().hide(3000, 'linear', function() {
                console.log('hide执行完了')
            })
        }, function() {
            $(this).stop().show(3000, 'linear', function() {
                console.log('show执行完了')
            })
        });
    </script>
</body>

</html>

三、jQuery中获取标签属性

获取标签身上的属性 
标准属性:标签本身自带的属性
自定义属性:程序员自己给标签定义的属性

jQuery中获取标签的属性就俩固定方法
推荐: 标准用prop()   自定义用attr()
第一: jQuery对象.prop()   用来获取或者设置标签身上标准属性
第二: jQuery对象.attr()   用来获取或者设置自定义属性 既可以操作自定义属性又能操作标准属性

第一:jQuery.prop()

用来获取或者设置标签身上标准属性,并且,只能获取标准属性

 获取:

        console.log($('div').prop('class'))

修改:

        $('div').prop('class', 'newbox')

第二: jQuery.attr()

用来获取或者设置自定义属性,既可以操作自定义属性又能操作标准属性

 获取:

        console.log($('div').attr('class'))

修改:

        $('div').attr('data-mag', 'hehe')

四、获取标签内容

1、获取非表单元素内容

语法 : jQuery对象.text()    或者   jQuery对象.html()
和innerText()和innerHtml()的区别一样

获取：

        console.log($('.box1').text());

        console.log($('.box2').html());

设置：

        $('.box1').text('<p>这是box1中新加的一句话</p>')

        $('.box2').html('<p>这是box2新加的一句话</p>')

2、获取表单内容

语法： jQuery对象.val()

获取：

        console.log($('input').val());

更改：

        $('input').val('新写的内容')

李建雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery中的hover()方法
qq_1724201421的博客
04-15 8725
jQuery中的hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）。如下面一段代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;tit
Jquery的hover事件
weixin_57760860的博客
04-10 7410
Jquery的hover事件：鼠标移入移出事件的结合 跟这以下几个步骤了解jquery的hover事件； 先创建一个div用来绑定事件 <div id="box">hello world</div> 然后给这个div设置好style样式更好直观的看出事件的变化 #box{ width: 200px; height: 200px; background-color: red; } ...
jQuery hover() 方法
极客神殿
10-30 545
实例 当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/j...
jquery语法学习10（hover siblings）
时意
08-12 300
1）hover（function（）{}，function（）{}） 鼠标移入移出 推荐用这个 等于 mouseenter mouseleave <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
html中绑定hover事件,jQuery中多个元素的Hover事件解决方案
weixin_30802399的博客
06-10 1426
1.需求简介jQuery的hover事件只是针对单个HTML元素，例如：$('#login').hover(fun2, fun2);当鼠标进入#login元素时调用fun1函数，离开时则调用fun2函数，这种API已能够满足绝大部分需求。不过，有些时候我们希望当鼠标进入两个或多个元素时触发fun1，离开他们时触发fun2，而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素，如...
jQuery中的hover事件
weixin_44540247的博客
06-10 6957
在我们之前学习前端的过程中了解到了很多代码的作用，特别是js中所使用的方法，我之前也介绍过很多实用的js方法，今天要给大家介绍的是jQuery中的一个比较特殊的一个方法：hover()。 先前说过，我们在编程的时候最不想看到的结果是方法效果实现了，但是代码量却出乎意料的繁杂、量大，所以在写代码的时候通常会使用一些插件或者是特殊方法尽量简写代码，而jQuery就是用于书写方便，简写代码的插件。尽管使...
jQuery-UI和jsPlumb实现拖拽连接模型demo下载
08-06
为了更好地理解这个过程，你可以下载提供的压缩包文件（02df5ebe3f384c8a85820a1d06b6f4cc），其中包含了一个示例项目。这个项目应该包含了HTML、CSS和JavaScript文件，演示了如何集成jQuery-UI和jsPlumb，实现拖拽...
02-jquery-and-the-dom
05-15
资源配置您的存储库必须包括： 02-jquery-and-the-dom├── .eslintrc.json├── .gitignore├── LICENSE├── README.md├── index.html├── scripts│ ├── article.js│ └── blogArticles.js├─...
jquery-tab-menu_02
03-17
本篇文章将详细解析一个基于jQuery实现的Tab菜单——"jquery-tab-menu_02"，并探讨其背后的原理与实现方法。 一、jQuery基础 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
jquery-ui-v1.10.4.css
05-04
jquery-ui-v1.10.4.css.必备资源.加点资源分希望大家能理解
jQuery-Overflow-Detector
06-24
jQuery 溢出检测器这个 jQuery 插件可以检测内容何时溢出块并返回溢出内容。安装将文件下载到您的项目中，并在 jquery 后链接 < script type =" text/javascript " src =" ...版本历史1.0.0 2015-02-18 第一版
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
08-24 4956
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
jquery的消失显示效果问题
weixin_42057469的博客
11-01 444
jquery的消失显示效果问题 现默认有6个div方块，点击可使其消失 另有一个增加div按钮，课添加div 问题 新添加的div无法点击消失 图例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script sr...
vue hover事件
weixin_35756373的博客
01-03 9369
Vue 框架中的 hover 事件可以通过在 HTML 标签上使用 v-on:mouseover 或者简写为 @mouseover 来监听。例如： <template> <div @mouseover="onHover">鼠标移动到我上面会触发事件</div> </template> <script> export default ...
hover鼠标经过事件
lxj362343的博客
04-20 1894
记录学到的东西，以后可以翻看，形成记忆。 hover是什么，暂时没有找到比较官方的说法，可能我还没有专注去找吧，在百度知道上看到一个答案，就摘抄过了 百度知道的原网址： https://zhidao.baidu.com/question/1434207239084411299.html hover，指一个模仿悬复停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它...
jq实现网站-点击标签，添加到一个盒子中，再次点击去掉该标签
最新发布
weixin_48596030的博客
07-15 354
如果标签已经存在于盒子中，则使用removeClass()方法移除标签的’active’类名，并使用filter()方法找到盒子中与点击的标签文本相同的元素，并使用remove()方法将其移除；元素，并使用text()方法设置其文本内容为点击的标签文本，最后使用appendTo()方法将新创建的。如果标签不存在于盒子中，则使用addClass()方法添加标签的’active’类名，并使用$(‘// 如果标签已经存在于盒子中，则从盒子中移除该值。// 如果标签不存在于盒子中，则将其添加到盒子中。
jQuery事件与特效
sl105105的博客
07-13 675
jQuery中的事件 jQuery事件是对JavaScript事件的封装，常用事件分类 1.基础事件 2.鼠标事件 3.键盘事件 window事件 1.表单事件 2.复合事件 3.鼠标光标悬停
jQuery – 鼠标经过(hover)事件的延时处理
qingfengxia2013的专栏
12-15 714
http://www.zhangxinxu.com/wordpress/?p=409   jQuery – 鼠标经过(hover)事件的延时处理 by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=906 一、关于鼠标hover事件及延时 鼠标经过事件为web页面上...
[2023-08-01:1,2023-08-02:3]如何用jquery将2023-08-02删除
07-15
你可以使用 jQuery 中的 `.remove()` 方法来删除元素。假设你要删除日期为 2023-08-02 的元素，可以使用以下代码： ```javascript $("*[data-date='2023-08-02']").remove(); ``` 这里假设你的元素有一个 `data-date` 属性，值为日期，比如： ```html <div data-date="2023-08-01">Some content</div> <div data-date="2023-08-02">Content to be deleted</div> <div data-date="2023-08-03">Some more content</div> ``` 上述代码将会删除 `data-date` 属性值为 "2023-08-02" 的元素。希望能对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李建雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值