博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jQuery快速高效制作网页交互特效
阅读量:5917 次
发布时间:2019-06-19

本文共 2911 字,大约阅读时间需要 9 分钟。

jQuery中的事件

1,基础事件

     基础事件又包括  

    a:window事件

       在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文档就绪事件,对应的方法ready()

       $(document).ready(fn(){});  

   

    b:鼠标事件

        常用的鼠标事件有:

           click(fn);         单机鼠标时发生,fn表示绑定的函数

           keydown(fn);  鼠标指针移过时,fn表示绑定函数

           blur(fn)          鼠标指针移出时,失去焦点时,所执行的函数

           比如  最常见的光棒事件

           

$(function () {            //获取所有的li元素            $("li").mouseover(function () {                $(this).css("background", "pink");            });            //注册事件            $("li").mouseout(function () {                $(this).css("background", "");            });  });
  • 一个示例
  • 二个示例
  • 三个示例

  

  

    c:键盘事件

        键盘事件指当键盘聚焦到Web浏览器时,用户每次按下或者释放按键时所产生的事件常用的键盘有keydown(),keyup(),keypress()

//键盘事件            $("input").keyup(function(event) {                var s =event.keyCode;                alert(s);
//打印键盘的keycode值
}); 

键盘事件

-- 注意用词 --

 

  

 

        

 

    d:表单事件

       表单事件是所有事件中最稳定,且支持最稳定的事件之一,除了用户选取单选框,复选框等产生的click事件外,当元素获得焦点时触发focus事件,失去焦点时触发blur事件 

//表单事件            $("input").focus(function () {                $("#first").addClass("a");            })            $("input").blur(function () {                $("#first").removeClass("a");            });        }); ---    

键盘事件

注意用词

 

   e:绑定事件

       绑定事件是指为匹配到的元素同事绑定一个或者多个事件,使用bind()方法

      

      语法:bind(type,[data],,fn)

 

       对应的unbind() 解除事件

      例如:为一个无序列表绑定光棒效果

$("li").bind({                "mousemove": function () {                    $(this).css("background", "blue");                },      //鼠标移过 获得焦点                "mouseout": function () {                    $(this).css("background", "");                },    //鼠标移出失去焦点                click: function () {                    alert(this.innerHTML);                }            }).unbind("mouseout mousemove");                     //解除事件        });--   
  • 一个示例
  • 二个示例
  • 三个示例

 

 

2,复合事件

     hover()和toggle()方法,这两个方法和 ready()方法相似都是jQuery自定义的方法。

        a:hover()方法用于模拟鼠标指针悬停事件

    

    

 

       通常用在网站导航栏下拉的隐藏效果,相当于鼠标事件的mouseover 和mouseout事件

 

        b:toggle()方法 在1.9以上的jquery都删除了这个事件。 

           toggle()方法相当于鼠标连续单击事件,执行的fn

$(function () {            $("#one").toggle(                function () {                    $("#two").show();    //控制元素显示                }, function () {                    $("#two").hide();   //控制元素隐藏                }                );        });  //产生类似于 导航栏的单击出现再次单击关闭的效果-

 

 3,

     a:控制 元素的显示与隐藏

     在jQuery中,可以使用【show() hide()】控制元素的的显示和隐藏

     属性:【speed】[callback]

     speed的默认的值有slow(0.6s) normal(0.4s) fast(0.2s)

     前者控制元素显示或隐藏的速度,后者是指元素执行完方法后callback的自定义函数

----$(function () {                       $("body").click(function () {                $("img").show("slow");            //单击窗体  一图片以slow方式显现出来            });        });------省略部分代码 

 

 

   b:相似的方法还有控制元素的淡入淡出分别对应fadein()和fadeout()

   对应语法是$(selector).fadein([speed],[callback])   --以淡出的方法控制元素

                 $(selector).fadeout([speed],[callback])--控制元素淡出

   

    c:改变元素高度的方法

       slideDown(),slideUp(),

        语法类似

        

 

转载于:https://www.cnblogs.com/zhangyu0217----/p/6424866.html

你可能感兴趣的文章
LYNC2010 标准版的安装
查看>>
PD设计中表名过长,自动生成的主外键名截取的问题
查看>>
Microsoft Dynamics CRM 2013 电子邮件路由器安装程序 介绍
查看>>
Android:数据库增删改查、SQLite、SQLiteOpenHelper、openOrCreateDatabase
查看>>
007 content for
查看>>
使用spring boot devtools不要多此一举加try...catch
查看>>
[奇思怪想]浏览器插件之静音盒子
查看>>
性能监控之日志监控部分
查看>>
前端重构实践(二) —— 模块化开发
查看>>
阿里云ACE 同城 活动 总结
查看>>
ssh 与 locale
查看>>
聋哑人网络店铺的一天,催人泪下啊
查看>>
个人专著推荐2:Linux安全技术内幕
查看>>
《统一沟通-微软-技巧》-16-升级-反向代理服务器
查看>>
Java多线程初学者指南(11):使用Synchronized块同步方法
查看>>
致全球第一批全帧3D游戏!(1)
查看>>
ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二)
查看>>
Hyper-V 3.0功能部署PART 3:部署SMB共享存储
查看>>
Lync 小技巧-15-授权普通用户查看Lync报表
查看>>
丢包排错录:技术细节
查看>>