jQuery的事件和动画

最新推荐文章于 2022-08-19 10:56:57 发布
最新推荐文章于 2022-08-19 10:56:57 发布
阅读量866 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65795413/article/details/123688266
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #aa {
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: absolute;
                /* 绝对定位 */
                top: 50px;
                left: 50px;

            }

            p {
                text-align: center;
                /* 水平居中 */
                background-color: deeppink;
            }

            .abc {
                transform: rotate(360deg);
                transition: all 2s;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            /* jQuery第四次课 */

            /* 一、事件 */
            //1.1 加载DOM两种方式(区别)
            /* 只能写一个，多个会被覆盖 */
            //             window.οnlοad=function(){
            //                 console.info("js方式")
            //             }
            //             window.οnlοad=function(){
            //                 console.info("js方式1")
            //             }
            //             window.οnlοad=function(){
            //                 console.info("js方式2")
            //             }

            /* 可以写多个 都会被执行*/
            //             $(function() {
            //                 console.info("jquery方式")
            //             })
            // 
            //             $(function() {
            //                 console.info("jquery方式1")
            //             })
            //             $(function() {
            //                 console.info("jquery方式2")
            //             })
            // 
            //             $(function() {
            //                 console.info("jquery方式3")
            //             })
            // 


            $(function() {
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
                //             $("#aa").on("click",function(){
                //                 alert("hh")
                //             })
                //      
                //              $("#aa").bind("mouseover",function(){
                //                  alert("h")
                //              })

                //--元素.事件名
                //             $("#aa").click(function(){
                //                 alert("1")
                //                 
                //             })

                //1.3 合成事件/事件切换
                //--hover()悬停控制元素[div]的显示和隐藏
                //             $("#aa").hide()//隐藏
                //             $("a").hover(function(){//鼠标移上事件
                //                 $("#aa").show();//显示
                //             },function(){//鼠标移出事件
                //                 $("#aa").hide()//隐藏
                //             })
                //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
                //                 $("#aa").hide() //隐藏
                //                 $("a").toggle(function() { //鼠标移上事件
                //                     $("#aa").show(); //显示
                //                 }, function() { //鼠标移出事件
                //                     $("#aa").hide() //隐藏
                //                 })

                // $("#aa").toggle(1000);


                //1.4 事件的传播(事件冒泡) 小p->中div->大body
                //依次添加点击事件
                //                 $("p").click(function(){
                //                     console.info("p被点击了")
                //                 })
                //                 $("div").click(function(){
                //                     console.info("div被点击了")
                //                     return false;//阻止事件传播
                //                 })
                //                 $("body").click(function(){
                //                     console.info("body被点击了")
                //                 })


                //1.5 事件event的坐标[了解即可 pageX,pageY]
                //                 $("#aa").on("click",function(e){
                //                     console.info(e.pageX,e.pageY)
                //                 })


                //1.6 事件的移除
                //                 //--按钮只能点击一次[2]
                //                 $("#btn").click(function(){
                //                     console.info("449444")//做一系列事件
                //                     //将该点击事件移除
                //                     $("#btn").unbind("click");
                //                     //将按钮禁用
                //                     $("#btn").prop("disabled",true)
                //                     
                //                 })
                //                 $("#btn").one("click",function(){
                //                     console.info("44944")
                //                     
                //                 })

                //--按钮点击偶数次可行 奇数次不行/
                //                 var i=1;
                //                 $("#btn").click(function(){
                //                     if(i%2==0){//偶数次
                //                     console.info("44944",i);
                //                         
                //                     }
                //                     i++;
                //                 })


                /* 二、动画 */
                //2.1 基本动画 [回调函数]
                //                 $("#aa").hide(); //默认隐藏
                //                 $("#xx").click(function() {
                //                     $("#aa").show(1000, function() {
                //                         //回调函数
                //                         alert("ll")
                //                     })
                //                 })
                //                 $("#yy").click(function() {
                //                     $("#aa").hide(2000);
                //                 })
                //                 $("#zz").click(function() {
                //                     $("#aa").toggle(2000)
                //                 })

                //2.2 滑动动画
                //                 $("#aa").hide(); //默认隐藏
                //                 $("#xx").click(function() {
                //                     $("#aa").slideDown(1000);
                //                 })
                // 
                //                 $("#yy").click(function() {
                //                     $("#aa").slideUp(2000);
                //                 })
                //                 $("#zz").click(function() {
                //                     $("#aa").slideToggle(2000)
                //                 })
                //2.3 淡入淡出(透明度)
                //                 $("#aa").hide(); //默认隐藏
                //                 $("#xx").click(function() {
                //                     $("#aa").fadeIn(1000);
                //                 })
                // 
                //                 $("#yy").click(function() {
                //                     $("#aa").fadeOut(2000);
                //                 })
                //                 $("#zz").click(function() {
                //                     $("#aa").fadeToggle()(2000)
                //                 })
                //2.4 自定义动画
                //--缩放
                //                 $("#bb").on("click", function() {
                //                     $("#aa").animate({
                //                         width: 100,
                //                         height: 300
                //                     }, 1000)
                //                 })
                //--移动[2]
                //                 $("#bb").on("click", function() {
                //                     $("#aa").animate({
                //                         left:"+=10",
                //                         top:"+=10"
                //                     },100)
                //                 })
                $("#bb").click(function() {
                    //给div增加abc的样式
                    $("#aa").addClass("abc")
                })

            })
        </script>
    </head>
    <body>
        <input type="button" value="点我" id="btn" />
        <a style="text-decoration: none;" href="#">显示</a>
        <button id="xx">显示(展开)[淡入]</button>
        <button id="yy">隐藏（收缩）[淡出]</button>
        <button id="zz">显示和隐藏（展开/收缩）[淡入或淡出]</button>
        <button id="bb">bbbb</button>
        <div id="aa">
            <br />
            <br />
            <p>这是一辈子</p>
        </div>


    </body>
</html>

心动特性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>心跳</title>
        <style type="text/css">
            #aa{
                position: absolute;
                /* 绝对定位 */
                top: 100px;
                left: 100px;
            }
            
        </style>
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                $("#bb").click(function() {
                    for (var i = 1; i < 1000; i++) {
                        $("#aa").animate({
                            width: 20,
                            height: 17
                        }, 400)
                        $("#aa").animate({
                            width: 50,
                            height: 50
                        }, 400)
                    }

                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="点我" id="bb" />
        <img src="img/10.png" id="aa" />
    </body>
</html>

陨落.190
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现图片动态加载效果
11-14
jQuery实现图片动态加载效果 鼠标滚动时图片动态加载
jquery 动态图片
weixin_33775582的博客
11-17 94
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-...
jQuery UI 配合 icon 设计出 gif 动态图效果
PythonShell 随笔
10-27 1454
2014-04-21 15:15 的草稿，很早之前的菜鸟入门时学会的东西，我也忘了是原创还是转载的，毕竟年代久远了。嗯，能帮上忙就好……需要使用到的知识： jQuery UI的 Color Animation: http://jqueryui.com/animate/ HTML DOM setInterval()方法: http://www.w3school.com.cn/jsref/met_w
jQuery绑定事件的方法四种方法
热门推荐
旺仔
07-05 2万+
jq给元素绑定事件的方法有4种，1.bind()  2.live()  3.live()  4.on()  //on常用 一：bind(type,[data],function(eventObject))      bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：      type:事件类型，如click、change、mouseover等;  ...
jQuery事件和动画.md
11-09
jQuery事件和动画.md
[jQuery] 事件和动画详解
10-17
总结来说，jQuery事件和动画为开发者提供了强大的工具，简化了JavaScript中处理DOM事件和创建动画的复杂性，使网页交互更加生动有趣。了解并熟练使用这些功能，能大大提高前端开发的效率和用户体验。
jQuery事件和动画.ppt
02-14
jQuery事件和动画.，对刚学习的同学帮助很大
JQuery中的事件及动画用法实例
10-24
主要介绍了JQuery中的事件及动画用法,实例分析了事件的绑定、移除、添加及动画方法操作表单的使用技巧,需要的朋友可以参考下
jquery事件与动画资料
09-10
jquery事件与动画，初学者不明白怎么用看看pdf吧，这是老师发的
用jQuery实现切换动态图片
weixin_30762087的博客
08-20 211
1、实现动态图片的切换只需要改变目标图片的路径 转载于:https://www.cnblogs.com/remain/p/9506764.html
jQuery的两个合成事件---hover()方法和toggle()方法
Allenyhy的博客
10-26 1780
 1.hover()方法 语法结构为：hover(enter,leave); 该方法用于鼠标的悬停事件，当光标移动到元素上时，会触发第一个函数（enter），当光标移除这个元素时，会触发第二个函数（leave）   $(function(){ $('div').hover(function(){ //我是第一个函数 },function(){ //我是第二个函数 ...
HTML-jQuery中的事件与动画
南劲竹的博客
09-16 606
网页中的事件 和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现 jQuery中的事件： jQuery事件是对JavaScript事件的封装，常用事件分类： 基础事件：①鼠标事件；②键盘事件；③window事件；④表单事件 复合事件：①鼠标光标悬停；②鼠标连续点击 鼠标事件： 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件...
jQuery事件和动画
Mr·小五
06-08 299
jQuery事件和动画事件的概念: 在JavaScript和HTML之间的交互是通过用户和浏览器操作页面是引发的事件来处理,当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件事件的定义: 1.通俗的讲,我们要做的那件事(操作,动作,行为),就是一个事件2.在浏览器,事件是指: 浏览器打开到关闭这个过程中,用户在浏览器所做的一系列操作就是事件;同时,用户所做的事件,一般都有相应的...
jq点击旋转动画_jquery – CSS3在动画元素上旋转,导致不调用click事件
weixin_27722377的博客
01-27 187
我似乎无法复制问题,它似乎在添加浮动后正常工作：left;.有时浏览器在渲染HTML元素的实际宽度时表现得很有趣. float：left似乎让浏览器计算得更好.这是JavaScript：$(document).ready(function (){$('#Box1').bind({'click' : function () {alert('clicked Box 1');},'hover' : fu...
jQuery事件与动画
最新发布
m0_61843988的博客
08-19 241
页面对不同的访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件事件所调用的方法。
jQuery事件监听与动画效果
lemon_yu的博客
05-02 2088
文章目录事件绑定方式事件移除取消冒泡取消默认行为事件的自动触发自定义事件事件的命名空间 事件绑定方式 jQuery绑定事件的方式很多 除了直接绑定事件外，还有四种监听器 绑定 解除 兼容 特点 bind unbind all 仅可监听已有元素 live die 1.9- 应该已经弃用 delegate undelegate 1.4.2+ 一般用于委派 on off 1....
jQuery事件绑定及合成事件
a3060858469的博客
04-27 255
window.onload方法和$(document).ready()方法的区别3种方式是等价的 $(document).ready(function(){ }) $(function(){ }) $().ready(function(){ })事件绑定：bind() click mouseover mouseout 事件流程：等待DOM转载完毕，找到标题所在的元素，绑定click事件，找
第七章jQuery中的事件与动画
FeiyuN_12的博客
11-08 410
基础事件： 鼠标事件 mouse 键盘事件 window窗口事件 表单事件 复合事件： 鼠标光标悬停 鼠标连续点击 鼠标事件： 方法 描述 执行时机 click() 触发或将函数绑定到指定元素的click事件 点击鼠标时 mouseover 触发或将函数绑定到指定元素mouseover事.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值