jQuery事件与特效

最新推荐文章于 2023-10-04 17:11:29 发布
最新推荐文章于 2023-10-04 17:11:29 发布
阅读量702 收藏 1
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sl105105/article/details/125771486
版权
jQuery中的事件
jQuery事件是对JavaScript事件的封装，常用事件分类
1.基础事件
2.鼠标事件
3.键盘事件
window事件
1.表单事件
2.复合事件
3.鼠标光标悬停
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
 
制作导航页面
以mouseover( ) 与mouseout( )方法为例，实现导航菜单
鼠标事件方法的区别
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件
 
键盘事件可以结合回调函数使用
  // 回调函数
       function kd(fn){
        fn()
       }
       kd(function(){
        alert("我是回调函数")
       })
键盘事件
以键盘事件为例，实现按键时特效
$("[type=password]").keyup(function () {
$("#events").append("keyup");
      }).keydown(function (e) {
$("#events").append("keydown");
      }).keypress(function () {
$("#events").append("keypress");
     });
$(document).keydown(function (event) {
 if (event.keyCode == "13") {
alert("确认要提交么？");
}
});
浏览器事件
调整窗口大小时，完成页面特效
$(selector).resize( );
   $(window).resize(function () {
            console.log("窗口调整");
        })
使用index()方法获取下标,来做菜单栏的选中
练习1：
默认状态下仅显示图标，背景颜色为深灰色；当鼠标移至图标上时，背景颜色为深红色
 练习2:
使用iframe 页面嵌套来制作菜单导航栏切换
第一种:
.red {
        background-color: red;
    }
</style>
<body>
    <ul class="ul1">
        <li class="nan">男生</li>
        <li class="nv">女生</li>
    </ul>
    <iframe src="./nan.html" frameborder="0" style="width: 100vw;height:100vh;"></iframe>
    <script>
        $(".ul1 li").click(function () {
            var index = $(this).index()
            // console.log(index);
            $(".ul1 li").removeClass("red")
            $(this).addClass("red")
            if ($(this).text() == "男生") {
                $("iframe").attr("src", "./nan.html")
            } else {
                $("iframe").attr("src", "./women.html")
            }
        })  
    </script>
</body>
第二种使用es6模板字符
<body>
    <ul class="ul1">
        <li class="nan">男生</li>
        <li class="nv">女生</li>
    </ul>
    <ul class="ul2">
        <li>男生小说内容</li>
        <li>女生小说内容</li>
    </ul>
    <script>
        $(".ul1 li").click(function () {
            var index = $(this).index()
            $(".ul1 li").removeClass("red")
            $(this).addClass("red")
            $(".ul2 li").css("display", "none")
             // es6模板字符串
            $(`.ul2 li:eq(${index})`).css("display", "block")
            // jQuery写法
            // $(".ul2 li:eq(" + index + ")").css("display", "block")
            // $("li").eq(0).scggvhow()
            // $("li").eq(1).hide()
           
        })  
    </script>
</body>
使用列表制作页面内容，使用<span>和<p>分别显示背景图片和文本内容
使用index( ) 获取当前鼠标移至元素在列表中的索引值，使用eq( )获取当前元素所在<li>
使用同辈元素选择器和eq( )选择器获取当前<span>元素的兄弟元素<p>
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").show();
例如：
绑定事件与移除事件
绑定事件
移除事件
绑定事件
on(type,fn);
Type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
Fn：处理函数
绑定单个事件
使用绑定实现鼠标移至显示二级菜单
$(".on").on("mouseover",function(){
$(".topDown").show();
});
 
同时绑定多个事件
使用绑定多个事件实现二级菜单的显示和隐藏
$(".top-m .on").on({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
// 给div绑定多个事件
        $("div").on({
            click: function () {
                // 改变div的背景颜色
                $(this).css({ background: "blue", transition: "all 1s" })
            },
            mouseover: function () {
                // 改变div的背景颜色
                $(this).css({ width: "600px", transition: "all 1s" })
            },
            mouseout: function () {
                // 改变div的背景颜色
                $(this).css({ width: "200px", transition: "all 1s" })
            }
        })
利用on给未来元素，做事件委托处理：
$("body").on("mouseover",".abc",function(){
$(".topDown").show();
});
 // 利用on来做未来事件委托
        // 把h1的点击事件委托给body绑定, 可以实现给未来元素添加事件
        // on后面的第一参数是事件名称,第二参数是未来元素,第三个参数是绑定的方法
        // 点击按钮添加H1进div
        $("div").html("<h1>haha </h1>")
        $("body").on("click", "h1", function () {
            alert("h1")
        })
        // 给未来元素H1绑定了事件
        $("h1").click(function () {
            alert("h1")
        })
移除事件
移除事件使用off()方法
off([type],[fn])
Type:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
Fn:处理函数
// 点击button按钮移除div的鼠标点击事件
        $("button").click(function () {
            $("div").off("click")
        })
当off()不带参数时，表示移除所绑定的全部事件,如果你想去除特定的绑定事件,直接在()里写上事件名称即可
// 点击button按钮移除div的鼠标点击事件
        $("button").click(function () {
            // $("div").off("click")
            // 移除所有事件
            $("div").off()
        })
hover()方法
hover()方法相当于mouseenter与mouseleave事件的组合,进入子元素不触发事件
 $("p").hover(function () {
            // 第一个回调函数代表mouseenter
            alert("1")
        }, function () {
            // 第二个回调函数代表mouseleave
            alert("2")
        })
hover(enter,leave);
第一个函数表示光标移入时触发
第二个函数表示光标移出时触发
$(".top-m .on").hover(function(){
$(".topDown").show();
          },
         function(){
 $(".topDown").hide();
         }
);
  <body>
    <div class="p">
        <div class="c"></div>
    </div>
    <script>
        $(".p").hover(function () {
            // 第一个回调函数代表mouseenter
            alert("1")
        }, function () {
            // 第二个回调函数代表mouseleave
            alert("2")
        })
        // 如果进入和离开都触发同一个方法的话, 可以只写一个回调函数
        $(".p").hover(function () {
            alert("1")
        })
  </script>
toggle()方法
toggle()方法不带参数，与show( )和hide( )方法作用一样
练习：
使用hover( )实现鼠标移至菜单上时，显示二级菜单，移出当前菜单时二级菜单隐藏
使用toggleClass( )实现鼠标移至菜单上时背景颜色变为橙色，鼠标移出当前菜单时背景颜色恢复为原来颜色
   .p {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="neu">
        <li>导航</li>
    </ul>
    <ol>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
    </ol>
    <script>
        $(".neu").hover(function () {
            $("ol").css("display", "block")
        }, function () {
            $("ol").css("display", "none")
        })
        $(".neu").hover(function () {
            $(".neu").toggleClass("p")
        })
    </script>
</body>
简单写法如下:
  $(".neu>li").hover(function () {
            $(this).toggleClass("p")
            $(this).find("ol").toggleClass("p1")
        })
jQuery动画效果
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
  控制元素的显示及隐藏
show() 控制元素的显示，hide( )控制元素的隐藏
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback可选。show函数执行完之后，要执行的函数
<script>
        $("ul>li").hover(function () {
            $(this).find("ol").show(3000, function () {
                alert("我展示出来了")
            })
        }, function () {
            $(this).find("ol").hide("slow", function () {
                alert("我隐藏了")
            })
        })
    </script>
改变元素的透明度
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
改变元素的高度,滑动效果
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])
$(document).ready(function() {
       $("h2").click(function(){
   $(".txt").slideUp("slow");
   $(".txt").slideDown("slow");
       });
 });
 
自定义动画
$(selector). animate({params},speed,callback)
Params：必须，定义形成动画的CSS属性
  <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        function fn() {
            // 先变小
            $("div").animate({
                width: 200,
                height: 200,
                marginTop: "0px",
                backgroundColor: "aqua",
            }, 2000, fn);
            // 再变大
            $("div").animate({
                width: 600,
                height: 500,
                marginTop: "20px",
                backgroundColor: "aqua",
            }, 5000, fn)
        }
        // 调用后反复实现动画
        fn();
    </script>
练习1：
鼠标移至“联系客服”，二级菜单以”slow“速度显示；当鼠标离开时，二级菜单以“fast”速度隐藏
鼠标一级菜单时，使用slideDown( ) 实现二级菜单以“slow”速度显示；当鼠标再次单击一级菜单时，使用slideUp( ) 实现二级菜单以”slow“速度隐藏
  <body>
    <ul class="neu">
        <li>导航
            <ol>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
            </ol>
        </li>
        <li>导航
            <ol>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
            </ol>
        </li>
        <li>导航
            <ol>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
            </ol>
        </li>
    </ul>
    <script>
        var i = true
        $(".neu>li").hover(function () {
            $(this).find("ol").show()
            $(this).toggleClass("p")
        }
            ,
            function () {
                $(this).toggleClass("p")
                $(this).find("ol").hide("fast")
            }
        )
        $(".neu>li").click(function () {
            if (i) {
                $(this).find("ol").slideDown("slow")
                i = false
            } else {
                $(this).find("ol").slideUp("fast")
                i = true
            }
        })
    </script>
</body>
sl105105
关注
Jquery的hover事件
weixin_57760860的博客
04-10 7452
Jquery的hover事件：鼠标移入移出事件的结合 跟这以下几个步骤了解jquery的hover事件； 先创建一个div用来绑定事件 <div id="box">hello world</div> 然后给这个div设置好style样式更好直观的看出事件的变化 #box{ width: 200px; height: 200px; background-color: red; } ...
jQuery hover事件
weixin_34249367的博客
05-29 126
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事...
jquery hover 事件
fengbin2005
11-04 189
$("#id").hover(function(){   //当鼠标放上去的时候,程序处理},function(){   //当鼠标离开的时候,程序处理});几句简单的代码,客户端下就是一个超炫的效果.看下效果图吧.图片颜色明显失真了.但效果基本还是能看出来的. 上面这张图片中.我的鼠标正好在第 [主题] 上当鼠标放到 [编辑] 链接上,就马上会出现 [主题] [问题] 俩个链接.当鼠标移去.又回...
jquery的hover事件
qq_38101304的博客
01-08 473
$(".list_menu li").hover(function () { $(this).find("ul").stop().fadeIn(100) },function () { $(this).find("ul").stop().fadeOut(100) }) hover事件用来鼠标的移入移出监听
jQuery 事件&动画特效
qq_62331938的博客
03-20 998
前言 上次九歌分享了jQuery的筛选和事件处理，这次来分享jQuery的事件和动画效果。 以下是本篇文章正文内容，下面案例可供参考 一、事件 1.加载Dom两种方式 （1）window.onload方式 （2）jQuery方式 //js window.onload = function(){ console.info("js方式"); } //jQUery $(function(){ console.info("jQuery方...
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery滑动字母特效特效代码
03-20
"谷普下载.url"和"说明.url"可能是指向更多关于jQuery特效资源的链接，如详细的使用教程、示例代码库或其他相关的学习资料，帮助开发者更深入理解和应用这个特效。 总的来说，"jQuery滑动字母特效"是一种利用...
jQuery的hover事件
weixin_48047636的博客
05-16 1458
<body> <div id="d1"> <div id="d2"> <div id="d3"></div> </div> </div> <script src="../jquery-1.8.3.min.js"></script> <script> /* $("#d1").mouseov
jQuery中的hover事件
weixin_44540247的博客
06-10 7010
在我们之前学习前端的过程中了解到了很多代码的作用，特别是js中所使用的方法，我之前也介绍过很多实用的js方法，今天要给大家介绍的是jQuery中的一个比较特殊的一个方法：hover()。 先前说过，我们在编程的时候最不想看到的结果是方法效果实现了，但是代码量却出乎意料的繁杂、量大，所以在写代码的时候通常会使用一些插件或者是特殊方法尽量简写代码，而jQuery就是用于书写方便，简写代码的插件。尽管使...
JQuery事件之hover
热门推荐
来老师的专栏
12-06 1万+
在JQuery中提供了hover事件，以简化Dom中的mouseenter,和mouseleave事件，hover的第一个参数（匿名方法）表示mouseenter，第二个参数表示mouseleave，即表示可以为hover传递两个参数。如下代码所示： .in { background-color:blue;
jquery中的hover悬浮事件
the_bit的博客
02-09 888
jquery中的hover悬浮事件用法
jquery事件切换hover/toggle
weixin_30411239的博客
12-04 124
1.hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是 否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保...
jQuery文字显示特效
06-01
标签“js特效”和“jQuery特效”暗示了这些特效是通过JavaScript语言和jQuery库实现的。JavaScript是一种在客户端运行的脚本语言，它可以修改DOM（文档对象模型），进而改变网页内容和样式。jQuery库简化了...
Jquery hover事件 即鼠标悬停事件
hyddhy的博客
06-18 500
//配合layui //鼠标移到地址栏时 $(".detailAdd").hover(function () { layer.tips(detailAdd,$(this), { tips: [1, '#3595CC'], maxWidth: 360, time:0 }); },function () { ...
浅析jQuery里面的.hover事件
weixin_30608503的博客
09-10 132
.Hover() 是一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修...
jQuery的hover()方法是用于处理鼠标悬停事件的。下面是一篇关于jQuery hover()方法的详细文章，包含相应的源代码。
最新发布
2301_79326857的博客
10-04 747
jQuery是一个流行的JavaScript库，提供了许多简化和增强JavaScript编程的功能。其中一个常用的方法是hover()方法，用于处理鼠标悬停事件。本文将详细介绍hover()方法的用法，并提供相应的源代码示例。hover()方法是一个用于处理鼠标悬停事件的快捷方式。通过这个简单的示例，你可以看到hover()方法如何方便地处理鼠标悬停事件。类名的元素，并使用hover()方法将鼠标进入和离开事件绑定到这些元素上。来引用当前离开的元素，并将其背景颜色更改为红色。来引用当前悬停的元素，并使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值